DOM 事件监听 事件冒泡 事件捕获
addEventListener() 方法
实例:
// 当用户点击按钮时触发监听事件: document.getElementById("myBtn").addEventListener("click", displayDate);
addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
你可以向一个元素添加多个事件句柄。
你可以向同个元素添加多个同类型的事件句柄,如:两个 "click" 事件。
你可以向任何 DOM 对象添加事件监听,不仅仅是 HTML 元素。如: window 对象。
addEventListener() 方法可以更简单的控制事件(冒泡与捕获)。
当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来,可读性更强, 在没有控制HTML标记时也可以添加事件监听。
你可以使用 removeEventListener() 方法来移除事件的监听。
// 语法 element.addEventListener(event, function, useCapture);
第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。 默认值为 false, 即冒泡传递,当值为 true 时, 事件使用捕获传递。
注意:不要使用 "on" 前缀。 例如,使用 "click" ,而不是使用 "onclick"。
// 当用户点击元素时弹出 "Hello World!" //1.直接添加
element.addEventListener("click", function(){ alert("Hello World!"); }); //2.使用函数名,引用外部函数 (函数名,没有对括号)
element.addEventListener("click", myFunction); function myFunction() {
alert ("Hello World!");
}
向 Window 对象添加事件句柄
addEventListener() 方法允许你在 HTML DOM 对象添加事件监听, HTML DOM 对象如: HTML 元素, HTML 文档, window 对象。或者其他支出的事件对象如: xmlHttpRequest 对象。
//当用户重置窗口大小时添加事件监听:
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});
传递参数
当传递参数值时,使用"匿名函数"调用带参数的函数:
<p>实例演示了在使用 addEventListener() 方法时如何传递参数。</p>
<p>点击按钮执行计算。</p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
var p1 = 5;
var p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
myFunction(p1, p2);
});
function myFunction(a, b) {
var result = a * b;
document.getElementById("demo").innerHTML = result;
}
</script>
事件冒泡或事件捕获?
事件传递有两种方式:冒泡与捕获。
事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中,用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢?
在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即: <p> 元素的点击事件先触发,然后会触发 <div> 元素的点击事件。
在 捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: <div> 元素的点击事件先触发 ,然后再触发 <p> 元素的点击事件。
addEventListener(event, function, useCapture); //"useCapture" 默认值为 false, 即冒泡传递,当值为 true 时, 事件使用捕获传递
removeEventListener() 方法
removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:
//如果element元素绑定了"mousemove"事件
element.removeEventListener("mousemove", myFunction);
浏览器支持
注意: IE 8 及更早 IE 版本,Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是,对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:
element.attachEvent(event, function);
element.detachEvent(event, function);
//跨浏览器解决方法:
<p> Internet Explorer 8 及更早IE版本不支持addEventListener() 方法。</p>
<p>该实例演示了所有浏览器兼容的解决方法。</p>
<button id="myBtn">点我</button>
<script>
var x = document.getElementById("myBtn");
if (x.addEventListener) {
x.addEventListener("click", myFunction);
} else if (x.attachEvent) {
x.attachEvent("onclick", myFunction);
}
function myFunction() {
alert("Hello World!");
}
</script>
DOM 事件监听 事件冒泡 事件捕获的更多相关文章
- [置顶] flex4事件监听与自定义事件分发(三)
1.我们来说一下自定义事件子类.什么时候创建新的事件类以及怎么创建. (1)说一下,我们什么时候需要自定义事件类.举例说明,在flex中事件的基类是Event,而当我们点击某个按钮或者是单击某个组件的 ...
- 事件监听机制——鼠标事件MouseEvent
鼠标事件 鼠标事件包括鼠标的双击.左击.右击.中间键等等,本文进行事件加载进行简单介绍,具体可以参考键盘事件. import java.awt.*; import java.awt.event.*; ...
- 图形用户界面(GUI)事件监听机制——窗体事件Frame
窗体事件.Button的使用 本事例给出一个窗体的定义方法,基本属性设置,给窗体添加退出按钮,让按钮具备退出的功能.熟悉监听器的使用 按钮就是事件源. 那么选择哪一个监听器呢? 通过关闭窗体事例了解到 ...
- java Gui编程 事件监听机制
1. GUI编程引言 以前的学习当中,我们都使用的是命令交互方式: 例如:在DOS命令行中通过javac java命令启动程序. 软件的交互的方式: 1. 命令交互方式 图书管理系统 ...
- GUI编程笔记(java)05:GUI事件监听机制原理和举例说明
1.事件监听机制: A:事件源 事件发生的地方 B:事件 就是要发生的事情 C:事件处理 就是针对发生的事情做 ...
- 9、JcomboBox下拉框事件监听
9.JcomboBox下拉框事件监听 JComboBox()的事件监听类ItemListener.其范例代码如下: import java.awt.*; import java.awt.event.* ...
- Java swing(awt):事件监听机制的实现原理+简单示例
(1)实现原理 事件监听机制的实现: 参考图:事件模型_ActionEvent 为了节省资源,系统无法对某个事件进行实时的监听.故实现的机制是当发生某个事件后,处理代码将被自动运行,类似钩子一般.(回 ...
- Spring之事件监听(观察者模型)
目录 Spring事件监听 一.事件监听案例 1.事件类 2.事件监听类 3.事件发布者 4.配置文件中注册 5.测试 二.Spring中事件监听分析 1. Spring中事件监听的结构 2. 核心角 ...
- OSGi 系列(三)之 bundle 事件监听
OSGi 系列(三)之 bundle 事件监听 bundle 的事件监听是在 bundle 生命周期的不同状态相互转换时,OSGi 框架会发出各种不同的事件供事先注册好的事件监听器处理. 1. 事件监 ...
- Spring Boot实践——事件监听
借鉴:https://blog.csdn.net/Harry_ZH_Wang/article/details/79691994 https://blog.csdn.net/ignorewho/arti ...
随机推荐
- LocalSessionFactoryBean有几个属性查找hibernate映射文件
LocalSessionFactoryBean有几个属性查找hibernate映射文件: mappingResources.mappingLocations.mappingDirectoryLocat ...
- 使用 Vue.js 和 Chart.js 制作绚丽多彩的图表
本文作者:Jakub Juszczak 编译:胡子大哈 翻译原文:http://huziketang.com/blog/posts/detail?postId=58e5e0e1a58c240ae35b ...
- 左神算法进阶班4_2累加和为aim的最长子数组
[题目] 给定一个数组arr,和一个整数aim,求在arr中,累加和等于num的最长子数组的长度 例子: arr = { 7,3,2,1,1,7,7,7 } aim = 7 其中有很多的子数组累加和等 ...
- NTP时钟同步学习记录
--1 要点回顾 . 1. NTP唯一配置文件:/etc/ntp.conf . 2. NTP系统日志记录:/var/log/ntp . 3. ntp.conf简要介绍 - 利用 restrict 来管 ...
- jdk工具(转)
在JDK的bin目录下有很多命令行工具: 我们可以看到各个工具的体积基本上都稳定在27kb左右,这个不是JDK开发团队刻意为之的,而是因为这些工具大多数是jdk\lib\tools.jar类库的一层薄 ...
- python 筛选序列中的元素
列表生成式 a = [1, 2, 3, 4, -1, -2] b = [i for i in a if a > 0] 如果数据量很大,会产生一个庞大的结果.这时可以用生成器表达式: b = (i ...
- 第一个简单netty程序
一个简单的netty的程序,主要是netty的客户端和服务端通信. 大部分说明都写在代码注释中 netty server TimeServer import io.netty.bootstrap.Se ...
- Find- Linux必学的60个命令
1.作用 find命令的作用是在目录中搜索文件,它的使用权限是所有用户. 2.格式 find [path][options][expression] path指定目录路径,系统从这里开始沿着目录树向下 ...
- MySQL的高可用实现方案之mysql-mmm
一.环境简述 1.工作逻辑图 2.MySQL-MMM优缺点 优点:高可用性,扩展性好,出现故障自动切换,对于主主同步,在同一时间只提供一台数据库写操作,保证的数据的一致性. 缺点:Monitor节点是 ...
- 快速傅里叶变换(FFT)学习
首先,在写这篇博客之前,我还没有完全学会FFT. 先把会的部分打好,加深一下记忆(也可以说是做笔记吧). 初三了,还不会FFT,要退役喽-- 多项式乘法 点开这篇博客之前,你就应该知道,FFT是用来求 ...