DOM跨浏览器处理 阻止事件冒泡
事件冒泡：从最具体的元素到最上级
事件捕获：与捕获相反
事件处理程序：
1.HTML事件处理程序
2.DOM 0 级事件处理程序
3.DOM 2 级事件处理程序
DOM 2级事件定义了两个方法：用于处理指定和删除事件处理程序的操作addEventListener()和removeEventListener().他们都接收三个参数：要处理的事件名、作为事件处理程序的函数，如 btn2.addEventListener('click',showMessage,false);和btn2.removeEventListener('click',showMessage,false);（false表示冒泡）
4.IE事件处理程序
attachEvent()添加事件
detachEvent()删除事件
接收相同的两个参数：事件处理程序的名称和事件处理程序的函数，如
btn3.attachEvent('onclick',showMessage);和btn3.detachEvent('onclick',showMessage);
关于事件对象：在触发DOM上的事件时都会产生一个对象
事件对象event
1.DOM中的事件对象
（1）type属性 用于获取事件类型，如click
（2）target属性 用于获取事件目标,如element.target.nodeName,获取节点名称
（3）stopPropagation()方法 用于阻止事件冒泡
（4）preventDefault()方法 阻止事件的默认行为，如跳转
<a href='#'>超链接</a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dom</title>
</head>
<body>
<div id="box">
<input type="button" value="按钮0" id="btn0" >
<input type="button" value="按钮2" id="btn2" >
<input type="button" value="按钮3" id="btn3" >
<a href="message.html" id="go">跳转</a>
</div>
<script>
function showMessage(event) {
event = event window.event;//非IE就是event, IE8以前就是window.event
var ele = event.target event.srcElement ;//chrome 或 IE
// alert(ele .type);
// alert(ele .target);
// alert(ele .target.nodeName);
ele .stopPropagation(); //阻止事件冒泡，不然会向上继续触发事件
}
function showBox() {
alert('这是放按钮的盒子');
}
function stopGoto(event) {
event.stopPropagation(); //阻止冒泡，div事件
event.preventDefault(); //阻止事件跳转，a事件
}
var btn0 = document.getElementById('btn0');
var btn2 = document.getElementById('btn2');
var btn3 = document.getElementById('btn3');
var box = document.getElementById('box');
var go = document.getElementById('go');
btn0.onclick = function () {
alert('这是通过DOM0级添加的事件');//DOM 0 级
};
btn0.onclick = null; //删除onclick属性
//
// btn2.addEventListener('click',showMessage,false);//DOM2级
// btn2.addEventListener('click',function () {
// alert(this.value);
// },false);//DOM2级
//
//// btn2.removeEventListener('click',showMessage,false);
//
// btn3.attachEvent('onclick',showMessage);//IE 浏览器
// btn3.detachEvent('onclick',showMessage);
//跨浏览器处理
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.attachEvent){
element.detachEvent(type,handler);
}else {
element['on' +type] = null;
}
}
};
eventUtil.addHandler(btn3,'click',showMessage);
eventUtil.addHandler(box,'click',showBox);
eventUtil.addHandler(go,'click',stopGoto);
</script>
</body>
</html>- IE中的事件对象
（1）、type属性 用于获取事件类型
（2）、srcElement属性 用于获取事件的目标
（3）、cancelBubble属性 用于阻止事件冒泡，true阻止冒泡，false不阻止
（4）、returnValue属性 用于阻止事件的默认行为，false阻止
区分非IE事件和IE事件，将方法进行封装为event.js
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;
}
},
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;
}
}
};点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦