【分享】JS添加/删除事件处理函数(支持IE,FF,opera,safari)

说明:本文为《JavaScript高级程序设计》第9章中的跨平台事件中的部分内容。

JS添加/删除事件在IE和支持dom浏览器分别为:attachEvent(ie中的添加事件),detachEvent(ie中的删除事件),addEventListener(支持dom浏览器中的添加事件),removeEventListener(支持dom浏览器中的删除事件)。

例如第一次点击黑色区域的时候弹出警告,并移除click事件,也就是第二次再点击的时候就没反应了,整合代码如下:

==========================================

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>添加删除事件</title>
<script type=”text/javascript”>
var EventUtil=new Object;
//oTarget:目标;sEventType:事件名称;funName:事件触发的函数名;
EventUtil.addEvent=function(oTarget,sEventType,funName){
?//document.getElementById(“dd”).attachEvent
??? if(oTarget.addEventListener){//for DOM;
??oTarget.addEventListener(sEventType,funName, false);
?}else if(oTarget.attachEvent){
??oTarget.attachEvent(“on”+sEventType,funName);
?}else{
??oTarget[“on”+sEventType]=funName;
?}
};
EventUtil.removeEvent=function(oTarget,sEventType,funName){
?//document.getElementById(“dd”).attachEvent
??? if(oTarget.removeEventListener){//for DOM;
??oTarget.removeEventListener(sEventType,funName, false);
?}else if(oTarget.detachEvent){
??oTarget.detachEvent(“on”+sEventType,funName);
?}else{
??oTarget[“on”+sEventType]=null;
?}
};
function removeClick(){
?alert(“click”);
?var oDiv=document.getElementById(“odiv”);
?oDiv.style.cursor=”auto”;
?EventUtil.removeEvent(oDiv,”click”,removeClick);
}
//—-多个函数绑定到window.onload上——//
function addLoadEvent(func){
??? var oldonload=window.onload;
??? if(typeof window.onload !=”function”){
??????? window.onload=func;
??? }else{
??????? window.onload=function(){
??????????? oldonload();
??????????? func();
??????? }
??? }
}

addLoadEvent(addClick);
function addClick(){
?var oDiv=document.getElementById(“odiv”);
?oDiv.style.cursor=”pointer”;
?EventUtil.addEvent(oDiv,”click”,removeClick);
}
</script>
</head>

<body>
<p>第一次点击黑色区域的时候弹出警告,并移除click事件,也就是第二次再点击的时候就没反应了</p>
<div id=”odiv” style=”background:#333; height:100px; width:100px; margin:0 auto; color:#CDCDCD; “>第一次点我警告你,第二次点我不理你!</div>
</body>
</html>

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 【分享】JS添加/删除事件处理函数(支持IE,FF,opera,safari)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏