JavaScript事件（下）

最新推荐文章于 2024-05-15 20:09:45 发布

红柚r

最新推荐文章于 2024-05-15 20:09:45 发布

阅读量239

点赞数 1

分类专栏： JavaScript总结

本文链接：https://blog.csdn.net/weixin_43273956/article/details/86766349

版权

JavaScript总结专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在JavaScript的学习中，我们经常会遇到JavaScript的事件机制，例如，事件绑定、事件监听、事件委托（事件代理）等。

一、事件绑定

要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。

在JavaScript中，有三种常用的绑定事件的方法：

在DOM元素中直接绑定；
在JavaScript代码中绑定；
绑定事件监听函数。

1.1 在DOM元素中直接绑定

可以在DOM元素上绑定onclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeypress、onkeyup等。
例：

<input type="button" value="点击" onclick="hello()">
 
<script>
function hello(){
 alert("happy new year!");
}
</script>

1.2 在JavaScript代码中绑定事件

在JavaScript代码中（即 script 标签内）绑定事件可以使JavaScript代码与HTML标签分离，文档结构清晰，便于管理和开发。
例：

<input type="button" value="click me" id="btn">
 
<script>
document.getElementById("btn").onclick = function(){
 alert("hello world!");
}
</script>

1.3 使用事件监听绑定事件

绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。下面详细介绍，事件监听。

事件监听

事件监听，有3个事件阶段，依次是捕获阶段、目标阶段、冒泡阶段。

事件监听的优点

1、可以绑定多个事件。

<input type="button" value="click me" id="btn4">
 
<script>
var btn4 = document.getElementById("btn4");
btn4.addEventListener("click",hello1); //执行
btn4.addEventListener("click",hello2); //执行
function hello1(){
 alert("hello 1");
}
function hello2(){
 alert("hello 2");

【注】传统事件中，若绑定两个事件，则第二个事件会覆盖第一个事件
例：

<input type="button" value="click me" id="btn3">
 
<script>
var btn3 = document.getElementById("btn3");
btn3.onclick = function(){
 alert("hello 1"); //不执行
}
btn3.onclick = function(){
 alert("hello 2"); //执行
}
</script>