2.JS事件响应处理操作

[Geek-James]

事件的三个个阶段

• 第一个阶段:捕获阶段
• 第二个阶段:执行当前点击的元素
• 第三个阶段:事件捕获

注册事件监听器

EventTarget.addEventListener

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

alert('hello word');
},false);

onClick()

mybutton.onClick = function(event) {
    alert('hello word');
}

兼容IE9以下的

• 注册事件 attachEvent

myButton.attachEvent('onclick',fn);

attachEvent与addEventListener的区别

• 支持的浏览器不同。attachEvent在IE9以下的版本中受到支持。其它的都支持addEventListener。
• 参数不同。addEventListener第三个参数可以指定是否捕获，而attachEvent不支持捕获。
• 事件名不同。attachEvent第一个参数事件名前要加on，比如el.attachEvent('onclick', handleClick)。
• this不同。

addEventListener方式的事件绑定

addEventListener的this总是当前正在处理事件的那个DOM对象。 DOM Level 2 Event Model中提到，事件处理包括捕获阶段、目标阶段和冒泡阶段 。

移除事件监听器

• onclick() 直接把方法设置为null就移除了事件
• addEventListener
• 注册的事件通过removeEventLister来移除事件,如果事件要移除那么注册的时候就不能用匿名函数
• attachEvent 注册的事件需要用detachEvent;

鼠标事件

• mousedown:鼠标按钮被按下（左键或者右键）时触发。不能通过键盘触发。
• mouseup:鼠标按钮被释放弹起时触发。不能通过键盘触发。
• click:单击鼠标左键或者按下回车键时触发。这点对确保易访问性很重要，意味着onclick事件处理程序既可以通过键盘也可以通过鼠标执行。
• dblclick:双击鼠标左键时触发。
• mouseover:鼠标移入目标元素上方。鼠标移到其后代元素上时会触发。
• mouseout:鼠标移出目标元素上方。
• mouseenter:鼠标移入元素范围内触发，该事件不冒泡，即鼠标移到其后代元素上时不会触发。
• mouseleave:鼠标移出元素范围时触发，该事件不冒泡，即鼠标移到其后代元素时不会触发。
• mousemove:鼠标在元素内部移到时不断触发。不能通过键盘触发。

note:

在一个元素上相继触发mousedown和mouseup事件，才会触发click事件。两次click事件相继触发才会触发dblclick事件。

如果取消 了mousedown或mouseup中的一个，click事件就不会被触发。直接或间接取消了click事件，dblclick事件就不会被触发了。