首页 > 代码库 > onclick与addEventListener的区别

onclick与addEventListener的区别

2024-07-28 04:44:28   221人阅读

onclick与addEventListener实际上可分为：Inline events与Event Listeners
 
 
Event Listeners (addEventListener and IE‘s attachEvent)
 
相同点：都是时间监听器。
不同点如下：
1.使用浏览器的差别
addEventListener：
很多浏览器支持addEventListener(IE9及以上也支持)，使用方式如下：
var target = document.getElementById("test");
target.addEventListener(‘click‘,test,false);
function test(){
        alert("test");
}
 
attachEvent：
IE中提供了类似addEventListener的事件监听器：attachEvent。在IE众多版本都支持，本人已测试过IE6-10。
使用方式如下：
var target = document.getElementById("test");
target.attachEvent(‘onclick‘,test);
function test(){
     alert("test");
}
 
2.参数差别
addEventListener和attachEvent除了使用浏览器的差别，还有参数的差别。addEventListener中有第3个参数，attachEvent没有。第3个参数传递的是false或true。这个参数可选，默认是false。
false--表示事件处理将在冒泡阶段执行。
true--表示事件处理将在捕获阶段执行。
 
 
理论上，Event Listeners (addEventListener and IE‘s attachEvent)可以无限增加事件监听给某个一元素。实际应用的约束就是客户端内存的限制，这一点因每个浏览器而异。
 
 
Inline events (HTML onclick="" property and element.onclick)
使用方式：
1.
<a id="testing" href="http://www.mamicode.com/#" onclick="alert(‘did stuff inline‘);">点我</a>
 
2.
<a id="test" href="http://www.mamicode.com/#">点我</a>
 
var element = document.getElementById(‘test‘);
element.onclick = function () { alert(‘did stuff #1‘); };
 
 
Inline events与Event Listeners的区别：Event Listeners可以添加无数个(理论上)事件，Inline events只能添加1个事件，且下面的会覆盖上面的。例如：
 
<a id="test" href="http://www.mamicode.com/#">点我</a>
var element = document.getElementById(‘test‘);
element.onclick = function () { alert(‘did stuff #1‘); };
element.onclick = function () { alert(‘did stuff #2‘); };
结果是：did stuff #2
 
总结起来，建议使用下面形式：
function addEvent(element, evnt, funct){
        if (element.attachEvent)
            return element.attachEvent(‘on‘+evnt, funct);
        else
            return element.addEventListener(evnt, funct, false);
    }

    addEvent(
            document.getElementById(‘myElement‘),
            ‘click‘,
            function () { alert(‘hi!‘); }
    );
 
 

onclick与addEventListener的区别


联系
我们