JavaScript中的事件进行绑定与解除的方法-创新互联

小编给大家分享一下JavaScript中的事件进行绑定与解除的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

马尾ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为成都创新互联的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:18982081108(备注:SSL证书合作)期待与您的合作!

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中的事件进行绑定与解除的方法的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


文章名称:JavaScript中的事件进行绑定与解除的方法-创新互联
标题来源:http://ybzwz.com/article/ccppds.html