[记录] JavaScript 中的事件(Event对象、事件源对象、事件流、事件绑定)【转发】
event对象:
什么是event对象： 用来获取事件的详细信息。(如：键盘的状态、鼠标的位置、鼠标按钮的状态)
event对象浏览器兼容问题：
|
1
2
3
4
5
|
function (ev) { // IE: 支持window.event // 标准： 事件处理函数传入的ev对象 var ev = ev || window.event;} |
事件源对象：
|
1
2
3
4
5
|
FF: event.targetIE: event.srcElementChreme 都支持兼容写法：var target = event.target || event.srcElement; |
事件委托：
|
1
2
3
4
5
|
什么是事件委托： 通俗的讲就是委托长辈来执行事件。把事件绑定到事件源对象的祖先元素上，利用事件冒泡原理触发事件。优点：1. 提高性能，不需要循环所有元素一个一个绑定事件。2. 灵活，有动态创建进来的新元素不需要重新绑定事件。 |
事件流：
事件捕获：(从外往里，一层一层触发)
事件冒泡：(从里往外 -> 一层一层触发) 在一个元素对象上触发某类事件(如onclick事件), 那么这个事件就会向这个元素对象的父级传递，直到最顶级document对象或window对象。传递对象上所有同类事件都将被激活。
优点：
事件冒泡允许多个操作被集中处理(把事件处理函数添加到一个父级元素上，避免把事件处理函数添加到多个子元素上), 它还可以让你在对象层的不同层捕获到事件。
缺点：
有时候会出现干扰，因此需要阻止事件冒泡；
|
1
2
3
4
5
6
7
8
9
10
11
12
|
阻止事件冒泡：IE： event.cancalBubble = true; W3C标准: event.stopPropagation();IE9以下版本不支持封装阻止事件冒泡函数：function stopBubble(ev) { var ev = ev || window.event; if(ev.stopPropagation) { ev.stopPropagation(); }else{ ev.cancelBubble = true; }} |
阻止默认事件：
默认事件： 如表单提交，a标签跳转，右键菜单等...
|
1
2
3
4
5
6
7
8
9
10
11
12
|
1. return false; 只有以对象属性的方式注册的事件才生效;2. event.preventDefault(); W3C标准，IE9以下不兼容3. event.returnValue = false; IE封装阻止默认事件函数：function cancelHandler(ev){ var ev = ev || window.event; if(ev.preventDefault) { ev.preventDefault(); }else{ ev.returnValue = false; }} |
事件绑定/解除绑定
添加事件的方式：
1. 普通添加事件(一个元素的同一个事件上只能绑定一个事件处理函数，后定义的覆盖之前定义的)
|
1
2
|
oBtn.onclick = function() { console.log('A'); }oBtn.onclick = function() { console.log('B'); } |
2. 绑定的方式添加事件(可以添加多个事件处理函数)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
标准浏览器：添加绑定obj.addEventListener(type[事件名称], fn[事件处理函数], 是否捕获true/false); 解除绑定obj.removeEventListener(type[事件名称], fn[事件处理函数],是否捕获true/false);注意：三个参数、事件名不带on、事件处理函数先绑定先执行、this指向绑定事件的对象。IE：添加绑定 obj.attachEvent('on'+type[事件名称], fn[事件处理函数]);解除绑定obj.detachEvent('on'+type[事件名称], fn[事件处理函数]);注意： 两个参数、事件名带on、事件处理函数先绑定后执行、this指向window。绑定事件封装： 给某个对象，绑定某个事件，执行某个函数function addEvent(elem, type, handle) { if(elem.addEventListener) { elem.addEventListener(type, handle, false); }else if(elem.attachEvent) { elem.attaceEvent('on' + type, fnction() { handle.call(elem); }); }else{ elem['on' + type] = handle; }}解除绑定事件封装：(匿名函数无法解绑)function removeEvent(elem, type, handle) { if(elem.removeEventListener) { elem.removeEventListener(type, handle, false); }else if(elem.detachEvent) { elem.detachEvent('on' + type, function() { handle.call(elem); }); }else{ elem['on' + type] = null; }} |
