首页 > 其他分享 >js中的addEventListener

js中的addEventListener

时间:2024-09-05 10:24:46浏览次数:15  
标签:removeEventListener js 处理程序 事件 addEventListener 方法 click

addEventListener()方法:

  addEventListener() 方法为指定元素指定事件处理程序。

  addEventListener() 方法为元素附加事件处理程序而不会覆盖已有的事件处理程序。

  您能够向一个元素添加多个事件处理程序。

  您能够向一个元素添加多个相同类型的事件处理程序,例如两个 "click" 事件。

  您能够向任何 DOM 对象添加事件处理程序而非仅仅 HTML 元素,例如 window 对象。

  addEventListener() 方法使我们更容易控制事件如何对冒泡作出反应。

addEventListener() 方法时,JavaScript 与 HTML 标记是分隔的,已达到更佳的可读性;即使在不控制 HTML 标记时也允许您添加事件监听器。

removeEventListener() 方法轻松地删除事件监听器。

语法:

目标源.addEventListener(“事件”,函数处理,布尔类型)

    第一个参数是事件的类型(比如 "click" 或 "mousedown")。

    第二个参数是当事件发生时我们需要调用的函数。

    第三个参数是布尔值,指定使用事件冒泡还是事件捕获。此参数是可选的。

    注意:请勿对事件使用 "on" 前缀;请使用 "click" 代替 "onclick"。

例如:

  

document.addEventListener("click",function(ev){
    alert(”aaa“);
})
//当点击整个文档时,弹出aaa

第三个参数:

false,将使用冒泡传播,如果该值设置为 true,则事件使用捕获传播。

js中的addEventListener_事件处理

想要更了解冒泡与捕获机制看我另一篇随笔,这里就不介绍了。

 

removeEventListener() 方法

removeEventListener() 方法会删除已通过 addEventListener() 方法附加的事件处理程序。

语法:

  事件源.removeEventListener(事件,事件名);

  注意: 如果要移除事件句柄,addEventListener() 的执行函数必须使用外部函数,如上实例所示 (myFunction)。

  匿名函数,类似 "document.removeEventListener("event", function(){ myScript });" 该事件是无法移除的。

 版本兼容:

addEventListener() 和 removeEventListener() 方法。不过,对于这些特殊的浏览器版本,您可以使    用 attachEvent() 方法向元素添加事件处理程序,并由 detachEvent() 方法删除:

 



标签:removeEventListener,js,处理程序,事件,addEventListener,方法,click
From: https://blog.51cto.com/liFrans/11926370

相关文章

  • js 识别身份证号的性别、生日、年龄
    //通过身份证号计算年龄、性别、出生日期,userCard:身份证号的字符串,不能是数字functionidCard(userCard){//身份证正则表达式varre=/^\d{6}(((19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2][0-9]|3[0-1])\d{3}([0-9]|x|X))|(\d{2}(0[1-9]|1......
  • 240java jsp SSM Springboot小区物业管理系统报修小区环境缴费管理(源码+文档+开题+运
    项目技术:Springboot+Maven+Vue等等组成,B/S模式+Maven管理等等。环境需要1.运行环境:最好是javajdk1.8,我们在这个平台上运行的。其他版本理论上也可以。2.IDE环境:IDEA,Eclipse,Myeclipse都可以。推荐IDEA;3.tomcat环境:Tomcat7.x,8.x,9.x版本均可4.硬件环境:windows......
  • 239java jsp SSM Springboot超市便利店信息管理系统超市供应商信息商品采购收银员工管
    项目技术:Springboot+Maven+Vue等等组成,B/S模式+Maven管理等等。环境需要1.运行环境:最好是javajdk1.8,我们在这个平台上运行的。其他版本理论上也可以。2.IDE环境:IDEA,Eclipse,Myeclipse都可以。推荐IDEA;3.tomcat环境:Tomcat7.x,8.x,9.x版本均可4.硬件环境:windows......
  • 前端常用的echart获取地图json方法
    一、世界地图,不细分国家相关链接:geojson在线绘制 Json文件链接:world-min.json二、世界地图,包含各个国家 Json文件链接:world.json三、中国地图,省市区县(阿里DataV.GeoAtlas)相关链接:阿里DataV.GeoAtlas在线绘制  Json文件链接:china-min.json、china.json修复右手定......
  • MySQL JSON 数据类型
    JSON数据类型是MySQL5.7.8开始支持的。在此之前,只能通过字符类型(CHAR,VARCHAR或TEXT)来保存JSON文档。相对字符类型,原生的JSON类型具有以下优势:在插入时能自动校验文档是否满足JSON格式的要求。优化了存储格式。无需读取整个文档就能快速访问某个元素的值。在JS......
  • JS 对象深浅拷贝
    1.浅拷贝的原理和实现自己创建一个新的对象,来接受你要重新复制或引用的对象值。如果对象属性是基本的数据类型,复制的就是基本类型的值给新对象;但如果属性是引用数据类型,复制的就是内存中的地址,如果其中一个对象改变了这个内存中的地址,肯定会影响到另一个对象方法一:obje......
  • 【D3.js in Action 3 精译_021】第三章 数据的处理 + 3.1 理解数据
    当前内容所在位置第一部分D3.js基础知识第一章D3.js简介(已完结)1.1何为D3.js?1.2D3生态系统——入门须知1.3数据可视化最佳实践(上)1.3数据可视化最佳实践(下)1.4本章小结第二章DOM的操作方法(已完结)2.1第一个D3可视化图表2.2环境准备2.3......
  • vscode launch.json 模板备忘
    {//UseIntelliSensetolearnaboutpossibleattributes.//Hovertoviewdescriptionsofexistingattributes.//Formoreinformation,visit:https://go.microsoft.com/fwlink/?linkid=830387"version":"0.2.0",&quo......
  • jspWeddingSystem18q852
    jspWeddingSystem18q852本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表项目功能用户,摄影师,商品信息,预定信息,订单支付,摄影预约,摄影费用技术要求:   开发语言:JSP前端使用:HTML5,CSS,JSP动态网页技术......
  • jsp北朝碑刻数字博物馆后台管理系统qbfta
    jsp北朝碑刻数字博物馆后台管理系统qbfta本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表项目功能用户,藏品信息,藏品分类,藏品入库,藏品出库开题报告内容一、项目背景与意义北朝碑刻作为中国古代文化艺术......