注册事件监听器

转： https://www.cnblogs.com/luozhihao/p/5934935.html

这里有三种方法来为一个DOM元素注册回调事件

addEventListener

myButton.addEventListener('click',function(){alert('Hello world');},false);

var x = document.getElementById("myBtn");

if (x.addEventListener) {                    //所有主流浏览器，除了 IE 8 及更早 IE版本

    x.addEventListener("click", myFunction);

} else if (x.attachEvent) {                  // IE 8 及更早 IE 版本

    x.attachEvent("onclick", myFunction);

}

onclick

myButton.onclick=function(event){alert('Hello world');};

这种方式的问题是每个事件及每个元素只能被设置一个回调。

DOM3级事件

DOM3级事件在DOM2级事件的基础上添加了更多的事件类型，全部类型如下：

UI事件，当用户与页面上的元素交互时触发，如：load、scroll

焦点事件，当元素获得或失去焦点时触发，如：blur、focus

鼠标事件，当用户通过鼠标在页面执行操作时触发如：dbclick、mouseup

滚轮事件，当使用鼠标滚轮或类似设备时触发，如：mousewheel

文本事件，当在文档中输入文本时触发，如：textInput

键盘事件，当用户通过键盘在页面上执行操作时触发，如：keydown、keypress

合成事件，当为IME（输入法编辑器）输入字符时触发，如：compositionstart

变动事件，当底层DOM结构发生变化时触发，如：DOMsubtreeModified

同时DOM3级事件也允许使用者自定义一些事件。

addEventListener的第三个参数为指定事件是否在捕获阶段执行，设置为true表示事件在捕获阶段执行，而设置为false表示事件在冒泡阶段执行。那么什么是事件冒泡和事件捕获呢？

事件冒泡 （e.stopPropagation();//阻止事件冒泡）

所谓事件冒泡就是事件像泡泡一样从最开始生成的地方一层一层往上冒，比如a标签为事件目标，点击a标签后同时也会触发p、li上的点击事件，一层一层向上直至最外层的html或document。下面是代码示例：

<div id='box'><a id='child'></a></div>

child.addEventListener('click', function(){

alert('我是目标事件');

}, false);

box.addEventListener('click', function(){

alert('事件冒泡至DIV');

}, false);

上面的代码运行后我们点击a标签，首先会弹出’我是目标事件’提示，然后又会弹出’事件冒泡至DIV’的提示，这便说明了事件自内而外向上冒泡了。

child.addEventListener('click', function(e){

    alert('我是目标事件');

    e.stopPropagation();

}, false);

事件捕获

和事件冒泡相反，事件捕获是自上而下执行，我们只需要将addEventListener的第三个参数改为true就行

此时我们点击a标签，首先弹出的是’事件冒泡至DIV’，其次弹出的是’我是目标事件’，正好与事件冒泡相反。