addEventListener和onclick的区别

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的区别

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

addEventListener(event, function, useCapture);

最新文章

热门文章