<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
#div1{
width: 300px;
height: 300px;
background-color: #f00;
}
#div2{
width: 150px;
height: 150px;
background-color: #0f0;
}
</style>
<body>
<div id="div1" ></div>
<div id="div2"></div>
<script>
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
function qa(){
alert("boom");
}
var qw={
//添加句柄
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;
}
}
}
qw.addHandler(div1,"click",qa);
qw.addHandler(div2,"click",qa)
qw.removeHandler(div2,"click",qa);
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
#div1{
width: 300px;
height: 300px;
background-color: #f00;
}
#div2{
width: 150px;
height: 150px;
background-color: #0f0;
}
</style>
<body>
<div id="div1" ></div>
<div id="div2"></div>
<script>
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
function qa(){
alert("boom");
}
var qw={
//添加句柄
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;
}
}
}
qw.addHandler(div1,"click",qa);
qw.addHandler(div2,"click",qa)
qw.removeHandler(div2,"click",qa);
</script>
</body>
</html>