委托事件

最新推荐文章于 2024-12-20 10:09:11 发布

github_turboemily

最新推荐文章于 2024-12-20 10:09:11 发布

阅读量287

点赞数

CC 4.0 BY-SA版权

分类专栏：兼容文章标签：委托事件冒泡原理

本文链接：https://blog.youkuaiyun.com/github_35549695/article/details/52596611

兼容专栏收录该内容

7 篇文章

订阅专栏

根据冒泡的原理，可以衍生出委托事件

我门都知道ie浏览器只有冒泡，非ie浏览器有捕获也有冒泡，通常情况下我们写的绑定事件是按照ie浏览器只有冒泡的准则来规范的，在非ie中的addEventListener中的第三个参数设置为false即可；

下面我们讲讲什么是委托事件，本来由自身做的事情现在交给父元素去做，这样的事件就叫做委托事件。

比方说在一个ul的列表中有很多个li标签，我们给li标签绑定事件使我们每次点击li标签的时候使他执行某个事件，比方说改变li标签内的文字颜色，像这样每次点击一个li标签，就会绑定一个事件，有几个li标签就有几个绑定事件。很繁琐，而且效率不高。

现在我们利用事件冒泡，只在ul标签上绑定一个事件，每次点击li标签就冒泡到父元素ul上。通过event.targe（触发该事件的节点）可以确定是由哪个li触发的,这样的好处就是只需要绑定一次事件，却能实现同样的效果，提高了运行效率。

这里有个兼容性问题，在非IE下使用event.target

在IE下使用event.srcElement

好了什么也不说了直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
            list-style: none;
        }
        li{
            width:30px;
            height:30px;
            float:left;
            margin-left:10px;
            background-color: darksalmon;
        }
        #ul1{
            display: none;
        }
    </style>
    <script>
        window.onload = function(){

            var Ul = document.getElementsByTagName('ul')[0];

            if (window.attachEvent)
                Ul.attachEvent('onclick',function(){
                    alert(event.srcElement.innerText);
                    event.srcElement.style.color='white';
                });
                //IE浏览器

            else
            {
                Ul.addEventListener('click', function(){
                    alert(event.target.innerText);
                    event.target.style.color='white';
                }, false);  //非IE浏览器
            }


        }

    </script>
</head>
<body>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

</body>
</html>