JavaScript——使用addEventListener添加事件处理程序

举报
yd_221104950 发表于 2020/12/02 22:58:13 2020/12/02
【摘要】 addEventListener添加事件处理程序 我们以前通常使用对象属性来给事件指定处理程序 ,如处理加载事件时,我们将事件处理程序赋给属性window.onload,又例如处理按钮点击事件,我们将事件处理程序赋给按钮的onclick属性。但是如果要给一个事件指定多个处理程序,这种方式就显得无能为力了。 所以,我们可以用DOM对象的方法addEventListen...

addEventListener添加事件处理程序

我们以前通常使用对象属性来给事件指定处理程序 ,如处理加载事件时,我们将事件处理程序赋给属性window.onload,又例如处理按钮点击事件,我们将事件处理程序赋给按钮的onclick属性。但是如果要给一个事件指定多个处理程序,这种方式就显得无能为力了。

所以,我们可以用DOM对象的方法addEventListener为一个事件指定多个事件处理程序,如为加载事件指定多个事件处理程序:

function init(){ alert("init init init");
}

function sayHi(){ alert("hi hi hi");
}
window.addEventListener("load",init,false);
window.addEventListener("load",sayHi,false);

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

addEventListener(param1,param2,param3)参数解释:

  1. param1表示事件名
  2. param2表示指向事件处理程序的引用
  3. param3是否让事件向上传递

这第三个参数param3表示是否将事件向上传递给父元素,就加载事件而言,设置哪个值都行,因为对象window已位于最顶层。但是如果在

中嵌套了 ,并希望点击元素时,
元素也将收到这个事件,那么这第三个参数就要设置为true。

removeEventListener删除事件处理程序

例子:

<!doctype html>
<html lang="en"> <head><title>hello </title></head> <body> <script> window.onload = function(){ var div = document.getElementById("div_click"); div.addEventListener("click",myClick,false); }; function myClick(e){ var target = e.target; alert("id:"+target.id); target.removeEventListener("click",myClick,false); } </script> <div id="div_click">click click click</div> </body>
</html>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

谢谢阅读!

文章来源: blog.csdn.net,作者:WongKyunban,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/weixin_40763897/article/details/88106017

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。