JavaScript中添加事件句柄

最新推荐文章于 2024-09-02 17:02:14 发布

小拾1236

最新推荐文章于 2024-09-02 17:02:14 发布

阅读量401

点赞数

本文链接：https://blog.csdn.net/cpongo10/article/details/101029098

版权

添加事件句柄的好处：html和JavaScript分离，可读性更强
添加鼠标事件句柄的方法：

document.getElementById("id").addEventListener("click",fucntionName)

去除鼠标事件句柄的方法：

element.removeEventListener("mousemove", myFunction)

一个元素标签可以添加多个事件句柄，彼此独立，并不会覆盖
也可以给windows事件添加句柄
比如

<!DOCTYPE html>
<html>
<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>

在使用addEventListener时，传参时只能调用匿名函数进行传参

<!DOCTYPE html>
<html>
<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 时, 事件使用捕获传递。

跨浏览器解决方法:
var x = document.getElementById(“myBtn”);
if (x.addEventListener) { // 所有主流浏览器，除了 IE 8 及更早版本
x.addEventListener(“click”, myFunction);
} else if (x.attachEvent) { // IE 8 及更早版本
x.attachEvent(“onclick”, myFunction);
}

Categories: JavaScript, 前端