事件冒泡和事件捕获
1 .wrapper { 2 300px; 3 height: 300px; 4 background-color: darkturquoise; 5 } 6 7 .content { 8 200px; 9 height: 200px; 10 background-color: yellow; 11 } 12 13 .box { 14 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 | 可选。布尔值,指定事件是否在捕获或冒泡阶段执行。 可能值:
|
事件委托
- 普通方法
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 }
打印一下event对象的target属性
可知e.target为当前触发事件的dom元素
谷歌浏览器默认是事件冒泡
所以点击div下的button按钮,会冒泡到div上,触发div的click事件
对标签名进行判断
并判断其id值
执行各自的操作