js中关于DOM的操作很多,因此js事件机制也就尤为重要。
事件绑定形式:
一. 内联形式
耦合度高,不利于维护
<button onclick="alert('你点击了这个按钮');">点击这个按钮</button>
二. 属性绑定(DOM0级事件)
只能绑定一个函数
button.onclick = function() {};
三. 事件监听函数(DOM2级事件)
element.addEventListener(<event-name>, <callback>, <use-capture>);
element.removeEventListener(<event-name>, <callback>, <use-capture>);
element.attachEvent(event, callback)(IE11以后用addEventLisener);
element.detachEvent(event, callback)(IE11以后用addEventLisener);
事件代理
在父元素上绑定事件,监听子元素的事件。主要用于子元素是新建元素或者子元素个数很多的情况下。这种方法可以提高性能,同时避免提前绑定元素事件而导致新建元素的事件没有生效的结果。
<ul> <li>11111111111111111111</li> </ul>
document.addEventListener('click', function (e) { console.log('document currentTarget: ' + e.currentTarget.nodeName); console.log('document target: ' + e.target.nodeName); if (e.target.nodeName === 'LI') { console.log('dom delegate: ' + e.eventPhase); } console.log(this); }, true);
事件触发顺序
- Event Capturing(事件捕获): Netscape
- Event Bubbling(事件冒泡): IE
这两种方式确定了事件执行的前后顺序,只不过后来W3C对DOM2的事件模型给出了一个规范:首先进入事件捕获阶段->达到元素后->进入事件冒泡阶段。
可以通过event.eventPhase查看事件触发阶段:
eventPhase (number): 这个属性的数字表示当前事件触发在什么阶段。
- 0: none
- 1: 捕获
- 2: 目标
- 3: 冒泡
1. DOM0
在元素处于目标时触发该事件。
2. DOM2
当addEventListener的最后参数为false时,是在冒泡阶段触发。如果是true的话是在捕获阶段出发。attachEvent始终是冒泡阶段触发。
允许捕获机制的事件流触发顺序:
事件流的触发顺序是首先从document元素开始,触发绑定在document上的捕获事件,依次向下,直到目标元素上。然后触发绑定在目标元素上的事件。最后依次向上,直到触发document元素上绑定的捕获事件。分别可以对于捕获阶段,处于目标阶段,冒泡阶段,捕获过程和冒泡过程并不包含目标元素阶段。
尝试下面的函数:
<ul> <li>11111111111111111111</li> </ul> <script> document.querySelector('li').addEventListener('click', function (e) { console.log('False currentTarget: ' + e.currentTarget.nodeName); console.log('False target: ' + e.target.nodeName); console.log(e.eventPhase); console.log(this); }, false); document.querySelector('li').addEventListener('click', function (e) { console.log('True currentTarget: ' + e.currentTarget.nodeName); console.log('True target: ' + e.target.nodeName); console.log(e.eventPhase); console.log(this); }, true); document.querySelector('ul').addEventListener('click', function (e) { console.log('ul false currentTarget: ' + e.currentTarget.nodeName); console.log('ul false target: ' + e.target.nodeName); console.log(e.eventPhase); console.log(this); }, false); document.querySelector('ul').addEventListener('click', function (e) { console.log('ul true currentTarget: ' + e.currentTarget.nodeName); console.log('ul true target: ' + e.target.nodeName); console.log(e.eventPhase); console.log(this); }, true); document.querySelector('li').onclick = function (e) { console.log('Onclick currentTarget: ' + e.currentTarget.nodeName); console.log('Onclick target: ' + e.target.nodeName); console.log(e.eventPhase); console.log(this); }; </script>
BeCareful: 可以看到,当点击li的时候,前两个绑定的事件是按照顺序来执行的,并没有先执行捕获事件然后执行冒泡事件,而是按照绑定顺序执行的。且event.eventPhase的值为2。
原因是:浏览器针对于事件的触发机制是,执行每个阶段会先设置在哪个阶段,然后在node的事件数组里执行相应阶段的事件。如果处于目标阶段是不区分捕获或者冒泡阶段的,直接按照注册顺序执行当前事件数组里的函数。event.eventPhase是在调用这些方法的时候设置的。而true和false是在注册的时候开发者传入的。
注释里面的那段话的意思就是,在目标阶段会触发捕获和冒泡事件的监听函数,因此,它会按照注册顺序执行,跟我们平时理解的顺序并不一样。
自定义事件
DOM3级还定义了自定义事件,自定义事件不是由DOM原生触发的,它的目的是让开发人员创建自己的事件。要创建的自定义事件可以由createEvent("CustomEvent");
返回的对象有一个initCustomEvent()方法接收如下四个参数。
1)type:字符串,触发的事件类型,自定义。例如 “keyDown”,“selectedChange”;
2)bubble(布尔值):标示事件是否应该冒泡;
3)cancelable(布尔值):标示事件是否可以取消;
4)detail(对象):任意值,保存在event对象的detail属性中;
可以像分配其他事件一样在DOM中分派创建的自定义事件对象。如:
var div = document.getElementById("myDiv"); EventUtil.addEventHandler(div,"myEvent", function () { alert("div myEvent!"); }); EventUtil.addEventHandler(document,"myEvent",function(){ alert("document myEvent!"); }); if(document.implementation.hasFeature("CustomEvents","3.0")){ var e = document.createEvent("CustomEvent"); e.initCustomEvent("myEvent",true,false,"hello world!"); div.dispatchEvent(e); }
事件对象及行为
1. 事件目标
event = event || window.event;
target = event.target || event.srcElement;
event.target 和event.currentTarget的区别:前者是触发事件的最终目标,后者是绑定事件时的目标。
借用事件代理的例子:
<div class="btn" onclick="console.log('onclick')">
<span>sss</span>
</div>
document.querySelector('.btn').addEventListener('click', function (e) { console.log('False currentTarget: ' + e.currentTarget.nodeName); console.log('False target: ' + e.target.nodeName); console.log(e.eventPhase); console.log(this); }, false);
2. 取消默认行为 & 阻止事件冒泡
DOM: event.preventDefault(); event.stopPropagation(); IE8以下: event.returnValue = false; event.cancelBubble = true;
return false方式:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.js"></script> </head> <body> <div onclick="alert('Outer clicked')"> Outer Div<br><br> <a id="inner" href="http://www.google.com" onclick="return false;">Google</a> <script> document.getElementById('inner').addEventListener('click', function(e){ alert(e.type); e.stopPropagation(); return false; }, false); document.getElementById('inner').onclick = function(e){ alert(e.type); e.stopPropagation(); return false; }; $('#inner').click(function (e) { return false; }); </script> </div> </body> </html>
在没有使用jquery的情况下,return false这种方式只有在DOM0的方式时可以相当于阻止默认行为的方法,DOM2级事件是不起任何效果的。
如果在jquery环境,return false相当于阻止默认行为和冒泡行为的方法,因为jquery本身的定义。
参考资料: