addEventListener()使用方法
document.addEventListener() 方法用于向文档添加事件句柄,即事件监听。先看下面代码,稍后进行讲解。
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title></title> </head> <body><button id="mybtn">快点我啊</button><p id="demo"></p><script type="text/javascript">document.getElementById("mybtn").addEventListener("click",Helloworld,false);function Helloworld(){document.getElementById("demo").innerText += "Hello world.....";}</script> </body> </html>
运行结果是:
即就是事件的监听,当相应的事件发生了(比如点击),就执行对应的函数。语法
// event 描述事件名称的字符串,例如:click,mousemove等等事件,注意:不是onclick,是click,不要使用“on"前缀。 //function 当事件发生后,需要执行的操作 //useCapture 可选,布尔值,指定事件是否在捕获或者冒泡阶段执行, // true--在捕获阶段执行,false(默认)----在冒泡阶段执行。具体请看下面。 document.addEventListener(event,function,useCapture)
捕获、冒泡阶段的区别(true----是捕获阶段执行,false是冒泡阶段执行)
浏览器在解析执行代码的时候,会按这样子的顺序执行(如下图,图片是借鉴他人的):
Document--------html-------body-------div-------body-------html-----Document
捕获阶段:从根节点开始顺序而下至目标节点,检测每个节点是否注册了事件处理程序。如果注册了事件处理程序,并且 useCapture 为 true,则调用该事件处理程序。
目标阶段:触发在目标对象本身注册的事件处理程序,也称正常事件派发阶段。
冒泡阶段:从目标节点到根节点,检测每个节点是否注册了事件处理程序,如果注册了事件处理程序,并且 useCapture 为 false,则调用该事件处理程序。看个例子:
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><div id="outer"><div id="inner">inner</div></div><script type="text/javascript">document.getElementById("inner").addEventListener("click",function (){alert(this.id);},false); document.getElementById("outer").addEventListener("click",function (){alert(this.id);},false);</script></body> </html>
运行顺序为:Document----html----body----div(outer)----div(inner)-----div(outer)----body----html----Document
当运行到div(outer)的时候,发现它有个点击事件,但是因为此时useCapture为false,且处于捕获阶段,不执行对应的点击事件。当返回的时候,是处于冒泡阶段,即开始执行各自的点击事件。运行结果为:点击inner,则会先弹出inner 后弹出 outer。
接下来,把代码改成:
<script type="text/javascript">document.getElementById("inner").addEventListener("click",function (){alert(this.id);},false); document.getElementById("outer").addEventListener("click",function (){alert(this.id);},true);</script>
运行顺序仍然为:Document----html----body----div(outer)----div(inner)-----div(outer)----body----html----Document
运行结果则是:先弹出outer,再弹出inner。因为当运行到div(outer)阶段的时候,div(outer)的useCapture为true,即在捕获阶段可以执行相应的事件,而此时又是捕获阶段,因此,会处理div(outer)的点击事件,弹出个outer。
addEventListener()使用方法相关推荐
- 关于addEventListener和attachEvent的初步探讨
关于addEventListener和attachEvent IE不对应addEventListener,只能使用attachEvent,所以首先需要判断你的浏览器对应的是哪个事件函数 if (win ...
- 事件绑定-addEventListener()和attachEvent()的区别及用法
JavaScript-DOM-事件绑定 当我们为元素绑定一个单击事件时,通常会想到element.οnclick=function(){},但是要绑定多个单击函数时却会失效,并且会被最新的响应函数 ...
- js 事件阻止传播方法,准确定位事件源
1事件冒泡 在目标元素获得机会处理事件后,事件模型检查目标元素的父元素,看是否为同类型事件建立了处理程序.如果是,则也调用父元素的处理程序.在这之后,再检查其父元素,然后父元素,然后父元素...持续不 ...
- jQuery学习---------认识事件处理
3种事件模型: 原始事件模型 DOM事件模型 IE事件模型 原始事件模型(0级事件模型) 1.事件处理程序被定义为函数实例,然后绑定到DOM元素事件对象上,实现事件的注册. 例子:var btn = ...
- JS(JavaScript)的深入了解1(更新中···)
面向对象 1.单列模式 2.工厂模式 3.构造函数 (1) 类Js天生自带的类Object 基类Function Array Number Math Boolean Date Regexp Strin ...
- 【前端】2015阿里前端实习生在线笔试题
网上找的题,自己做了做. ... 2015阿里巴巴前端实习生在线笔试题 1. (单项选择)对于下列程序运行结果,符合预期的是 function f1() { console.time('time sp ...
- 第148天:js+rem动态计算font-size的大小,适配各种手机设备
需求: 在不同的移动终端设备中实现,UI设计稿的等比例适配. 方案: 布局排版都用rem做单位,然后不同宽度的屏,js动态计算根节点的font-size. 假设设计稿是宽750px来做的,书写css方 ...
- jquery 字符串查找_JQuery、Vue等考点
一. 写出下面程序的运行结果 for 结果:1秒后一下子打印出5个5.当循环完成时才会轮到setTimeout异步执行其回调函数function,此时i已经变成5,故5个console.log(i)里 ...
- 移动端H5终端适配方案
1.JS的根据不同屏幕宽度动态设置html的font-size,使用rem布局. a.手淘方案 flexible+rem(参考https://github.com/amfe/article/issue ...
最新文章
- 学习:正则表达式的基本语法
- cmd命令大全 DOS窗口命令
- 区块链中的数学 - EdDSA签名机制
- [转载]C#时间函数
- 虚拟专题:知识图谱 | 频谱知识图谱:面向未来频谱管理的智能引擎
- ElasticSearch、Kibana Web管理
- python-函数的返回值
- JavaScript实现按字典排序进行md5加密, 以及个人在小程序也可以实现
- 前端开发工程师如何在2013年里提升自己
- react native之修改APP的名称和图标
- c++ 查看opencv版本 linux
- vrep中接近开关与激光雷达
- ROS Base path和Source space不一致问题,修改文件名后无法make问题,catkin_make报错问题
- VUE(11) : 图片点击全屏展示
- 了解OLE及ActiveX
- Oracle字符串类型扩容隐患
- 【C语言进阶】你真的懂数据文件吗?一文带你了解什么是数据文件
- wikioi1369 xth 砍树
- Error creating bean with name 'transactionManager' defined i
- 基于jsp的驾照理论在线考试系统
热门文章
- python表格中插入图片_运维(1)python操作excel插入图片
- c语言写txt文件fwrite,文件操作 fwrite,该怎么处理
- .Net Core快速开发平台源码 敏捷开发框架OA系统 CRM快速开发框架
- JavaWeb:request.setAttribute()和session.setAttribute()的区别
- 20189220 余超《Linux内核原理与分析》第六周作业
- IDEA 安装快捷键提示工具:Key promoter X
- OpenStack裸金属使用总结
- 检查excel指定列中是否有错别字存在
- cosh matlab中怎么写,用MATLAB绘制cosh函数
- 全面解读量化中性策略