js事件委托

来源：互联网发布：淘宝客没权重吗编辑：程序博客网时间：2024/05/22 09:38

事件委托的原理：就是利用事件冒泡，把事件添加到父级上，在触发执行效果。
事件委托有两个好处：
1、可以大大的提高页面性能。
2、动态添加的元素，还会有之前的事件。

demo:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>事件委托</title>    <script type="text/javascript">    window.onload = function() {        var oUl = document.getElementById('ul1');        var aLi = oUl.getElementsByTagName('li');        var oInput = document.getElementById('input1');        var iNow = 4;        oUl.onmouseover = function(ev) {            var ev = ev || window.event;            var target = ev.target || ev.srcElement;            //在鼠标滑过的事件，要做下判断，当滑过的是li的时候，才修改背景颜色，滑过的是ul的时候，不执行(使用nodeName进行标签名的判断)            if (target.nodeName.toLowerCase() == 'li') {                target.style.background = 'red';            }        }        oUl.onmouseout = function(ev) {            var ev = ev || window.event;            var target = ev.target || ev.srcElement;            if (target.nodeName.toLowerCase() == 'li') {                target.style.background = '';            }        }        oInput.onclick = function () {            iNow++;            var  oLi = document.createElement('li');            oLi.innerHTML = 111*iNow;            oUl.appendChild(oLi);        }    }    </script></head><body>    <input type="button" value="添加" id="input1" />    <ul id="ul1">        <li>111</li>        <li>222</li>        <li>333</li>        <li>444</li>    </ul></body></html>

注意：在这里面会涉及到事件源，在event对象下，事件源就是不管在哪个事件中，只要你操作的那个元素就是事件源。
以下是事件源的兼容写法：
IE：window.event.srcElement 标准下：event.target。

0 1