- addEventListener() 方法用于向指定元素添加事件句柄。
- addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
该方法的标准形式:element.addEventListener(event, function, useCapture);
event为事件:click 或者 mouseover/mouseout
function为函数,即自定义的方法
useCapture为描述事件,可以不用。
具体事例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>该实例使用 addEventListener() 方法在用户点击按钮时执行函数。</p>
<button id="myBtn">点我</button>
<script>
document.getElementById("myBtn").addEventListener("click", myFunction);
//新附加了一个弹窗的点击事件。
function myFunction() {
alert ("Hello World!");
}
</script>
</body>
</html>
多个函数的附加
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></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></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>