[JavaScript]onclick、addEventListener、attachEvent详解

版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/csdn_yudong/article/details/70156293

onclick

onclick 最初的样子:

<input type="button" value="按钮" onclick="alert('sssss');">

但是我们一般不会把 JavaScript 代码写在 HTML 里面,所以我们会把 JavaScript 代码拿出来:

var input = document.getElementsByTagName('input')[0];
input.onclick = function() {
  alert("sssss");
}

以上程序中,click 表示一个事件类型,单击。onclick 表示一个事件处理函数或绑定对象的属性(或者叫事件监听器、侦听器)。input 表示一个绑定的对象,用于触发某个元素区域。function() 匿名函数是被执行的函数,用于触发后执行。

本质的区别是 element.onclick 相当于在标签上写 onclick 。

onclick 只是 JavaScript 中众多事件处理函数中的一种,其他的事件处理函数还有:onabort、onblur、onchange、ondblclick、ondragdrop、onError、onfocus、onkeydown、onkeypress、onkeyup、onload、onunload、onmouseout、onmouseover、onmove、onreset、onresize、onselect、onsubmit。

这些事件处理函数并不在本文讨论范围之类,所有的事件处理函数都会有两个部分组成,on + 事件名称。

上面这些传统的事件处理函数使用起来的问题有:

1、当有两个相同的事件处理函数的时候,后面一个会把前面一个完全覆盖掉。
例:

box.onclick = function() {
  alert('s1');
}
box.onclick = function() {
  alert('s2');
}
// 弹出 s2


“DOM2级事件”定义了两个方法,用于添加事件和删除事件处理程序的操作:
addEventListener() 和 removeEventListener()。所有 DOM 节点中都包含这两个方法,并且它们都接收 3 个参数:事件名、函数、冒泡或捕获的布尔值(true 表示捕获,false 表示冒泡)。

addEventListener

例:

window.addEventListener("load", function(){
  var box = document.getElementById("box1");
  box.addEventListener("click", function(){
    alert("s1");
  }, false);
  box.addEventListener("click", function(){
    alert("s2");
  }, false);
}, false);
// 先弹出s1 ,然后弹出 s2   

可以看出 addEventListener() 可以解决一个对象允许同时绑定多个相同事件的问题。而且,可以设置冒泡和捕获,true 表示捕获,false 表示冒泡。而且可以屏蔽重复的函数,例:

window.addEventListener('load', init, false);   
window.addEventListener('load', init, false);   
function init() {
  alert('ss');
}

上面的这段代码只会弹出一次 ss。

使用 addEventListener 添加的事件,需要使用 removeEventListener 方法来移除。
不用的事件要记得移除。
递归调用的方法也要记得移除,以免太多递归导致浏览器卡死。

例:

window.addEventListener('load', function () {
  var box = document.getElementById('box');
  box.addEventListener('click', function () {  //不会被误删
    alert('Lee');
}, false);
  box.addEventListener('click', toBlue, false); 
  //引入切换也不会太多递归卡死
}, false);

function toRed() {
  this.className = 'red';
  this.removeEventListener('click', toRed, false);
  this.addEventListener('click', toBlue, false);
}

function toBlue() {
  this.className = 'blue';
  this.removeEventListener('click', toBlue, false);
  this.addEventListener('click', toRed, false);
}


IE 实现了与 DOM2级 中类似的两个方法: attachEvent() 和 detachEvent()。这两个方法接受相同的参数:事件名称和函数。

attachEvent

attachEvent() 的使用和 W3C 规范的 addEventListener() 使用较为相似,detachEvent() 可以解除使用 attachEvent() 绑定的事件处理函数。

例:

window.attachEvent("onload", function(){
  var box = document.getElementById("box");
  box.attachEvent("onclick", function(){
    alert("s1");
  });
});

需要说明的是:
1、IE 不支持捕获,只支持冒泡,所以 attachEvent() 函数并没有像 addEventListener() 函数那样可以设置冒泡或者捕获。
2、attachEvent() 添加事件不能屏蔽重复的函数。
3、IE 中的 this 指向的是 window 而不是 DOM 对象。
这个是什么意思呢?解释一下:

window.attachEvent("onload", function(){
  var box = document.getElementById("box");
  box.attachEvent("onclick", function(){
    alert(this);
  });
});

我们为 box 绑定了一个 onclick 事件,在这个事件处理函数中,弹出的这个 this 是一个 window 的 object 对象,而不是 box 对象。

4、在传统事件上,IE 是无法接受到 event 对象的,但使用了 attachEvent() 却可以。
这个是什么意思呢?解释一下:
在IE 8中:

var box = document.getElementById("box");
box.onclick = function(e){
  alert(e);
}

弹出 undefined,表明没有 e 这个对象,那么在 IE 中如何正确获取事件对象 event 呢?
答案是使用 window.event

var box = document.getElementById("box");
box.onclick = function(){
  alert(window.event);
}

如果通过attachEvent()添加事件处理程序时,event对象作为参数被传入事件处理程序,例:

window.attachEvent("onload", function(){
  var box = document.getElementById("box");
  box.attachEvent("onclick", function(e){
    alert(e);
  });
});

可以正确弹出 event 对象,表明:attachEvent() 可以带入 event 对象。

那么,关于第 3 点中提到的 attachEvent() 函数中的 this 指向的是 window 对象而不是 DOM 对象,该如何处理呢?
我们可以使用 call() 。
例:

window.attachEvent('onload', function () {
  var box = document.getElementById('box');
  box.attachEvent('onclick', function () {
    toBlue.call(box);
  });
});
function toBlue() {
  this.className = "blue";
}

上面就是关于 onclick 、addEventListener、attachEvent 的相关介绍。

TIP

需要说明的是:
1、
用 addEventListener() 和 attachEvent() 是通过 DOM 接口去绑定事件。
一个 html 文档的解析是有顺序的,先解析标签项,再解析 DOM 项,element.onlick 事实上相当于写在标签页上,通过标签的 onclick 属性输入到文档,然后由文档解析成事件的。而后者,要在文档解析完成以后,通过文档的 dom 接口去绑定的事件,虽然结果是一样的,都是 click 事件,但是过程是不同的。

2、
通过这三种方式绑定的事件,怎么取消呢?
element.onclick

element.onclick = null;

这样就可以取消绑定在 element 上的事件处理程序了。

通过 addEventListener() 添加的事件处理程序只能通过 removeEventListener() 来移除,并且移除时传入的参数与添加处理程序时使用的参数相同。通过 addEventListener() 添加的匿名函数将无法移除。

通过 attachEvent() 添加的事件处理程序要通过 detachEvent() 来移除,其他的情况和 addEventListener()一样。

3、
不管是 IE 还是非 IE ,通过 HTML 标签属性指定的事件处理程序时,变量 event 中保存着 event 对象。

<input type="button" value="Click me" onclick="alert(event.type)">
//"click"

4、
IE9 已经全面支持 W3C 中的事件绑定函数:addEventListener()、removeEventListener()。

所以,我们应该尽量避免去使用 attachEvent() 和 detachEvent()。
原因:
1、IE 的事件绑定函数无法传递 this;
2、IE 的事件绑定函数不支持捕获;
3、同一个函数注册绑定后,没有屏蔽掉;
4、有内存泄漏的问题。



写在最后:约定优于配置——-软件开发的简约原则.


——————————–(完)————————————–


我的
个人网站:https://neveryu.github.io/guestbook/
Github: https://github.com/Neveryu


有问题可以私信我的微博或者给我发邮件….



没有更多推荐了,返回首页