争怎路由网/网站教程/内容

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

网站教程2024-05-08 阅读
网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
本文将分享有关JavaScript事件的绑定与解除，有一定的参考价值，希望对大家有所帮助

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

事件绑定

onclick事件

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

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

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

效果图

点击前

Image 2.jpg

点击后

Image 1.jpg

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中文网其它相关文章！
				
				
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



      
……
标签:JavaScript中的事件如何进行绑定与解除
 
相关阅读