HTML DOM EventListener 事件监听器--简单使用说明

最新推荐文章于 2024-08-08 05:01:09 发布

pzz799

最新推荐文章于 2024-08-08 05:01:09 发布

阅读量1.9k

点赞数

分类专栏：菜鸟成长之路文章标签： javascript

本文链接：https://blog.csdn.net/pzz799/article/details/106882684

版权

菜鸟成长之路专栏收录该内容

12 篇文章 1 订阅

订阅专栏

addEventListener() 方法

语法

element.addEventListener(event, function, useCapture);

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

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

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

使用示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>addEventListener() 方法</title>
</head>
<body>
<button id="Btn">点我</button>
<p id="show"></p>
<script>
var x = document.getElementById("Btn");
x.addEventListener("click", showDate);
x.addEventListener("click", method2);

function showDate() {
    document.getElementById("show").innerHTML = Date();
}
function method2(){
	...code...
}
</script>

</body>
</html>

传递参数的事件监听器

<script>
var a = 3;
var b = 2;
document.getElementById("Btn").addEventListener("click", function() {
    myFunction(a, b);
});
function myFunction(a, b) {
    var result = a * b;
    document.getElementById("show").innerHTML = result;
}
</script>

事件冒泡和事件捕获

addEventListener的语法

element.addEventListener(event, function, useCapture);

中第三个参数userCapture是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。false表示冒泡传递，true表示捕获传递，默认值是false。
在冒泡中，内部元素的事件会先被触发，然后再触发外部元素；
在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件。

removeEventListener() 方法

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

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

</body>

关于浏览器兼容性问题

所以为了兼容所有的浏览器，我们可以定义一个函数：当有 addEventListener 时调用，没有的时候调用 attachEvent。

/*
 * 参数：
 *     obj：要绑定事件的对象
 *     eventStr：事件(注意：这里不要on)
 *      callback：回调函数
 */
function bind(obj , eventStr , callback){
    if(obj.addEventListener){
        //大部分浏览器
        obj.addEventListener(eventStr , callback , false);
    }else{
        //IE8及以下
        obj.attachEvent("on"+eventStr , function(){
            //在匿名函数中调用回调函数
            callback.call(obj);
        });
    }
}