JavaScript学习笔记（事件）

事件流

事件流描述页面接受事件的顺序，DOM2事件规定事件流分为三个阶段：

事件捕获阶段
事件目标阶段
事件冒泡阶段

事件处理程序

DOM0级事件处理程序
DOM0级事件就是将事件处理程序赋值给一个元素的事件处理属性，像下面这种形式

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

btn.onclick = function(){
 alert("Clicked");
};

DOM2级事件处理程序
DOM2级事件新增了两个方法，：绑定事件addEventListener()和移除事件removeEventListener(),方法接收三个参数，事件类型，事件处理程序，布尔值（true代表事件捕获，false代表事件冒泡）

DOM2级方法可以添加多个同类型事件，执行顺序从前到后依次执行

事件执行程序运行在事件对象作用域内

通过addEventListener添加的匿名函数无法解除事件，可以传入一个外部函数名

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

function handle(){
	alert('添加事件')
}

btn.addEventListener("click",handle, false);

btn.removeEventListener("click", handle false);

IE事件处理程序
IE 实现了与 DOM 中类似的两个方法：attachEvent()和 detachEvent()。这两个方法接受相同
的两个参数：事件处理程序名称与事件处理程序函数

IE事件处理程序同样可以添加多个事件，执行顺序从后往前

与DOM事件不同的是，执行函数运行在window作用域

事件类型要加on

和DOM事件执行程序一样，只有通过传入外部事件执行程序的引用，才能用detachEvent移除事件

	var btn = document.getElementById("myBtn");
	
	var handler = function(){
	 alert("Clicked");
	};
	
	btn.attachEvent("onclick", handler);
	//这里省略了其他代码
	btn.detachEvent("onclick", handler);

跨浏览器事件处理程序
为了在跨浏览器事件处理实现兼容，使用一个对象封装兼容的事件处理程序

var EventUtil = {

 addHandler: function(element, type, handler){
	 if (element.addEventListener){
	 element.addEventListener(type, handler, false);
	 } else if (element.attachEvent){
	 element.attachEvent("on" + type, handler);
	 } else {
	 element["on" + type] = handler;
	 }
 },
 
 removeHandler: function(element, type, handler){
	 if (element.removeEventListener){
	 element.removeEventListener(type, handler, false);
	 } else if (element.detachEvent){
	 element.detachEvent("on" + type, handler);
	 } else {
	 element["on" + type] = null;
	 }
	 }
};

兼容DOM2级事件的有限采用DOM2级事件处理程序，不兼容的采用IE事件处理程序，全都不兼容采用DOM0级事件

事件对象

触发DOM上的事件是，会产生一个事件对象，事件对象包含了关于事件的一些信息，所有浏览里都支持事件对象，但是支持方式不同

DOM中事件对象
DOM事件会将event事件对象在事件处理程序中传入，无论DOM0级或者DOM2级

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

DOM事件对象中的常用属性和方法

type 被触发的事件类型

target 事件的目标

preventDefault() 取消默认事件

stopPropagation() 取消事件捕获和冒泡

IE中事件对象
IE中事件对象的支持方式，根据采用不同事件处理程序而不同

1.采用DOM0级事件处理程序，event事件对象在window上

var btn = document.getElementById("myBtn");
btn.onclick = function(){
 var event = window.event;
 alert(event.type); //"click"
};

2.采用IE事件处理程序，event对象可以通过window.event获取，也可以在事件执行程序里传入

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(event){
 alert(event.type); //"click"
});

3.通过HTML特性指定的事件处理程序，那么还可以通过一个名叫event的变量来访问

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

常用事件对象属性和方法

type 事件类型

srcElement 事件目标

returnValue 设置为false取消默认行为

cancelBubble 设置为true取消事件冒泡

liu_xiaoru

发布了34 篇原创文章 · 获赞 2 · 访问量 1647

私信关注