js事件处理函数/监听函数
来源:互联网 发布:淘宝物流单号怎么填 编辑:程序博客网 时间:2024/06/05 20:35
当我们刚接触js的时候,我我们需要给一个鼠标绑定是一个事件的时候,通俗的说就是当鼠标发生一定动作的时候,需要去干什么..比如当click鼠标的时候需要做什么.我们或许会这样写:
1
var
getObj = document.getElementById(
'obj'
);
//从html节点中找到那个对象.
2
3
getObj.onclick =
function
(){
//绑定一个事件,当鼠标点击的时候,执行匿名函数里的代码.
4
5
//do something
6
7
}
这样的做法确实很好,并且所有的浏览器都支持该方法,但是久而久之,你会发现,加入要给一个对象绑定多个事件怎么办?写上很多个getObj.onclick = ...?但是这样确实不行的,如果真这样做了,前边的事件会被后面的事件覆盖,得不到想要的结果.这时候我们想到了事件监听函数.
IE的事件监听函数: attachEvent(name_event,func)
它的第一个参数是需要绑定的事件的名字,第二个是需要执行的函数句柄,现在你就可以在IE浏览器下一次绑定多个事件了,例如:
01
var
click1 =
function
(){
02
03
alert(
"第一个事件"
);
04
05
};
06
07
var
click2 =
function
(){
08
09
alert(
"第二个事件"
);
10
11
};
12
13
var
getObj = document.getElementById(
'obj'
);
14
15
getObj.attachEvent(
"onclick"
,click1);
16
17
getObj.attachEvent(
"onclick"
,click2);
浏览器会先后弹出两个窗口,依次打印出两个函数的内容.这样就不会存在事件的覆盖问题了.
W3C定义的事件监听模型: addEventListener()
addEventListener(name_event,func,bCapture)
这个比IE的监听函数多了一个参数,第三个参数,这主要是因为遵循W3C模式的浏览器事件流会有两种阶段,监听阶段和捕获阶段,当参数为false时候为冒泡阶段,ture为捕获阶段.而IE缺少捕获阶段,而只有冒泡的阶段.所以为了兼容,一般第3个参数为false.再有就是W3C中的name_event没有"on"前缀.例如:"click","mousemove"...
同IE中事件监听函数类似,绑定多个事件如下:
01
var
click1 =
function
(){
02
03
alert(
"第一个事件"
);
04
05
};
06
07
var
click2 =
function
(){
08
09
alert(
"第二个事件"
);
10
11
};
12
13
var
getObj = document.getElementById(
'obj'
);
14
15
getObj.addEventListener(
"click"
,click1);
16
17
getObj.addEventListener(
"click"
,click1);
效果一样,现在就可为同一个对象绑定多个事件了,但是问题又来了,我们需要跨平台处理,所以得制造一个函数兼容所有的浏览器:
1
function
addEvent(obj, eventName,func){
2
if
(obj.addEventListener) {
3
obj.addEventListener(eventName,func,
false
);
4
}
else
if
(obj.attachEvent) {
5
obj.attachEvent(
"on"
+ eventName,func);
6
7
}
8
}
至于事件的卸载大致类似...
现在来看看前辈们怎么做的:
jQuery 之父的addEvent: http://ejohn.org/blog/flexible-javascript-events/
Dean Edwards 的做法: http://dean.edwards.name/weblog/2005/10/add-event/
转载请注明来源:集思网本文链接地址:js事件处理函数/监听函数
- js事件处理函数/监听函数
- js事件处理函数/监听函数
- 事件处理函数/监听函数
- 事件处理函数/监听函数/事件对象
- JS事件处理函数
- JavaScript之事件处理(监听)函数
- JavaScript之事件处理(监听)函数
- JavaScript之事件处理(监听)函数
- Node.js的事件监听函数代码
- JS添加事件处理函数
- 事件监听函数addEvent
- 事件监听函数
- 绑定事件监听函数
- 24.Nginx监听套接字读事件处理函数ngx_event_accept
- JS 一个函数处理多个事件
- js中事件处理函数的总结
- js定时器与事件函数处理机制
- 用JS监听事件(函数封装)修改页面属性
- 排序之桶排序
- configure相关笔记整理
- OpenCV:1.Ubuntu下安装
- (三) 浏览器内置对象及常用方法
- HDU 1020
- js事件处理函数/监听函数
- mysql安装教程
- TOEFL writing——academic vocabulary
- 图片展示JQ
- Easy-题目50:38. Count and Say
- SectionIndexer中的getSectionForPosition()与getPositionForSection()解惑
- Creational Patterns Part 2/5: Abstract Factory Pattern
- hdu 5664 Lady CA and the graph (树分治,树状数组)
- LSM-tree 一种高效的索引数据结构