JavaScript HTML DOM EventListener
JavaScript HTML DOM EventListener
addEventListener() 方法
addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
你可以向一个元素添加多个事件句柄。
你可以向同个元素添加多个同类型的事件句柄,如:两个 "click" 事件。
你可以向任何 DOM 对象添加事件监听,不仅仅是 HTML 元素。如: window 对象。
addEventListener() 方法可以更简单的控制事件(冒泡与捕获)。
当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来,可读性更强, 在没有控制HTML标记时也可以添加事件监听。
你可以使用 removeEventListener() 方法来移除事件的监听。
语法
第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
![]() |
注意:不要使用 "on" 前缀。 例如,使用 "click" ,而不是使用 "onclick"。 |
---|
向原元素添加事件句柄
实例
当用户点击元素时弹出 "Hello World!" :
你可以使用函数名,来引用外部函数:
实例
当用户点击元素时弹出 "Hello World!" :
function myFunction() {
alert ("Hello World!");
}
向同一个元素中添加多个事件句柄
addEventListener() 方法允许向同个元素添加多个事件,且不会覆盖已存在的事件:
实例
element.addEventListener("click", mySecondFunction);
你可以向同个元素添加不同类型的事件:
实例
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);
向 Window 对象添加事件句柄
addEventListener() 方法允许你在 HTML DOM 对象添加事件监听, HTML DOM 对象如: HTML 元素, HTML 文档, window 对象。或者其他支出的事件对象如: xmlHttpRequest 对象。
实例
当用户重置窗口大小时添加事件监听:
document.getElementById("demo").innerHTML = sometext;
});
传递参数
当传递参数值时,使用"匿名函数"调用带参数的函数:
事件冒泡或事件捕获?
事件传递有两种方式:冒泡与捕获。
事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中,用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢?
在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即: <p> 元素的点击事件先触发,然后会触发 <div> 元素的点击事件。
在 捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: <div> 元素的点击事件先触发 ,然后再触发 <p> 元素的点击事件。
addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型:
默认值为 false, 即冒泡传递,当值为 true 时, 事件使用捕获传递。
removeEventListener() 方法
removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:
浏览器支持
表格中的数字表示支持该方法的第一个浏览器的版本号。
方法 | |||||
---|---|---|---|---|---|
addEventListener() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
removeEventListener() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
注意: IE 8 及更早 IE 版本,Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是,对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:
element.detachEvent(event, function);
实例
跨浏览器解决方法:
if (x.addEventListener) { // 所有主流浏览器,除了 IE 8 及更早版本
x.addEventListener("click", myFunction);
} else if (x.attachEvent) { // IE 8 及更早版本
x.attachEvent("onclick", myFunction);
}
HTML DOM 事件对象参考手册
所有 HTML DOM 事件,可以查看我们完整的HTML DOM Event 对象参考手册。
JavaScript HTML DOM EventListener的更多相关文章
- javascript HTML DOM 简单介绍
JavaScript HTML DOM通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素.HTML DOM (文档对象模型)当网页被加载时,浏览器会创建页面的文档对象模型( ...
- javascript --- javascript与DOM
javascript与DOM: 我们来个例子,一个HTML里包含一段文本和一个无序的列表. <p id="intro">My first paragraph...< ...
- JavaScript与DOM
文档对象模型Document Object Model DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的API.Javascript和D ...
- Javascript中DOM技术的的简单学习
第十四课DOM技术概述1:DOM概述 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节 ...
- JavaScript与DOM的关系
JavaScript与浏览器的工作 1.浏览器获取并加载你的页面,从上至下解析它的内容. 遇到JavaScript时,浏览器会解析代码,检查它的正确性,然后执行代码. 浏览器还会建立一个HTML页面的 ...
- JavaScript网站设计实践(四)编写about.html页面,利用JavaScript和DOM,选择性的显示和隐藏DIV元素
一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了 ...
- JavaScript学习笔记(2)——JavaScript和DOM的关系
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的 ...
- JavaScript HTML DOM 元素(节点)
JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素 ...
- JavaScript HTML DOM 事件
JavaScript HTML DOM 事件 HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应. 实例 Mouse Over Me 对事件做出反应 我们可以在事件发生时执行 ...
随机推荐
- 14.6.3.1 The InnoDB Buffer Pool
14.6.3.1 The InnoDB Buffer Pool InnoDB 保持一个存储区域被称为buffer pool 用于cache数据和索引在内存里, 知道InnoDB buffer pool ...
- Ubuntu 桌面歌词
Ubuntu 有个用来显示歌词软件叫 osd-lyrics. 这个软件的强大之处在于他可以和各种播放器配合, 并且可以自动下载歌词. 自从升级到14.04后不能用了,便以为该软件被废弃了. 无意中发现 ...
- HDU 5916 Harmonic Value Description 【构造】(2016中国大学生程序设计竞赛(长春))
Harmonic Value Description Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Ja ...
- unity3d shader之Roberts,Sobel,Canny 三种边缘检测方法
方法其实都差不多,就是用两个过滤器,分别处理两个分量 Sobel算子 先说Sobel算子 GX为水平过滤器,GY为垂直过滤器,垂直过滤器就是水平过滤器旋转90度.过滤器为3x3的矩阵,将与图像作平面卷 ...
- HDOJ/HDU 1250 Hat's Fibonacci(大数~斐波拉契)
Problem Description A Fibonacci sequence is calculated by adding the previous two members the sequen ...
- HTML-通过点击网页上的文字弹出QQ添加好友页面
在网上参考了部分方法,综合了一下. 发现有2中方式: 第一种是不能直接弹出添加界面的,只能弹出网页,再通过网页中的添加好友才能添加: 弹出的网页是这样的(我是写成在新的网页中打开) 现在看实现的代码: ...
- Bzoj 2241: [SDOI2011]打地鼠 暴力,枚举,贪心
2241: [SDOI2011]打地鼠 Time Limit: 10 Sec Memory Limit: 512 MBSubmit: 1022 Solved: 651[Submit][Status ...
- 数据结构学习笔记——stack实现(数组篇)
一 栈:是一种表,限制插入和删除只能在一个位置,也即是表的末端(也是栈的顶)进行. 基本操作:push 和 pop. 二 栈的数组实现: 运用数组来存储元素,和栈操作先关的是theArray(一个数组 ...
- lightoj 1021 - Painful Bases 状态压缩
题目链接:http://lightoj.com/volume_showproblem.php?problem=1021 #include<cstring> #include<cstd ...
- 关于字符编码精简介绍 ANSI GB2312 UTF8 UNICODE