要想Javascript对用户的操作做出响应,首先要对DOM元素绑定事件处理函数。所谓处理函数,就是处理用户操作的函数,不同的操作对应不同的名称。
-
事件绑定
在Javascript中,有三种常用的绑定事件的方法:
- 在DOM元素中直接绑定;
<div onclick="handleCLick()"></div>
- 在JavaScript代码中通过dom元素的属性绑定;
<div id="btn"></div> <script> var thisBtn = document.getElementById('btn') thisBtn.onclick = function() { console.log('this is div#btn click') } </script>
- 绑定事件监听函数
<div id="btn"></div> <script> var dom = document.getElementById("btn") function handleBtn(){ console.log('this is div#btn') } <!-- IE下使用attachEvent/detachEvent函数进行事件绑定和取消。不是W3C标准的做法,所以不推荐使用 --> /* 1.事件处理函数中this代表的是window对象,不是dom对象。 2.同一个事件处理函数只能绑定一次。 */ <!-- bind --> dom.attachEvent('onclick', handleBtn) <!-- unbind --> dom.detachEvent('onclick', handleBtn) <!-- 使用W3C标准的addEventListener和removeEventListener。不支持IE6/7/8 --> <!-- bind --> dom.addEventListener('click', handleBtn) <!-- unbind --> dom.removeEventListener('click', handleBtn) </script>
-
事件冒泡与捕获
事件冒泡和捕获是DOM中事件传播的两种方式,比如说对于注册了相同事件的两个DOM元素,当点击里层DOM元素时候,这两个事件谁先执行。
冒泡事件: 由里向外,最里层的元素先执行,然后冒泡到外层。
捕获事件: 由外向里,最外层的元素先执行,然后传递到内部。
在 IE 9 之前是只支持事件冒泡,IE 9(包括 IE 9) 之后和目前主流的浏览器都同时支持两种事件。只需修改 addEventListener的第三个参数,true 为捕获,false 为冒泡,默认为冒泡。
-
addEventListener
网景 和 微软 曾经的战争还是比较火热的,当时,网景主张捕获方式,微软主张冒泡方式。后来 w3c采用折中的方式,平息了战火,制定了统一的标准——先捕获再冒泡。
addEventListener有三个参数(第三个参数就是为冒泡和捕获准备的):
element.addEventListener(event, function, useCapture)
第一个参数是需要绑定的事件
第二个参数是触发事件后要执行的函数
第三个参数默认值是false,表示在事件冒泡阶段调用事件处理函数;如果参数为true,则表示在事件捕获阶段调用处理函数。
-
进一步了解冒泡和捕获
浏览器处理时间分为两个阶段,捕获阶段和冒泡阶段:
先执行捕获阶段,如果事件是在捕获阶段执行的(true 情况),则执行;
然后是冒泡阶段,如果事件是在冒泡阶段执行的(false 情况),则执行;
<div id="out"> <div id="inner"> <div id="center">center</div> </div> </div> <script> var center = document.getElementById('center'); var inner = document.getElementById('inner'); var out = document.getElementById('out'); // center center.addEventListener('click', function () { console.log('center true') }, true) center.addEventListener('click', function () { console.log('center false') }, false) // inner inner.addEventListener('click', function (event) { // event.stopPropagation() console.log('inner true') }, true) inner.addEventListener('click', function () { console.log('inner false') }, false) // out out.addEventListener('click', function () { console.log('out true') }, true) out.addEventListener('click', function () { console.log('out false') }, false) </script>
点击中心center,则输出
// out true // inner true // center true // center false // inner false // out false
此时,根据浏览器事件机制先捕获后冒泡。发生center的捕获顺序是
document
->html
->body
->out
->inner
->center
就捕获到了center,然后冒泡,冒泡顺序反之。在假设点击inner,则输出
// out true // inner true // inner false // out false
假设上面代码中的
event.stopPropagation()
生效执行,点击center时,事件在inner上捕获时停止了事件传播,但是不能阻止该节点上的捕获事件被调用,则输出的是// out true // inner true
event.stopPropagation() 该方法将停止事件的传播,阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意,虽然该方法不能阻止同一Document节点上的其他事件句柄被调用,但是它可以阻止把事件分派到其他节点。
总结:
- 对于非target节点则先执行捕获在执行冒泡;
- 对于target节点,捕获与冒泡事件的执行顺序取决于注册顺序;
- 使用event.stopPropagation()将停止事件的传播。