DOM - EventListener

JavaScript

JavaScript 教程 JavaScript 简介 JavaScript 用法 JavaScript 输出 JavaScript 语法 JavaScript 语句 JavaScript 注释 JavaScript 变量 JavaScript 数据类型 JavaScript 对象 JavaScript 函数 JavaScript 作用域 JavaScript 事件 JavaScript 字符串 JavaScript 运算符 JavaScript 比较和逻辑运算符 JavaScript 条件语句 JavaScript switch 语句 JavaScript for 循环 JavaScript while 循环 JavaScript Break 和 Continue 语句 JavaScript typeof, null, 和 undefined JavaScript 类型转换 JavaScript 正则表达式 JavaScript 错误 - throw、try 和 catch JavaScript 调试 JavaScript 变量提升 JavaScript 严格模式 JavaScript 使用误区 JavaScript 表单验证 JavaScript 保留关键字 JavaScript JSON javascript:void JavaScript 代码规范 JavaScript 函数定义 JavaScript 函数参数 JavaScript 函数调用 JavaScript 闭包 DOM 简介 DOM HTML DOM - 改变CSS DOM - 事件 DOM - EventListener 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 Cookies

DOM - EventListener

addEventListener() 方法

在用户点击按钮时触发监听事件：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>芝麻教程(web3.xin)</title>
</head>
<body>

<p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}
</script>

</body>
</html>

addEventListener() 方法用于向指定元素添加事件句柄。

addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。

你可以向一个元素添加多个事件句柄。

你可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。

你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。

addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。

当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强，在没有控制HTML标记时也可以添加事件监听。

你可以使用 removeEventListener() 方法来移除事件的监听。

语法

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 "click" 或 "mousedown").

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

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

向原元素添加事件句柄

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>芝麻教程(web3.xin)</title>
</head>
<body>

<p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>
<button id="myBtn">点我</button>
<script>
document.getElementById("myBtn").addEventListener("click", function(){
    alert("Hello World!");
});
</script>

</body>
</html>

你可以使用函数名，来引用外部函数:

element.addEventListener("click", myFunction);

function myFunction() {
    alert ("Hello World!");
}

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>芝麻教程(web3.xin)</title>
</head>
<body>

<p>该实例使用 addEventListener() 方法向同个按钮中添加两个点击事件。</p>
<button id="myBtn">点我</button>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);
function myFunction() {
    alert ("Hello World!")
}
function someOtherFunction() {
    alert ("函数已执行!")
}
</script>

</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>芝麻教程(web3.xin)</title>
</head>
<body>

<p>实例使用 addEventListener() 方法在同一个按钮中添加多个事件。</p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);
function myFunction() {
    document.getElementById("demo").innerHTML += "Moused over!<br>"
}
function mySecondFunction() {
    document.getElementById("demo").innerHTML += "Clicked!<br>"
}
function myThirdFunction() {
    document.getElementById("demo").innerHTML += "Moused out!<br>"
}
</script>

</body>
</html>

向 Window 对象添加事件句柄

addEventListener() 方法允许你在 HTML DOM 对象添加事件监听， HTML DOM 对象如： HTML 元素, HTML 文档, window 对象。或者其他支出的事件对象如: xmlHttpRequest 对象。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>芝麻教程(web3.xin)</title>
</head>
<body>

<p>实例在window对象中使用 addEventListener() 方法。</p>
<p>尝试重置浏览器的窗口触发 "resize" 事件句柄。</p>
<p id="demo"></p>
<script>
window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = Math.random();
});
</script>

</body>
</html>

传递参数

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>芝麻教程(web3.xin)</title>
</head>
<body>

<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>

</body>
</html>

事件冒泡或事件捕获？

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

事件传递定义了元素事件触发的顺序。如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？

在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。

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

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

addEventListener(event, function, useCapture);

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>芝麻教程(web3.xin)</title>
<style>
div {
    background-color: coral;
    border: 1px solid;
    padding: 50px;
}
</style>
</head>
<body>

<p>实例演示了在添加不同事件监听时，冒泡与捕获的不同。</p>
<div id="myDiv">
	<p id="myP">点击段落，我是冒泡。</p>
</div><br>
<div id="myDiv2">
	<p id="myP2">点击段落，我是捕获。 </p>
</div>
<script>
document.getElementById("myP").addEventListener("click", function() {
    alert("你点击了 P 元素!");
}, false);
document.getElementById("myDiv").addEventListener("click", function() {
    alert(" 你点击了 DIV 元素 !");
}, false);
document.getElementById("myP2").addEventListener("click", function() {
    alert("你点击了 P2 元素!");
}, true);
document.getElementById("myDiv2").addEventListener("click", function() {
    alert("你点击了 DIV2 元素 !");
}, true);
</script>

</body>
</html>

removeEventListener() 方法

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>芝麻教程(web3.xin)</title>
</head>
<head>
<style>
#myDIV {
    background-color: coral;
    border: 1px solid;
    padding: 50px;
    color: white;
}
</style>
</head>
<body>

<div id="myDIV"> div 元素添加了 onmousemove 事件句柄，鼠标在桔红色的框内移动时会显示随机数。
  <p>点击按钮移除 DIV 的事件句柄。</p>
  <button onclick="removeHandler()" id="myBtn">点我</button>
</div>
<p id="demo"></p>
<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);
function myFunction() {
    document.getElementById("demo").innerHTML = Math.random();
}
function removeHandler() {
    document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>

</body>
</html>

浏览器支持

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

方法
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.attachEvent(event, function);
element.detachEvent(event, function);

跨浏览器解决方法:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>芝麻教程(web3.xin)</title>
</head>
<body>

<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>

</body>
</html>

HTML DOM 事件对象参考手册

所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。

上一篇:DOM - 事件

下一篇:DOM - 元素(节点)

我要发贴

JavaScript