js事件委托原理:把事件委托到父元素上,利用冒泡原理,当子元素点击时,由于冒泡原理,事件会冒泡到父元素上,父元素上面的事件就会触发执行。
1.子元素事件的效果相同
<ul id="ul"> <li>11111111</li> <li>22222222</li> <li>33333333</li> <li>44444444</li> </ul> <script type="text/javascript"> window.onload = function(){ var oUl = document.getElementById('ul'); oUl.onclick = function(e){ var e = e || window.event; var target = e.target || e.srcElement; if(target.nodeName.toLowerCase() == 'li') { alert(target.innerHTML); } } } </script>2.子元素事件的效果不同
<div id="box"> <input type="button" id="add" value="添加"> <input type="button" id="remove" value="删除"> <input type="button" id="change" value="修改"> <input type="button" id="check" value="查验"> </div> <script type="text/javascript"> var oBox = document.getElementById('box'); oBox.onclick =function (e) { var e = e || window.event; var target = e.target || e.srcElement; if(target.nodeName.toLowerCase() == 'input'){ switch(target.id){ case 'add': alert('添加'); break; case 'remove': alert('删除'); break; case 'change': alert('修改'); break; case 'check': alert('查验'); break; } } } } </script>3.以上说的是现有DOM节点下的操作,那么新增的节点会有事件么?
<input type="button" name="" id="btn" value="添加"> <ul id="ul"> <li>11111111</li> <li>22222222</li> <li>33333333</li> <li>44444444</li> </ul> <script type="text/javascript"> window.onload = function(){ var oBtn = document.getElementById('btn'); var oUl = document.getElementById('ul'); var oLi = oUl.getElementsByTagName('li'); var num =4; //事件委托,添加的子元素也有事件 oUl.onmouseover = function(e){ var e = e || window.event; var target = e.target || e.srcElement; if(target.nodeName.toLowerCase() == 'li'){ target.style.background = 'red'; } }; oUl.onmouseout = function(e){ var e = e || window.event; var target = e.target || e.srcElement; if(target.nodeName.toLowerCase() == 'li'){ target.style.background = "#fff"; } }; //添加新节点 oBtn.onclick = function () { num ++; var oLi = document.createElement('li'); oLi.innerHTML = 111*num; oUl.appendChild(oLi); } }
参考:https://www.cnblogs.com/liugang-vip/p/5616484.html