最近跟着慕课网上的《JS事件探秘》课程学习http://www.imooc.com/learn/138 ,总结如下:
一、 第一章
1. 事件流:描述的是从页面中接受事件的顺序
IE ——事件冒泡流; Netscap ——事件捕获流
2. 事件冒泡:即事件最开始由最具体的元素接收,然后逐级向上传播至最不具体的元素。
3. 事件捕获:不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件。
注意:主流浏览器都支持事件冒泡,兼容性上可以放心使用。
二、第二章 使用事件处理程序
1. Html事件处理程序:直接将事件添加到html元素上
Eg: <input type=”button” value=”按钮” id=”btn”οnclick=”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.οnclick= 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.οnclick= 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;
}
}
};