普通事件添加和事件绑定及兼容
原文链接：http://www.cnblogs.com/yangkangkang/p/5646416.html
1、普通事件添加
//执行完代码后，只执行alert(3),将alert(1)和alert(2)覆盖了。
<body>
<div id="putong">
<input type="submit" value="点击我">
</div>
<script>
var btn=document.getElementById("putong");
btn.onclick=function(){
alert(1);
}
btn.onclick=function(){
alert(2);
}
btn.onclick=function(){
alert(3);
}
</script>
</body>
2、事件绑定 addEventListener
//执行完代码后，结果都执行了，不会发生覆盖。
<body>
<div id="putong">
<input type="submit" value="点击我">
</div>
<script>
var btn=document.getElementById("putong");
btn.addEventListener("click",function(){
alert(1)
},false);
btn.addEventListener("click",function(){
alert(2)
},false);
btn.addEventListener("click",function(){
alert(3)
},false);
</script>
</body>
提示：addEventListener不兼容低版本IE，使用addEventListener添加事件之前，请先处理兼容问题。
兼容写法如下：
<body>
<ul id="parent">
<li id="test1">aaaa111</li>
<li id="test2">aaaa222</li>
<li id="test3">aaaa333</li>
<li id="test4">aaaa444</li>
<li id="test5">aaaa555</li>
<li id="test6">aaaa666</li>
</ul>
<script type="text/javascript">
var addEvent = function(element,type,callback){
if(element.addEventListener){
element.addEventListener(type,callback,false);
}else if(element.attachEvent){
element.attachEvent('on' + type,callback)
}
}
window.onload = function(){
//调用addEvent函数执行返回值 得到相应的兼容！
addEvent(document.getElementById('parent'),'click',function(event){
var event = event || window.event;
var target = event.target || event.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
alert(target.innerHTML);
//alert(target.id)
}
});
}
</script>
</body>
另外下半年为闭包实现的方法：
<script type="text/javascript">
var addEvent = (function(){
if(document.addEventListener){
return function(element, type,callback){
element.addEventListener(type,callback,false);
}
}else{
return function(element, type,callback){
element.attachEvent('on' + type,callback);
}
}
})();
window.onload = function(){
addEvent(document.getElementById('parent'),'click',function(event){
var event = event || window.event;
var target = event.target || event.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
alert(target.id);
}
});
}
</script>
<ul id="parent">
<li id="test1">aaaa</li>
<li id="test2">aaaa</li>
<li id="test3">aaaa</li>
<li id="test4">aaaa</li>
<li id="test5">aaaa</li>
<li id="test6">aaaa</li>
</ul>
事件移除兼容写法：
removeEvent()是用来移除addEventLIstener()的，detachEvent()是用来移除ie8以下attachEvent()事件的。
注：要使用removeEvent(detachEvent)移除事件时，addEventLIstener(attachEvent )的执行函数必须使用外部函数，否则无法移除事件
<!doctype html>
<title>javascript事件兼容写法</title>
<meta charset="utf-8"/>
<script type="text/javascript">
var addEvent = (function(){
if(document.addEventListener){
return function(element, type,callback){
element.addEventListener(type,callback,false);
}
}else{
return function(element, type,callback){
element.attachEvent('on' + type,callback);
}
}
})();
var removeEvent = function(element, type, callback){
if(element.removeEventListener){
element.removeEventListener(type,callback,false);
}else if(element.detachEvent){
element.detachEvent('on' + type,callback);
}
}
window.onload = function(){
//因为涉及到移除事件，所以事件的执行函数需要使用外部函数
var myCallback = function(event){
var event = event || window.event;
var target = event.target || event.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
alert(target.id);
}
}
addEvent(document.getElementById('parent'),'click',myCallback);
removeEvent(document.getElementById('parent'),'click',myCallback);
}
</script>
<ul id="parent">
<li id="test1">aaaa</li>
<li id="test2">aaaa</li>
<li id="test3">aaaa</li>
<li id="test4">aaaa</li>
<li id="test5">aaaa</li>
<li id="test6">aaaa</li>
</ul>
获取事件源兼容写法：
var getEvent = function(event){
event = event || window.event;
return event.target || event.srcElement;
}
阻止冒泡事件：
var stopPropagation = function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
}
阻止默认事件：
var preventDefault = function(){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
}
通用的事件监听函数：
var Event = {
addEvent: function(element,type,callback){
if(element.addEventListener){
element.addEventListener(type,callback,false);
}else if(element.attachEvent){
element.attachEvent('on' + type,callback);
}
},
removeEvent: function(element,type,callback){
if(element.removeEventListener){
element.removeEventListener(type,callback,false);
}else{
element.detachEvent('on' + type, callback);
}
},
getEvent: function(event){
return event || window.event;
},
getTarget: function(event){
return event.target || event.srcElement;
},
stopPropagation: function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
},
preventDefault: function(event){
if(event.prevenDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
}
}
我好想爱这个世界啊
