您的位置：首页 > Web前端 > JavaScript
JS事件（事件冒泡和事件捕获）

2015-11-01 22:00 896 查看
事件流：描述的是在页面中接收事件的顺序
事件冒泡：由最具体的元素接收，然后逐级向上传播至最不具体的元素的节点（文档）
事件捕获：最不具体的节点先接收事件，而最具体的节点应该是最后接收事件

DOM中：用于处理指定和删除事件处理程序的操作addEventListener()和removeEventListener()。他们都接收三个参数：要处理的事件名、作为事件处理程序的函数和布尔值(事件处理的时候)[true:事件捕获时;false:事件冒泡时]
DOM中的事件对象：
type属性 用于获取事件类型;
target属性 用于获取事件目标
stopPropagation()方法 用于阻止事件冒泡
preventDefault()方法 用于阻止事件的默认行为

IE中：attachEvent()和detachEvent()，接收相同的两个参宿：事件处理程序的名称和事件处理程序的函数。
IE中的事件对象：
type属性 用于获取事件类型
srcElement属性 用于后去事件目标
cancelBubble属性 用于阻止事件冒泡[true:阻止事件冒泡;false:不阻止事件冒泡;]
returnValue属性 用于阻止事件的默认行为 [false:阻止事件的默认行为;]

测试例子：

<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>JS事件测试</title>
<script>
var eventUtil = {
//添加事件
addHandler: function(element, type, handler){
if(element.addEventListener){
//非IE下
element.addEventListener(type, handler, false);
}else if(element.attachEvent){
element.attachEvent('on' + type, handler);
}else{
//IE下
element['on' + type] = handler;
}
},
//删除事件
removeHandler: function(element, type, handler){
if(element.removeEventListener){
//非IE下
element.removeEventListener(type, handler, false);
}else if(element.detachEvent){
element.detachEvent('on' + type, handler);
}else{
//IE下
element['on' + type] = null;
}
},
//获取目标元素
getElement: function(event){
return event.target || event.srcElement;
},
//阻止默认行为
preventDefault: function(event){
if(event.preventDefault){
//非IE下
event.preventDefault();
}else{
//IE下
event.returnValue = false;
}
},
//阻止事件冒泡
stopPropagation: function(event){
if(event.stopPropagation){
//非IE下
event.stopPropagation();
}else{
//IE下
event.cancelBubble = true;
}
}
};
var btn = null, div = null;
window.onload = function(){
btn = document.getElementById('id');
eventUtil.addHandler(document.getElementById('divId'), 'click', showDivMsg);

eventUtil.addHandler(document.getElementById('addId'), 'click', addEvent);
eventUtil.addHandler(document.getElementById('removeId'), 'click', removeEvent);
}

function addEvent(){
eventUtil.addHandler(btn, 'click', showMsg);
}

function removeEvent(){
eventUtil.removeHandler(btn, 'click', showMsg);
}

function showMsg(event){
alert(eventUtil.getElement(event).getAttribute('data') + '事件');
eventUtil.preventDefault(event);
eventUtil.stopPropagation(event);
}

function showDivMsg(){
alert("DIV事件");
}

</script>

</head>
<body>
<div id="divId" data="事件冒泡">
<a id="id" href="http://baidu.com" data="默认行为">跳转</a>
<span data="span">测试事件冒泡与事件捕获</span>
<input type="button" value="添加按钮" id="addId" data="添加"/>
<input type="button" value="删除按钮" id="removeId" data="删除"/>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航