简简单单学习js事件代理

最新推荐文章于 2024-10-15 08:00:00 发布

weixin_33726318

最新推荐文章于 2024-10-15 08:00:00 发布

阅读量60

点赞数

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000010688797

事件代理（事件委托）

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

简简单单学习js事件代理

事件代理（事件委托）

简述

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

优点

实例

当我们想为 li标签 添加一个鼠标划上某一个 li 时改变背景颜色这一事件的时候，我们有许多种方法，我们可以利用css的hover可以实现：

但是此方法在 ie6 并不适用，由于我们需要兼容所有浏览器，所以我们将其弃用，然后我们可以采用 js 方法进行实现：

当我们想为 li标签添加一个鼠标划上某一个 li 时改变背景颜色这一事件的时候，我们有许多种方法，我们可以利用css的hover可以实现：