您的位置：首页 > 其它

事件处理程序&&事件对象

2016-11-24 11:52 429 查看

一、事件流
事件流描述的是从页面中接受事件的顺序。

IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流

1、事件冒泡

事件冒泡，即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级向上转播至最不具体的节点(文档)。

2、事件捕获

事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。
二、事件处理程序
1、HTML事件处理程序

2、DOM0级事件处理程序

较传统的方式：把函数赋值给一个事件的处理程序属性用的比较多的方法（原因：简单，跨浏览器）

3、DOM2级事件处理程序

DOM2级事件定义了两个方法：用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。它们都接收三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。（true表示在捕获阶段调用事件处理程序，false表示在冒泡阶段调用事件处理程序）

4、IE事件处理程序

attachEvent()添加事件

detachEvent()删除事件

这两个方法接收相同的两个参数：事件处理程序名称与事件处理函数（不使用第三个参数的原因：IE8以及更早的浏览器版本只支持事件冒泡）

5、跨浏览器的事件处理程序
三、事件对象
什么是事件对象？在触发DOM上的事件时都会产生一个对象。

事件对象event

1、DOM中的事件对象

(1)type属性:获取事件类型

(2)target属性：获取事件目标

(3)stopPropagation() 阻止事件冒泡

(4)preventDefault() 阻止事件的默认行为（例如a默认跳转）

2、IE中的事件对象

(1)type:获取事件类型

(2)srcElement：事件目标

(3)cancelBubble属性：用于阻止事件冒泡。true表示阻止冒泡，false表示不阻止冒泡
(4)returnValue属性：用于阻止事件的默认行为。false为阻止事件的默认行为

<html>
<head>
<title>事件流</title>
<meta charset="utf-8">
</head>
<body>
<div id="box">
<input type="button" value="按钮" id="btn" onclick="showMes()">
<input type="button" value="按钮2" id="btn2">
<input type="button" value="按钮3" id="btn3">
<a href="event.html" id="go">跳转</a>
</div>
</body>
<html>

<script>
var btn2=document.getElementById('btn2');
var btn3=document.getElementById('btn3');
var go=document.getElementById('go');
var box=document.getElementById('box');

//HTML事件处理程序
function showMes(){
alert('hello world!');
}
function showMessage(event){
event=event||window.event;
//alert(event.type);//type属性:获取事件类型，event.target.nodeName是节点名称（例如：Input）
//event.stopPropagation();//阻止事件冒泡
var ele=event.target||event.srcElement;
alert(ele);
}
function showBox(){
alert('这是放按钮的盒子box');
}
//DOM中的事件对象
function stopGoto(event){
event.preventDefault();
event.stopPropagation();//阻止事件冒泡
}

////DOM0级事件处理程序
btn2.onclick=function(){//给btn2添加onclick属性
alert('这是通过DOM0级添加的事件！');
}
btn2.onclick=null;//删除onclick属性

//DOM2级事件处理程序
btn3.addEventListener('click',showMes,false);//兼容各种浏览器
//		btn3.addEventListener('click',function(){
//			alert(this.value);//this引用被触发的元素
//		},false);
btn3.removeEventListener('click',showMes,false);//删除事件

//IE事件处理程序
btn3.attachEvent('onclick',showMes);
btn3.detachEvent('onclick',showMes);//删除

</script>

<script>
//跨浏览器的事件处理程序
var eventUtil={
// 添加句柄
addHandler:function(element,type,handler){
if(element.addEventListener){//DOM2级事件处理程序
element.addEventListener(type,handler,false);
}else if(element.attachEvent){//IE事件处理程序
element.attachEvent('on'+type,handler);
}else{//DOM0级事件处理程序
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;
}
},
//获取事件
getEvent:function(event){
return event?event:window.event;
},
//获取事件的类型
getType:function(event){
return event.type;
},
//获取元素
getElement:function(event){
return event.target || event.srcElement;
},
//阻止事件的默认行为
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
//阻止事件冒泡
stopPropagation:function(event){
if(event.stopPropagation){//以属性的形式判断
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
}

eventUtil.addHandler(btn3,'click',showMes);
eventUtil.removeHandler(btn3,'click',showMes);
//eventUtil.addHandler(btn3,'click',showMessage);//弹出click
//eventUtil.addHandler(box,'click',showBox);
//eventUtil.addHandler(go,'click',stopGoto);
</script>

<script>
//测试封装的eventUtil
window.onload=function(){
var go=document.getElementById('go');
var box=document.getElementById('box');

eventUtil.addHandler(box,'click',function(){
alert('我是整个父盒子');
});

eventUtil.addHandler(go,'click',function(e){
//e=eventUtil.getEvent(e);
e=e || window.event;
alert(eventUtil.getElement(e).nodeName);
eventUtil.preventDefault(e);
eventUtil.stopPropagation(e);
});
}
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航