1

事件代理(事件委托)

Image text

简述

事件代理就是在我们为一批元素添加事件的时候,可以将事件委托给父元素来触发事件。

优点

  • 节省内存
  • 可以对所有父元素下的子元素添加事件(包括原有的和后来添加的)

实例

<body>
    <ul id="oul">
        <li>我是第一个li</li>
        <li>我是第二个li</li>
        <li>我是第三个li</li>
        <li>我是第四个li</li>
        <li>我是第五个li</li>
    </ul>

    <input type="button" value="添加" id="btn">
</body>
当我们想为 li标签 添加一个鼠标划上某一个 li 时改变背景颜色这一事件的时候,我们有许多种方法,我们可以利用css的hover可以实现:
    li{
        background:yellow;
        border-bottom:3px solid blue;
    }
    li:hover{
        background:red;
    }
但是此方法在 ie6 并不适用,由于我们需要兼容所有浏览器,所以我们将其弃用,然后我们可以采用 js 方法进行实现:
我们利用 js 为 li标签添加事件


    var lis = document.getElementsByTagName("li");

    for(var i=0,l=lis.length;i<l;i++){
        lis[i].onmouseover = function () {     
            this.className = "oli";
        }
        lis[i].onmouseout = function () {     
            this.className = "";
        }
    }


我们可以这样将事件直接添加到 li标签 上,但是这样需要执行12次事件,对内存损耗较大。并且这样添加事件后,还有另外一种缺点,比如你需要在已有的 li标签 后添加新的 li标签 ;这样新添加的 li标签 并不能执行前面的事件。代码如下:

    var btn = document.getElementById("btn");
    var oul = document.getElementById("oul");
    btn.onclick = function (){
        var newli = document.createElement("li");
        newli.innerHTML="新添加li";
        oul.appendChild(newli);
    }

所以我们需要利用到事件代理

    oul.onmouseover = function (e) {
        var oEvent = e||window.event;
        var nodeli = oEvent.target||oEvent.srcElement;
        nodeli.className = "oli"
    }
    oul.onmouseout = function (e) {
        var oEvent = e||window.event;
        var nodeli = oEvent.target||oEvent.srcElement;
        nodeli.className = ""
    }
    
    因为我们需要兼容ie,所以我们需要这种兼容的写法
    var oEvent = e||window.event;
    var nodeli = oEvent.target||oEvent.srcElement; 

这样我们就解决了上面的问题。
你懂了吗?

Image text


Smallmotor
478 声望33 粉丝

心若向阳