JavaScript与HTML之间是通过事件交互的。
事件流：描述的是从页面中接收事件的顺从。事件流分为两种，一个是事件冒泡，一个是事件捕获。
事件冒泡：有最具体的元素接收，逐级向上传播到较为不具体的节点（文档）；（div->body->html->document）
事件捕获：由不太具体的节点最早接收到事件，逐级向下传播到最具体的节点；（document->html->body->div）
DOM事件流：DOM2级事件，规定事件流包括3个阶段，事件捕获阶段、处于目标阶段、事件冒泡阶段。事件捕获阶段不会接收到事件，处于目标事件阶段时，元素刚好接收到事件，
事件冒泡事件，就可以对事件作出响应了。只有支持DOM2级事件流的浏览器才有DOM事件流。
事件处理程序：响应某个事件的函数，叫作事件处理程序。如click事件的事件处理程序是onclick。
添加HTML事件处理程序
1、直接写行内js代码（不推荐）
<input type="text" value="click" onclick="alert(‘clicked‘)"> //用单引号哦，双引号有可能编译出错
2、引入一个函数
<input type="text" value="click" onclick="funName()"> function funName(){ console.log("cliced"); }
第二种指定事件处理程序具有一些读到之处。首先这样会创建一个封装这元素属性值的函数，这个函数中有一个局部变量event，也就是事件对象。（event不用定义就有，一般显示的定义一下）
在这个函数里面，this值等于事件的目标元素。
var light=document.getElementsByClassName("light")[0];
light.onclick=function(event){
console.log(this);//事件的目标元素
console.log(event);//事件对象
console.log(this.className)//light
}
DOM0级事件处理程序：javascript指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。
上面代码就是典型的DOM0级事件处理程序。
删除通过DOM0级指定的事件处理程序：
light.onclick=null;
DOM2级事件处理程序：
添加：addEventListener(“事件名，函数，布尔值)；（事件名：clik，而不是onclick）；
删除：removeEventListener("事件名”，函数名，布尔值)；（同过匿名函数添加的DOM2级事件是无法删除的）；
DOM2级事件，可以给一个元素添加多次同中事件，而不会覆盖，而且还可以控制事件流是冒泡（false），还是捕获（true）;不加布尔值参数，默认为false（冒泡）；
IE事件处理程序：
添加：attachEvent("事件处理程序名称"，事件处理程序函数)；（事件处理程序名称是onclick而不是click）
删除：detachEvent(“事件处理程序名称”，事件处理程序函数名)；（同样无法删除通过匿名函数添加的事件处理程序）；
IE事件处理程序也可以添加多个同样的事件处理程序且不会覆盖，但执行顺序是从下到上，也就是后加的先执行，还有函数中的this指向window而不是当前元素。
跨浏览器事件处理程序：
恰当的使用能力检测就可以写出来一个跨浏览器事件处理程序如：
var EventUtil={
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,handler);
}else{
element["on"+type]=handler;
}
},
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,handler);
}else{
element["on"+type]=null;
}
}
}
//使用
var ele=document.getElementsByClassName("light")[0];
var handler=function(){
console.log("handler");
}
EventUtil.addHandler(ele,"click",handler);//添加
EventUtil.removeHandler(ele,"click",handler);//删除
原文：https://www.cnblogs.com/fqh123/p/10423510.html