addEventListener
addEventListener方法设定一个事件监听器，当某一事件发生通过设定的参数执行操作。
addEventListener(event, function, useCapture)
- event表示监听的事件，例如click, touchstart等
- function表示事件触发后调用的函数
- useCapture选填，true表示事件是捕获，默认false表示冒泡
使用 removeEventListener(event, function) 移除事件监听，参数与addEventListener一致
冒泡与捕获
useCapture参数设置的是元素事件的触发顺序，即页面中外部元素设置了事件监听，其内部元素也设置了事件监听。冒泡是先触发最内部元素的事件，再依次触发外一层元素的事件；捕获则相反，由外到内依次触发。
阻止冒泡与捕获
使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播。
较早版本的IE使用event.cancelBubble = true。
取消默认事件
连接的默认动作是跳转到指定页面，提交按钮的默认事件是提交表单。我们可以添加onclick触发 一个取消默认事件的function，这样的话跳转到页面/提交表单这样的默认事件就被取消了。
使用event.preventDefault()，较早版本的IE使用 event.returnValue = false
on事件
对一些页面的事件（例如点击onclick，鼠标移动 onmousemove，移动端屏幕点击ontouchstart）设定触发值
<h1 onclick="alert("hello");">Click me</h1>
<h1 onclick=(function(){alert("hello");})()>Click me</h1>
区别
addEventListener可以设置触发顺序，能多次绑定事件
div1 = document.getElementById("div1");
div1.addEventListner('click', function(){alert("msg1");});
div1.addEventListner('click', function(){alert("msg2");});
结果会依次提示"msg1", "msg2"。
但是on事件多次绑定的话会出现覆盖。
div1.onclick = function(){ alert("msg1");};
div1.onclick = function(){ alert("msg2");};
这里只会提示最后一个"msg2"。第二次对 对象div1的onclick属性进行赋值，会覆盖之前的函数值。
