JavaScript事件笔记

Author : lovecicy

一、事件流

事件流描述的是从页面中接收事件的顺序

1. 事件冒泡

IE的事件叫做事件冒泡,事件从最具体的元素开始,逐级向上传播。

	<!DOCTYPE html>
	<html>
		<body>
			<div id='clickMe'>
				Click Me
			</div>
		</body>
	</html>

当你点击页面中的div时,click事件会按下列顺序传播:
1. div
2. body
3. html
4. document

2. 事件捕获

网景团队提出的另一种事件流叫事件捕获,事件流的方向恰好与事件冒泡相反,同样的,当你点击上面的div时,事件捕获的顺序是:
1. document
2. html
3. body
4. div

3. DOM事件流

DOM 2级事件规定事件流包括3个阶段:事件捕获,处于目标和事件冒泡。在事件处理中,处于目标阶段被看做事件冒泡的一部分。
IE9、Opera、Firefox、Chrome和Safari都支持DOM事件流;IE8及更早版本不支持DOM事件流,即不支持事件捕获。

二、事件处理

响应事件的函数叫做事件处理函数事件监听器。这一部分,我们来了解下事件处理的过程

1. HTML事件处理

这种方式直接将事件处理放在HTML代码中:

    <input type="button" value="Click me" onclick="alert('clicked');"/>

此种方法的缺点就是HTML代码和JS代码的耦合度太高,不利于维护,因此不推荐使用这种方式。

2. DOM 0级事件处理

DOM 0级事件处理方法在第四代浏览器中出现,通过给HTML对象的事件处理属性赋值来处理事件。

    var btn = document.getElementById('myBtn');
    btn.onclick = function(){
      alert('Clicked');
    }

3. DOM 2级事件处理

DOM 2级事件处理方法定义了两个方法用于处理和删除事件监听器:addEventListener()和removeEventListener()方法。所有DOM节点都包含这两个方法。
它们都接受3个参数:事件名称,事件监听函数,布尔值(true, 则在捕获阶段调用事件监听函数;false, 则在冒泡阶段调用事件监听函数。默认为false)。

    var btn = document.getElementById('myBtn');
    btn.addEventListener('click', function(){
      alert('Clicked');
    }, false);

IE9、Opera、Firefox、Chrome和Safari都支持DOM 2级事件处理方法。

4. IE事件处理

IE的实现类似DOM 2级事件处理方法。通过attachEvent()和detachEvent()方法来添加和删除事件处理函数。它们接受两个相同的参数:带on前缀的事件名,事件处理函数。

    var btn = document.getElementById('myBtn');
    btn.attachEvent('onclick', function(){
      alert('Clicked');
    });

通过其他方式处理事件时,事件处理函数中的this指向的是HTML对象,而在IE的事件处理方法中,this指向的是window对象,千万小心。

三、事件对象

在触发DOM上的某个元素时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。例如,鼠标事件对象中,会包含鼠标位置的信息,而键盘事件对象中,会包含与按下的键有关的信息。所有浏览器都支持event对象,只是支持的方式不同。

1. DOM事件对象

兼容DOM的浏览器会将一个event对象传入到事件处理程序中。无论指定事件处理程序时使用什么方法(DOM 0级或DOM 2级),都会传入event对象。

    var btn = document.getElementById('myBtn');
    // DOM 0级
    btn.onclick = function(event){
      alert(event.type); //"click"
    }
    // DOM 2级
    btn.addEventListener('click', function(event){
      alert(event.type); //"click"
    }, false);

HTML事件处理方式同DOM事件处理方式类似,其可以通过event变量访问event对象。如:

    <input type="button" value="Click" onclick="alert(event.type);" />

2. IE事件对象

与DOM中的event对象不同,访问IE中的event对象有集中不同方式,取决于指定事件处理程序的方法。
1. 使用DOM 0级方法时,event对象作为window对象的一个属性存在。
2. 通过attachEvent方法时,event对象可以作为事件处理方法的参数传入,也可以通过访问window.event对象获取。
3. IE阻止默认行为的方法是设置returnValue为false;而标准浏览器则通过event.preventDefault()方法。
4. IE阻止事件冒泡的方式是设置cancelBubble为true;而标准浏览器则通过event.stopPropagation()方法。

standard
  1. Pingback: jQuery Event,jQuery,JavaScript,Event,事件

Have your say