解绑事件

<input type="button" value="点击" id="btn"/>
<input type="button" value="干掉第一个按钮的事件" id="btn2"/>
<script src="commer.js"></script>
<!--解绑事件-->
<!--注意:用什么方式绑定事件,就应该用对应的方式解绑事件-->
<!--1:解绑事件-->
<!--对象.on事件名字=事件处理函数&#45;&#45;&#45;&#45;》绑定事件-->
<!--对象.on事件名字=null;-->
<!--2:解绑事件-->
<!--对象.addEventListener("没有on的事件类型",命名函数,false);-&#45;&#45;&ndash;&gt;绑定事件-->
<!--对象.removeEventListener("没有on的事件类型",函数名字,false);-->
<!--3:解绑事件-->
<!--对象.attachEvent("on事件类型",命名函数);-&#45;&#45;&ndash;&gt;绑定事件-->
<!--对象.detachEvent("on事件类型",函数名字);-->

<script>
//对象.on事件名字=事件处理函数----绑定事件
// ver("btn").onclick=function () {
// console.log("今天天气不错!");
// };
// ver("btn2").onclick=function () {
// //解绑事件
// ver("btn").onclick=null;
// };
</script>


<!--2-->
<script>
// function f1(){
// console.log("第一个")
// }
// function f2(){
// console.log("第二个")
// }
// ver("btn").addEventListener("click",f1,false);
// ver("btn").addEventListener("click",f2,false);
// //点击第二个按钮把第一个按钮的第一个点击事件解绑
// ver("btn2").onclick=function () {
// //绑定事件的时候,需要在绑定事件的时候使用 命名函数
// ver("btn").removeEventListener("click",f1,false)
// };
</script>


<!--3-->
<script>
// function f1(){
// console.log("第一个")
// }
// function f2(){
// console.log("第二个")
// }
// ver("btn").attachEvent("onclick",f1);
// ver("btn").attachEvent("onclick",f2);
// ver("btn2").onclick=function () {
// ver("btn").detachEvent("onclick",f1)
// };
</script>


<script>
//绑定事件的兼容
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,fnName) {
if(element.removeEventListener){
element.removeEventListener(type,fnName,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,fnName);
}else {
element["on"+type]=null;
}
}
//测试
function f1() {
console.log("第一个");
}
function f2() {
console.log("第二个");
}
addEventListener(ver("btn"),"click",f1);
addEventListener(ver("btn"),"click",f2);
ver("btn2").onclick=function () {
removeEventListener(ver("btn"),"click",f1);
};
</script>
posted @ 2018-12-01 18:03  lujieting0  阅读(192)  评论(0编辑  收藏  举报