JavaScript addEventListener()事件监听方法
addEventListener()方法将事件处理程序附加到指定的元素。
addEventListener()方法将事件处理程序附加到元素,而不覆盖现有的事件处理程序。
您可以向一个元素添加许多事件处理程序。您可以向一个元素添加许多相同类型的事件处理程序,即两个“单击”事件。
您可以将事件侦听器添加到任何DOM对象,而不仅仅是HTML元素。即window对象。
addEventListener()方法可以更容易地控制事件对冒泡的反应。
使用addEventListener()方法时,JavaScript与HTML标记分离,以提高可读性,
并允许您添加事件侦听器,即使您不控制HTML标记也是如此。
您可以使用removeEventListener()方法轻松删除事件侦听器。
- 第一个参数是事件的类型(如“ click”或“ mousedown”)。
- 第二个参数是我们想要在事件发生时调用的函数。
- 第三个参数是一个布尔值,指定是使用事件冒泡还是事件捕获。此参数是可选的。
请注意,您不要为事件使用“on”前缀; 用“ click”而不是“ onclick”。
document.getElementById("myBtn").addEventListener("click", displayDate);
向元素添加事件处理程序
element.addEventListener("click", function(){ alert("Hello World!"); });
您还可以在外部定义函数,然后把函数名当参数传:
element.addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
}
将许多事件处理程序添加到同一元素
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction); element.addEventListener("mouseover", myFunction);
element.addEventListener("mouseout", myThirdFunction);
将事件处理程序添加到window对象
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});
传递参数值时,使用“匿名函数”,使用以下参数调用指定的函数:
element.addEventListener("click", function(){ myFunction(p1, p2); });
事件冒泡或事件捕获?
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);
removeEventListener()方法
element.removeEventListener("mousemove", myFunction);
注:该addEventListener()和removeEventListener()方法并不在IE 8和更早版本的支持。
但是,对于这些特定的浏览器版本,您可以使用attachEvent()方法将事件处理程序附加到元素,以及detachEvent()删除它的方法,解决方案
var x = document.getElementById("myBtn");
if (x.addEventListener) { // 对于所有主流浏览器,IE 8及更早版本除外
x.addEventListener("click", myFunction);
} else if (x.attachEvent) { // 适用于IE 8及更早版本
x.attachEvent("onclick", myFunction);
}
JavaScript addEventListener()事件监听方法的更多相关文章
- JavaScript的事件监听、捕获和冒泡
在前端开发中,我们经常需要对某些事件进行监听.这样只要在指定的元素上触发了该事件,就会执行一个回调函数来进行相关的操作. 而JavaScript中事件监听的方法总共有三种,分别如下: element. ...
- javascript的事件监听与捕获和冒泡
在前端开发中,我们经常需要对某些事件进行监听.这样只要在指定的元素上触发了该事件,就会执行一个回调来进行相关的操作. 而js中事件监听方法总共有三种,分别如下所示: element.addEventL ...
- jquery 事件监听方法
一.事件监听方法 mouseover() 鼠标移入事件方法 mouseout() 鼠标移出事件方法 mouseenter() 鼠标移入事件方法 mouseleave() 鼠标移出事件方法 ...
- javascript之事件监听
addEventListener是一个监听事件并处理相应的函数,用于向指定元素添加事件句柄,可使用removeEventListener()方法来移除addEventListener()方法添加的事件 ...
- Android点击Button按钮的四种事件监听方法总结
首先我们在activity_main.xml里面先定义一个Button空间 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <RelativeLayout xmlns:a ...
- 415 DOM 查找列表框、下拉菜单控件、对表格元素/表单控件进行增删改操作、创建元素并且复制节点与删除、 对表格操作、通用性和标准的事件监听方法(点击后弹窗效果以及去掉效果)
DOM访问列表框.下拉菜单的常用属性: form.length.options.selectedindex.type 使用options[index]返回具体选项所对应的常用属性:defa ...
- addEventListener() 事件监听
addEventListener() 用于向指定元素添加事件. 可以向一个元素添加多次事件或者多次不同事件,后面的事件是不会覆盖前面的. 语法: element.addEventListener(ev ...
- 前端基本知识(四):JS的异步模式:1、回调函数;2、事件监听;3、观察者模式;4、promise对象
JavaScript语言将任务的执行模式可以分成两种:同步(Synchronous)和异步(Asychronous). “同步模式”就是一个任务完成之后,后边跟着一个任务接着执行:程序的执行顺序和排列 ...
- React.js 小书 Lesson9 - 事件监听
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson9 转载请注明出处,保留原文链接和作者信息. 在 React.js 里面监听事件是很容易的事情 ...
随机推荐
- 裸奔的支付X聊天,你还敢用吗?
- 语音消息 使用HTTP明文传输,没有任何加密措施,使用域名为up-mayi.django.t.taobao.com,从报文中可以看出,语音消息是以文件形式在网络中传输的,下图为一次语音的发送传输过 ...
- python3基础学习(1)
python基础内容讲解主要内容: 1.使用编辑器(IDE) 2.第一个“hello world” 3.何所谓“变量” 4.python与其他主流语言输出对比 5.数据类型 6.python用作“计算 ...
- win10查看桌面壁纸路径
如题,win10查看自己壁纸的缓存路径,就是找到壁纸的原图:在explorer里输入 %USERPROFILE%\AppData\Roaming\Microsoft\Windows\Themes 1 ...
- -bash: /home/java/jdk1.8.0_221/bin/java: 权限不够
1)进入存放jdk文件的文件夹路径我这里是 usr/local/jdk/2)输入命令 chmod 777 jdk1.8.0_221/bin/java修改权限3)再次输入 java -version 成 ...
- Appium滑动函数:Swipe()
Appium处理滑动方法是swipe 滑动API:Swipe(int start x,int start y,int end x,int y,duration) 解释: int start x-开始滑 ...
- base46+url编码
base64解密+unquote url编码 html = ''' JTdCJTIyc3RvcmUlMjIlM0ElN0IlMjJnYW1lTGlicmFyeSUyMiUzQSU3QiUyMmRpc2 ...
- 深度学习框架gpu安装方法
1.tensorflow pip install tensorflow-gpu==1.14.0,具体安装哪一个版本,可以把1.14.0随便填写一个数字,系统会提示可以有哪些版本可以安装 2.pytor ...
- Spring配置文件中的那些标签
1. context:annotation-config 它的作用是隐式地向Spring容器注册AutowiredAnnotationBeanPostProcessor,CommonAnnotatio ...
- celery 异步发送短信验证码、延迟任务
短信 celery.py import os, django os.environ.setdefault("DJANGO_SETTINGS_MODULE", "luffy ...
- P2186 小Z的函数栈
有点恶心的模拟(代码写整齐一点不就好了) 以下情况算错: 1.运行中有数的绝对值大于1000000000 2.除以和取模的时候第一个数为0 3.取栈顶元素时栈内元素不够 上代码 #include< ...