JavaScript 基础教程JavaScript 简介JavaScript 用法JavaScript 输出JavaScript 语法JavaScript 语句JavaScript 注释JavaScript 变量JavaScript 数据类型JavaScript 对象JavaScript 函数JavaScript 作用域JavaScript 事件JavaScript 字符串JavaScript 运算符JavaScript 比较和逻辑运算符JavaScript if...else 语句JavaScript switch 语句JavaScript for 循环JavaScript while 循环JavaScript break 和 continue 语句JavaScript typeof, null, undefinedJavaScript 类型转换JavaScript 正则表达式JavaScript 错误throw try catchJavaScript 调试JavaScript 变量提升JavaScript 严格模式 (use strict)JavaScript 使用误区JavaScript 表单JavaScript 表单验证JavaScript 验证 APIJavaScript 保留关键字JavaScript JSONjavascript :void(0) 含义JavaScript 代码规范JavaScript 函数定义JavaScript 函数参数JavaScript 函数调用JavaScript 闭包JavaScript HTML DOMJavaScript DOM- 改变 HTMLJavaScript DOM - 改变 CSSJavaScript HTML DOM 事件JavaScript DOM EventListenerJavaScript DOM 元素(节点)JavaScript 对象类型JavaScript Number 对象JavaScript 字符串(String)对象JavaScript Date 对象JavaScript Array 对象JavaScript Boolean 对象JavaScript Math 对象JavaScript RegExp 对象JavaScript window 对象JavaScript window.screen 对象JavaScript window.location 对象JavaScript window.history 对象JavaScript window.navigator 对象JavaScript 弹窗JavaScript 计时事件JavaScript CookieJS中的if和switch该如何选择?JS优化多分支结构JS中的while和for循环该如何选择?JS优化循环结构JS输出杨辉三角JS定义字符串(3种方式)JS获取字符串长度JS字符串拼接/连接(3种方式)JS字符串查找(6种方法)JS截取字符串JS字符串替换replace()JS字符串大写小写转换JS字符串比较大小JS字符串和数组之间的转换JS给字符串添加HTML标签JS去除字符串前后空格JS Unicode编码和解码JS Base64编码和解码JS在接收表单数据时过滤特殊字符JS自定义编码和解码方案

JavaScript DOM EventListener

html 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);


参数列表

参数说明
event事件的类型 (如 "click" 或 "mousedown")
function事件触发后调用的函数
useCapture布尔值,用于描述事件是冒泡还是捕获,该参数是可选的

注意

不要使用 "on" 前缀。 例如,使用 "click" ,而不是使用 "onclick"


向元素添加事件句柄

下面的范例当用户点击元素时弹出 "Hello World!"

element.addEventListener("click", function(){ alert("Hello World!"); });

还可以使用函数名,来引用外部函数

下面的范例当用户点击元素时弹出 "Hello World!"

element.addEventListener("click", myFunction);
function myFunction() {    
    alert ("Hello World!");
}


向同一个元素中添加多个事件句柄

addEventListener() 方法允许向同个元素添加多个事件,且不会覆盖已存在的事件

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

可以向同个元素添加不同类型的事件

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);


向 Window 对象添加事件句柄

addEventListener() 方法允许我们给 HTML DOM 对象添加事件监听

HTML DOM 对象如: HTML 元素, HTML 文档, window 对象

或者其它的事件对象,如: xmlHttpRequest 对象

下面的代码,当用户重置窗口大小时添加事件监听

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext ;
});


传递参数

当传递参数值时,使用 "匿名函数" 调用带参数的函数

element.addEventListener("click", function(){
    myFunction(p1,p2);
});


事件冒泡或事件捕获?

事件传递有两种方式:冒泡与捕获

事件传递定义了元素事件触发的顺序

比如我们将 <p> 元素插入到 <div> 元素中,用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢?

  1. 在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即: <p> 元素的点击事件先触发,然后会触发 <div>元素的点击事件

  2. 在 捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: <div> 元素的点击事件先触发,然后再触发 <p> 元素的点击事件

addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型

addEventListener( event , function,useCapture );

默认值为 false, 即冒泡传递,当值为 true 时, 事件使用捕获传递

document.getElementById("myDiv").addEventListener("click", myFunction, true);


removeEventListener() 方法

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄

element.removeEventListener("mousemove", myFunction);


浏览器支持

表格中的数字表示支持该方法的第一个浏览器的版本号

方法Chrome  IEFirefox  Safari  Opera  
addEventListener()1.09.01.01.07.0
removeEventListener()1.09.01.01.07.0

IE 8 及更早 IE 版本,Opera 7.0 及其更早版本不支持 addEventListener() 和 removeEventListener() 方法

但是,对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄

element.attachEvent(event, function);
element.detachEvent(event, function);

跨浏览器解决方法

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // 所有主流浏览器,除了 IE 8 及更早版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // IE 8 及更早版本
    x.attachEvent("onclick", myFunction);
}


链接: https://fly63.com/course/7_511