JS事件冒泡、事件捕获和事件委托

事件冒泡和事件捕获

 1     .wrapper {
 2       width: 300px;
 3       height: 300px;
 4       background-color: darkturquoise;
 5     }
 6 
 7     .content {
 8       width: 200px;
 9       height: 200px;
10       background-color: yellow;
11     }
12 
13     .box {
14       width: 100px;
15       height: 100px;
16       background-color: red;
17     }

1   <div class="wrapper">
2     <div class="content">
3       <div class="box">
4       </div>
5     </div>
6   </div>

事件冒泡

 1   var wrapper = document.getElementsByTagName('div')[0];
 2   var content = document.getElementsByTagName('div')[1];
 3   var box = document.getElementsByTagName('div')[2];
 4 
 5   wrapper.addEventListener('click', function () {
 6     console.log('wrapper')
 7   }, false);
 8 
 9   content.addEventListener('click', function () {
10     console.log('content')
11   }, false);
12 
13   box.addEventListener('click', function () {
14     console.log('box')
15   }, false);

如上图所示

事件冒泡：结构上从内到外

事件捕获

如上图所示

事件捕获：结构上从外到内

使用addEventListener()方法指定事件是否在捕获或冒泡阶段执行

语法

element.addEventListener(event, function, useCapture)

useCapture

可选。布尔值，指定事件是否在捕获或冒泡阶段执行。

可能值:

true - 事件句柄在捕获阶段执行
false- false- 默认。事件句柄在冒泡阶段执行

事件委托

普通方法

1   <div id="box">
2     <input type="button" id="add" value="添加" />
3     <input type="button" id="remove" value="删除" />
4     <input type="button" id="move" value="移动" />
5     <input type="button" id="select" value="选择" />
6   </div>

 1   var Add = document.getElementById("add");
 2   var Remove = document.getElementById("remove");
 3   var Move = document.getElementById("move");
 4   var Select = document.getElementById("select");
 5 
 6   Add.onclick = function () {
 7     console.log('添加')
 8   };
 9   Remove.onclick = function () {
10     console.log('删除')
11   };
12   Move.onclick = function () {
13     console.log('移动')
14   };
15   Select.onclick = function () {
16     console.log('选择')
17   }

事件委托方法

 1   var oBox = document.getElementById("box");
 2   oBox.onclick = function (e) {
 3     var e = e || window.event;
 4     var target = e.target || e.srcElement;
 5     if (target.nodeName.toLocaleLowerCase() == 'input') {
 6       switch (target.id) {
 7         case 'add':
 8           console.log('添加')
 9           console.log(e)
10           break;
11         case 'remove':
12           console.log('删除')
13           break;
14         case 'move':
15           console.log('移动')
16           break;
17         case 'select':
18           console.log('选择')
19           break;
20       }
21     }
22   }