首页 > 其他 > 详细

addEventListener和onclick的区别

时间:2019-09-09 00:57:51      阅读:60      评论:0      收藏:0      [点我收藏+]

技术分享图片

onclick只出现一次alert:我是click2【很正常第一次click事件会被第二次所覆盖】,但是addEventListener却可以先后运行,不会被覆盖【正如:它允许给一个事件注册多个监听器。在使用DHTML库或者 Mozilla extensions 这样需要保证能够和其他的库或者差距并存的时候非常有用。】

<ul id="color-list">
    <li id="addEvent">red</li>
    <li id="on_click">yellow</li>
</ul>
    <script type="text/javascript">
        (function(){
            var addEvent = document.getElementById("addEvent");
                    addEvent.addEventListener("click",function(){
                        alert("我是addEvent1");
                    },false);
                    addEvent.addEventListener("click",function(){
                        alert("我是addEvent2");
                    },false);

            var addEvent = document.getElementById("on_click"); 

            on_click.onclick = function() {
                alert("我是click1");
            }
            on_click.onclick = function() {
                alert("我是click2");
            }
        })();
    </script>

 

在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即:

元素的点击事件先触发,然后会触发

元素的点击事件。
  在 捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即:

  元素的点击事件先触发 ,然后再触发元素的点击事件。

    addEventListener() 方法可以指定 “useCapture” 参数来设置传递类型:

    addEventListener(event, function, useCapture);

    默认值为 false,冒泡传递,当值为 true 时, 事件使用捕获传递

addEventListener和onclick的区别

原文:https://www.cnblogs.com/SallyShan/p/11489057.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!