addEventListener 和 onclick 简单比较

首先说一下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')}
)

参考文章：

posted @ 2018-01-27 16:17  西风瘦码  阅读(874)  评论(0)  编辑  收藏  举报