浅谈JavaScript事件

浅谈JavaScript事件

事件流

JavaScript的事件流有：Netscape提出的捕获流、IE的冒泡流以及DOM2级事件流。这里只讨论DOM2级事件流。

DOM2级事件流有三个阶段：捕获阶段——>处于目标阶段——>冒泡阶段。如图所示：

其实这些阶段都是相对的。真实的过程取决于事件的目标元素以及各目标元素的祖先元素是否有事件处理函数。

添加事件处理程序

三种方法：

• 在html标签中直接指定，如<div onclick="alert(event.type)"></div>;
• DOM0级方法，如element.onclick = function(e) { alert(e.type); };
• DOM2级方法，如element.addEventListener('click', fn, false);

三种方法各有什么优缺点呢？

• html方法，用户可能在元素刚一出现就触发了事件，但此时js代码可能还未加载。其次，HTML代码和JavaScript代码紧密耦合，不利于开发和维护，所以不推荐使用这种方法。
• DOM0级方法，简单且兼容性好，但是在需要对一个元素设置多个事件处理程序时便显得孱弱。
• DOM2级方法，可以轻易的设置多个事件处理程序，但是在删除事件处理程序时，传给removeEventListener()的参数必须与之前一致，且IE9以下不支持。

事件处理函数需要注意的：

• this指的是target或currentTarget(后面讨论)。
• 两种DOM方法都会给事件处理函数传一个事件对象作为参数。html方法直接引用event

事件对象

上面有提到事件对象event，event对象有很多属性和方法，这里不一一列出只讨论其中常用的几个：

• target: event真正的目标元素;
• currentTarget: 设置了事件处理函数的元素;
• stopPropagation(): 阻止event继续冒泡;
• preventDefault(): 阻止事件的默认行为。

事件类型

太多，无法一一列举，提几个自己容易忽略的点。

• blur、focus是不会冒泡的
• 键盘事件keydown触发条件是按任意键，keypress是按字符键，这两者按住不放都会持续触发，是在文本框变化之前就触发了的。keyup即松开按键触发