addEventListener 和 onclick 简单比较

javascript/jquery

浏览数:980

2019-5-15

首先说一下addEventListener
  • 语法:

    element.addEventListener(event, function, useCapture)
  • 这里的event是事件名,function是相应的事件,这个useCapture是一个布尔值,默认是false,就是说在冒泡阶段执行,如果为true,就在捕获阶段执行
  • 利用addEventListener可以简单复现网页中对一个对一个元素操作之后从window–>document–>html–>body–>…–>目标元素的捕获,然后反过来冒泡的过程
  • addEventListener 是DOM2版本中加入的

    绑定事件有几种方式
  • Event Listeners (包含addEventListener和IE的attachEvent)
    • IE 8 以及更低版本的 IE 中,需要用 attachEvent 方法:
    element.attachEvent('onclick', function() { /* do stuff here*/ });
    • 对于 IE 9 和更高版本的 IE,以及其它浏览器,则要用 addEventListener 方法:
    element.addEventListener('click', function() { /* do stuff here*/ }, false);

    用上面这种方法(DOM level 2 events),理论上可以为一个元素绑定无数个事件,实际应用中则决定于客户端的电脑内存以及浏览器。

  • Inline Events
    • HTML 的 onclick=”” 属性,以及 element.onclick
    • 在所有支持 JavaScript 的浏览器中,可以用下面的方式来添加内联的事件监听器。
    <a id="testing" href="#" onclick="alert('did stuff inline');">Click me</a>
    • 还有另一种方法
    element.onclick = function () { /*do stuff here */ };
    两种方案的区别:

    要回答这个问题,就要考虑各个浏览器的兼容性,以及实际需求了。即使现在只需要为一个元素绑定一个事件,但是以后很可能还要同时再绑定别的事件,这个时候,就需要用 attachEvent 和 addEventListener 了,否则用内联方法就可以搞定了。

jQuery 以及其它的 JavaScript 框架,已经将各个浏览器的 DOM level 2 events 的实现以通用模型的形式封装起来了,所以通过 jQuery 可以很方便地写出适用于所有浏览器的代码:

$(element).on('click', function () { /* do stuff */ });

他们之间最大的区别就是addEventListener可以为一个元素绑定多个事件,即它允许给一个事件注册多个监听器,而onclik只能给元素注册一个,如果存在多个,则后面的事件会覆盖前面的

<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>

在这个例子中,red点击之后会分别弹出我是addEvent1和我是addEvent2,而yellow点击之后只会弹出我是click2。

一个适用于所有浏览器的事件监听器函数
function addEventFn (ele, event, func) {
    if(ele.attachEvent) {  //IE8及更低版本的浏览器
        return ele.attachEvent('on'+event, func);
    }
    else {  //IE8及以上浏览器,默认冒泡阶段
        return ele.addEventListener(event, func, false);  
    }
}
// 调用示例
addEventFn(
    document.getElementById("addEvent"),
    'click',
    function () {alert('red')}
)

参考文章:

作者:西风瘦码