事件绑定兼容写法：
1.普通写法
<!doctype html>
<title>javascript事件兼容写法</title>
<meta charset="utf-8"/>
<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(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>
2.还可以用闭包的形式来实现
<!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);
}
}
})();
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;
}
}
时间： 2024-11-05 14:48:31