给元素添加事件，称为注册事件或者绑定事件。注册事件有两种方式：传统方式和方法监听注册方式
<button onclick="alert('hi~')"></button>//传统方式1
btn.onclick = function(){}//传统方式2eventTarget.addEventListener(type, listener[, useCapture])//将指定的监听器(函数)注册到目标对象(eventTarget)上，当该对象触发指定事件时，就会执行事件处理函数。该特性非标准，不要在生成环境中使用。该特性仅仅作为了解即可。只有ie浏览器可以识别，而且一定要ie9以前的浏览器。
eventTarget.attachEvent(eventNameWithOn, callback)//将指定的监听器(函数)注册到目标对象(eventTarget)上，当该对象触发指定的事件，指定的回调函数就会被执行。<body>
<button>传统注册事件</button>
<button>方法监听注册事件</button>
<button>ie9 attachEvent</button>
<script>
var btns = document.querySelectorAll('button');
//1. 传统方式注册事件
btns[0].onclick = function() {
alert('hi~');
}
btns[0].onclick = function() {
alert('hao a u~');
} //点击按钮后只会出现hao a u ~,前面的hi~被覆盖掉了，传统方法注册事件具有唯一性
//2. 事件监听注册事件
btns[1].addEventListener('click', function() {
alert('22');
})
btns[1].addEventListener('click', function() {
alert('33');
}) //点击按钮后会先后弹出对话框22和33，后面的函数不会覆盖前面的函数
//3. attachEvent ie9以前版本支持
btns[2].attachEvent('onclick', function() {
alert(11);
})
</script>
</body>
eventTarget.onclick = null;eventTarget.removeEventListener(type, listener[, useCapture]);eventTarget.detachEvent(eventNameWithOn, callback)<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
var divs = document.querySelectorAll('div');
//1. 传统方式解绑事件
divs[0].onclick = function() { //点击第一个div盒子弹出一次11，之后再点第一个div盒子就不会弹出任何内容了
alert(11);
divs[0].onclick = null;
}
//2. 方法监听解绑事件的方式
divs[1].addEventListener('click', fn) //考虑到接下来要移除，则不能采取匿名函数的方法,而且只要写一个函数名fn就可以了，不用加小括号fn()
function fn() {
alert(22);
divs[1].removeEventListener('click', fn);
}
//3. 专门针对于ie678的解绑方式
divs[2].attachEvent('onclick', fn1);
function fn1() {
alert(33);
divs[2].detachEvent('onclick', fn1);
}
</script>
</body>
有些事件是没有冒泡的，比如：onblur、onfocus、onmouseenter、onmouseleava
<body>
<div class="father">
<div class="son">son盒子</div>
</div>
<script>
//dom事件流三个阶段
//1. JS代码中只能执行捕获或者冒泡其中一个阶段。
//2. onclick和attachEvent(ie)只能得到冒泡阶段
//3. addEventListener【第三个参数是true】 捕获阶段：document->html->body->father->son 从上到下依次检测是否添加了点击事件，若添加了则依次执行，所有将先弹出father,再弹出son
var son = document.querySelector('.son');
son.addEventListener('click', function() {
alert('son');
}, true);
var father = document.querySelector('.father');
father.addEventListener('click', function() {
alert('father');
}, true);
</script>
</body><body>
<div class="father">
<div class="son">son盒子</div>
</div>
<script>
//dom事件流三个阶段
//1. JS代码中只能执行捕获或者冒泡其中一个阶段。
//2. onclick和attachEvent(ie)只能得到冒泡阶段
//4. addEventListener【第三个参数是false或省略】 冒泡阶段：document<-html<-body<-father<-son 从下到上依次检测是否添加了点击事件，若添加了则依次执行，所有将先弹出son,再弹出father
var son = document.querySelector('.son');
son.addEventListener('click', function() {
alert('son');
}, false);
var father = document.querySelector('.father');
father.addEventListener('click', function() {
alert('father');
}, false);
</script>
</body>原文：https://www.cnblogs.com/deer-cen/p/12240522.html