1、on事件的绑定与解绑
<input type="button" value="点击显示" id="btn">
<input type="button" value="解绑" id="clear">
<script>
myId("btn").onclick=function(){
alert("小狗最可爱！");
}
myId("clear").onclick=function(){
myId("btn").onclick=null;
}
</script>
解绑：对象.on事件名字=null
2、对象.addEventListener("事件类型",事件处理函数,事件处理阶段(true或false))
谷歌和火狐支持,IE8不支持
<input type="button" value="点击显示" id="btn">
<input type="button" value="解绑" id="clear">
<script>
// 多个事件了不能调用同一个函数
myId("btn").addEventListener("click",f1,false);
myId("btn").addEventListener("click",f2,false);
function f1(){
console.log("明月几时有");
}
function f2(){
console.log("把酒问青天");
}
// 同时解绑（移除）多个事件
myId("clear").onclick=function(){
myId("btn").removeEventListener("click",f1,false);
myId("btn").removeEventListener("click",f2,false);
}
</script>
解绑：对象.removeEventListener("没有on的事件类型",函数,false);
3、对象.attachEvent("有on的事件类型",事件处理函数)
谷歌、火狐不支持,IE8支持
<input type="button" value="点击显示" id="btn">
<input type="button" value="解绑" id="clear">
<script>
// 多个事件了不能调用同一个函数
myId("btn").attachEvent("onclick",f1);
myId("btn").attachEvent("onclick",f2);
function f1(){
console.log("明月几时有");
}
function f2(){
console.log("把酒问青天");
}
// 同时解绑（移除）多个事件
myId("clear").onclick=function(){
myId("btn").detachEvent("onclick",f1);
myId("btn").detachEvent("onclick",f2);
}
</script>
解绑：对象.detachEvent("on事件类型",函数名字)
function addEventListener(element, type, fn) { if (element.addEventListener) { element.addEventListener(type, fn, false); } else if (element.attachEvent) { element.attachEvent("on" + type, fn); } else { element["on" + type] = fn; }; };
function removeEventListener(element, type, fn) { if (element.removeEventListener) { element.removeEventListener(type, fn, false); } else if (element.detachEvent) { element.detachEvent("on" + type, fn); } else { element["on" + type] = null; }; };
<input type="button" value="点击显示" id="btn">
<input type="button" value="解绑" id="clear">
<script>
// 事件函数
function f1(){
console.log("明月几时有");
}
function f2(){
console.log("把酒问青天");
}
// 元素绑定事件兼容代码
function addEventListener(element,type,fn){
if(element.addEventListener){
element.addEventListener(type,fn,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,fn);
}else{
element["on"+type]=fn;
}
};
// 元素解绑事件兼容代码
function removeEventListener(element,type,fn){
if(element.removeEventListener){
element.removeEventListener(type,fn,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,fn);
}else{
element["on"+type]=null;
}
};
addEventListener(myId("btn"),"click",f1);
addEventListener(myId("btn"),"click",f2);
myId("clear").onclick=function(){
removeEventListener(myId("btn"),"click",f1);
}
</script>
原文：https://www.cnblogs.com/dawnwill/p/9854647.html