《JS事件探秘》学习——基础知识练习及总结

最近跟着慕课网上的《JS事件探秘》课程学习http://www.imooc.com/learn/138 ，总结如下：

一、 第一章

1. 事件流：描述的是从页面中接受事件的顺序

IE ——事件冒泡流； Netscap ——事件捕获流

2. 事件冒泡：即事件最开始由最具体的元素接收，然后逐级向上传播至最不具体的元素。

3. 事件捕获：不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。

注意：主流浏览器都支持事件冒泡，兼容性上可以放心使用。

二、第二章 使用事件处理程序

1. Html事件处理程序：直接将事件添加到html元素上

Eg: <input type=”button” value=”按钮” id=”btn”onclick=”showEvent()”>

缺点：html与js代码耦合度高

2. DOM0级事件处理程序：通过属性给元素添加事件

Eg:

<input type=”button” value=”按钮” id=”btn”>

<scripttype="text/javascript">
var inputid = document.getElementById("btn");

inputid.onclick = function(){  //给元素添加事件
alert(DOM0级添加事件);
}
inputid.onclick = null ;  //删除属性事件
</script>

3. DOM2级事件处理程序

DOM2级事件定义了两个方法：用于处理指定和删除事件处理程序的操作

addEventListener() 和removeEventListner() 。

接收三个参数：要处理的事件名、作为事件处理程序的函数和布尔值

注意：布尔值为false —— 表示在冒泡阶段调用处理程序, 为了兼容所有浏览器，一般将值设为false。true则表示在事件捕获阶段调用处理程序。

Eg:

<input type=”button” value=”按钮” id=”btn”>
<script type="text/javascript">s

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

//添加事件
inputid.addEventListener("click",showBox,false);

//删除事件
inputid.removeEventListener("click",showBox,false);

//注意所有事件名不加on, click/mouse
</script>

注意：IE8及更早的浏览器版本不支持addEventListener()和 removeEventListner()

4. IE事件处理程序

attachEvent() 添加事件

detachEvent() 删除事件

接收相同的两个参数：事件处理程序的名称和事件处理程序的函数

不使用第三个参数的原因：IE8 以及更早的浏览器版本只支持事件冒泡

Eg:

<scripttype="text/javascript">

function showBox(){
alert("hello");
}
var inputid =document.getElementById("btn");
inputid.attachEvent("onclick",showBox);

//注意事件名称有on, onclick\onmouse
inputid.detachEvent("onclick",showBox);

</script>

5. 跨浏览器解决

<scripttype="text/javascript">

function showBox(){
alert("hello");
};
var inputid = document.getElementById("btn");

var eventUtil = {

//添加句柄
addHandler:function(element,type, handler){

if(element.addEventListener){  //兼容DOM2级方法
element.addEventListener(type,handler,false);

}else if(element.attachEvent){ //兼容IE

//注意事件type要加上on
element.attachEvent("on"+type,handler);
}else{ //兼容老版本浏览器——既不支持DOM2又不支持IE事件处理程序

//在js中所有用.连接的都可以写成中括号[]的形式
//element.onclick = element['onclick']
element["on"+type] =handler;
}
},

//删除句柄
removeHandler:function(element,type, handler){

if(element.removeEventListener){  // 兼容DOM2级方法
element.removeEventListener(type,handler,false);

}else if(element.detachEvent){ // 兼容IE

// 注意事件type要加上on
element.detachEvent("on"+type,handler);
}else{ // 兼容老版本浏览器——既不支持DOM2又不支持IE事件处理程序
// 在js中所有用.连接的都可以写成中括号[]的形式
// element.onclick =element['onclick']
element["on"+type] = null;
}
},
};

eventUtil.addHandler(inputid,'click', showBox);
eventUtil.removeHandler(inputid,'click', showBox);
</script>

三、事件对象

在触发DOM上的事件时都会产生一个对象

事件对象event

1、 DOM中的事件对象常用属性

（1） event.type : 用于获取事件类型

（2） event.target: 用于获取事件目标

（3） event.stopPropagation() 方法：用于阻止事件冒泡

（4） event.preventDefault() 方法：阻止事件的默认行为

2、 IE中的事件对象

（1） type属性：用于获取事件类型

（2） srcElement属性：用于获取事件的目标

（3） cancelBubble属性：用于阻止事件冒泡

设置为true表示阻止冒泡 设置为false 表示不阻止冒泡

（4） returnValue属性：用于阻止事件的默认行为

设置为false表示阻止事件的默认行为

vareventUtil = {

//添加句柄
addHandler:function(element,type, handler){

if(element.addEventListener){  //兼容DOM2级方法
element.addEventListener(type,handler,false);

}elseif(element.attachEvent){ //兼容IE

//注意事件type要加上on
element.attachEvent("on"+type,handler);

}else{ //兼容老版本浏览器——既不支持DOM2又不支持IE事件处理程序

//在js中所有用.连接的都可以写成中括号[]的形式
//element.onclick= element['onclick']
element["on"+type]= handler;
}
},

//删除句柄
removeHandler:function(element,type, handler){

if(element.removeEventListener){  //兼容DOM2级方法
element.removeEventListener(type,handler,false);

}elseif(element.detachEvent){ //兼容IE

//注意事件type要加上on
element.detachEvent("on"+type,handler);

}else{ //兼容老版本浏览器——既不支持DOM2又不支持IE事件处理程序

//在js中所有用.连接的都可以写成中括号[]的形式
//element.onclick= element['onclick']
element["on"+type]= null;
}
},

//获取事件对象
getEvent:function(event){

//window.eventIE8及以下版本浏览器的调用用方式
returnevent?event:window.event;

},

//获取事件类型
getType:function(event){
returnevent.type;
}

//获取目标元素
getElement:function(event){
returnevent.target || event.srcElement;
}

//阻止默认行为
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{

//兼容IE浏览器
event.returnValue= false;
}
},

//阻止冒泡事件
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble= true;
}
}
};