addEventListener 和 onclick 简单比较

最新推荐文章于 2024-04-05 19:25:27 发布

weixin_33720956

最新推荐文章于 2024-04-05 19:25:27 发布

阅读量284

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wancheng7/p/8366371.html

版权

首先说一下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 的 οnclick="" 属性，以及 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')}
)

参考文章：

转载于:https://www.cnblogs.com/wancheng7/p/8366371.html