JavaScript中的事件如何进行绑定与解除

本文将分享有关JavaScript事件的绑定与解除，有一定的参考价值，希望对大家有所帮助

JavaScript中的事件表示当我们点击某个 HTML 元素时启动一段 JavaScript，从而触发浏览器的行为，我们常常需要用到事件的绑定，接下来将和大家详细分享几种常见的事件绑定方法以及如何解除绑定

事件绑定

onclick事件

指鼠标按下时对象被触发，一个元素只能绑定一个事件

当鼠标点击方块时改变它的背景颜色

window.onload=function(){
var div=document.getElementsByTagName("div")[0];
div.onclick=function(){
div.style.backgroundColor="pink";
console.log(1);
}
}

效果图

点击前

点击后

addEventListener(event, function, useCapture)

指向指定元素添加事件句柄，可以添加多个事件，IE9以下不兼容

event:指定事件名，以字符串的形式存在

function:指事件触发时所执行的函数

useCapture:布尔值，说明事件是否在捕获或者冒泡阶段执行，其中true代表事件句柄在捕获阶段执行，false代表事件句柄在冒泡阶段执行，其中false代表默认值

 window.onload=function(){
   var div=document.getElementsByTagName("div")[0];
     div.addEventListener('click',function(){
     		div.style.backgroundColor="pink";
     },false);
 }//用addEventListener绑定一个click事件，当点击时使背景颜色改变

注意：在写事件时注意不要写on,直接写click大多数情况下写false

attachEvent(event, function)

一个事件可以绑定多个处理程序，同一个函数也可以绑定多次是IE 独有的

event：需要绑定的事件的类型，注意要以on开头

function:指事件触发时所执行的函数

window.onload=function(){
var div=document.getElementsByTagName("div")[0];
 div.attachEvent('onclick',function(){
 div.style.backgroundColor="pink";
     });
 }

注意：程序的运行一定要在IE浏览器下。

解除事件绑定

onclick =false/null

onclick事件的解绑通过令它的值为false或者为null解除

window.onload=function(){
   var div=document.getElementsByTagName("div")[0];
     div.onclick=function(){
     		div.style.backgroundColor="pink";
     }
     div.onclick=null;

removeEventListener(event, function, useCapture)

用于解除绑定了addEventListener事件，注意在解除绑定时不能直接写function，要将函数写在外部

 window.onload=function(){
   var div=document.getElementsByTagName("div")[0];
     div.addEventListener('click',demo,false);
     function demo(){
     	div.style.backgroundColor="pink";
     }
     div.removeEventListener('click',demo,false);
 }//用addEventListener绑定一个click事件，当点击时使背景颜色改变

detachEvent(event, function)

用于解除attachEvent事件，注意在解除绑定时不能直接写function，要将函数写在外部

 window.onload=function(){
   var div=document.getElementsByTagName("div")[0];
     div.attachEvent('onclick',demo);
     function demo(){
     	div.style.backgroundColor="pink";
     }
     div.detachEvent('onclick',demo);
     }

总结：以上就是本篇文章的全部内容了，希望对大家学习JavaScript中事件的绑定有所帮助

   

以上是JavaScript中的事件如何进行绑定与解除的详细内容。更多信息请关注PHP中文网其他相关文章！