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 表示冒泡）。
例：
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() 的使用和 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 的相关介绍。
需要说明的是： 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
有问题可以私信我的微博或者给我发邮件….
