JS事件

// 封装添加事件监听程序
function addEvent(ele,type,hander){
if(ele.addEvenetListener){
ele.addEventListener(type,hander,false);
} else if(ele.attachEvent){
ele.attachEvent('on'+type,hander)
}else{
ele['on'+type]=hander;
}
}

//封装删除事件监听程序
function removeEvent(ele,type,hander){
if(ele.removeEventListener){
ele.removeEventListener(type,hander,false);
}else if(ele.detachEvent){
ele.detachEvent('on'+type,hander);
}else{
ele.['on'+type]=null;
}
}

阻止特定事件的默认行为:点击链接不跳转

<body>

<a href="001.html" id="mylink">点击</a>
<script type="text/javascript">
var link=document.getElementById("mylink");
link.onclick=function(e){
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue=false;
}
}
</script>
</body>

阻止事件冒泡

<body>
<input type="button" id="btn" value="denglu">
<script>
var btn=document.getElementById("btn");
btn.onclick=function(e){
alert("hello");

if(e.stopPropagation){
e.stopPropagation();
}

else{
e.cancelBubble=true;
}

}
document.body.onclick=function(e){
alert("body is clicked");
}
</script>
</body>

如果不添加e.stopPropagation();就会在单击时弹出两个警告框。添加之后,由于阻止冒泡行为,click事件根本不会传播到document.body,因此就不会触发注册在这个元素上的 onclick事件处理程序。

跨浏览器程序

var EventUtil = {
addHandler: function(element, type, handler){
//省略的代码
},
getEvent: function(event){
return event ? event : window.event;
},
getTarget: function(event){
return event.target || event.srcElement;
},
preventDefault: function(event){
if (event.preventDefault){
event.preventDefault();
} else {
event.returnValue = false;
}
},
removeHandler: function(element, type, handler){
//省略的代码
},
stopPropagation: function(event){

if (event.stopPropagation){
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
};

原文地址:https://www.cnblogs.com/autismtune/p/5216119.html