马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有账号？立即注册
x
事件处置惩罚步伐
一、事件处置惩罚步伐的定义
事件处置惩罚步伐是一段代码，用于响应特定的事件。在网页开发中，事件是在文档或浏览器窗口中发生的特定交互瞬间，如用户点击按钮、页面加载完成等。事件处置惩罚步伐则是针对这些事件执行的函数，它能让网页实现交互性和动态性。
二、事件处置惩罚步伐的绑定方式
2.1 HTML 内联事件处置惩罚步伐
原理：
直接在 HTML 标签中利用事件属性来绑定事件处置惩罚步伐，事件属性的值是 JavaScript 代码。
示例：
- <!DOCTYPE html>
- <html lang="en">
- <body>
- <button onclick="alert('你点击了按钮！')">点击我</button>
- </body>
- </html>
- 优点是简朴直接，适合简朴的交互。
- 缺点是 HTML 和 JavaScript 代码耦合度高，不利于代码的维护和复用。
2.2 DOM0 级事件处置惩罚步伐
原理：
通过 JavaScript 获取 DOM 元素，然后将一个函数赋值给元素的事件属性。
示例：
- <!DOCTYPE html>
- <html lang="en">
- <body>
- <button id="myButton">点击我</button>
- <script>
- const button = document.getElementById('myButton');
- button.onclick = function() {
- alert('你点击了按钮！');
- };
- </script>
- </body>
- </html>
- 优点是兼容性好，所有浏览器都支持。
- 缺点是一个元素的一个事件只能绑定一个处置惩罚步伐，假如多次绑定，后面的会覆盖前面的。
2.3 DOM2 级事件处置惩罚步伐
原理：
利用 addEventListener() 方法来绑定事件处置惩罚步伐，它可以为元素的同一个事件绑定多个处置惩罚步伐。
示例：
- <!DOCTYPE html>
- <html lang="en">
- <body>
- <button id="myButton">点击我</button>
- <script>
- const button = document.getElementById('myButton');
- button.addEventListener('click', function() {
- alert('第一次点击响应');
- });
- button.addEventListener('click', function() {
- alert('第二次点击响应');
- });
- </script>
- </body>
- </html>
下面对事件处置惩罚逻辑进行调整
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8" />
- <title>title</title>
- </head>
- <body>
- <!-- 创建一个按钮 -->
- <button id="myButton">点击我</button>
-
- <script>
- // 获取按钮元素
- const button = document.getElementById('myButton');
- // 初始化点击次数为 0
- let clickCount = 0;
-
- // 为按钮添加点击事件监听器
- button.addEventListener('click', function () {
- // 点击次数加 1
- clickCount++;
- if (clickCount === 1) {
- // 第一次点击时显示相应信息
- alert('第一次点击响应');
- } else if (clickCount === 2) {
- // 第二次点击时显示相应信息
- alert('第二次点击响应');
- }
- });
- </script>
- </body>
- </html>
- 优点是可以为同一个事件绑定多个处置惩罚步伐，并且可以控制事件的捕捉和冒泡阶段。
- 缺点是部门旧浏览器（如 IE8 及以下）不支持，需要利用
attachEvent() 方法作为替换。
三、事件对象
定义：
当事件触发时，会主动创建一个事件对象，它包罗了与该事件相关的信息，如事件范例、触发事件的元素、鼠标位置等。
示例：
- <!DOCTYPE html>
- <html lang="en">
- <body>
- <button id="myButton">点击我</button>
- <script>
- const button = document.getElementById('myButton');
- button.addEventListener('click', function (event) {
- console.log(' 事件类型：', event.type); // 事件类型： click
- console.log(' 触发事件的元素：', event.target); // 触发事件的元素：<button id="myButton">点击我</button>
- });
- </script>
- </body>
- </html>
- type：返回事件的范例，如 click、mouseover 等。
- target：返回触发事件的元素。
- preventDefault()：阻止事件的默认举动，如阻止链接的跳转、表单的提交等。
- stopPropagation()：阻止事件的冒泡或捕捉。
四、事件流
定义：
事件流：形貌了事件在页面中触发的顺序，主要有事件捕捉和事件冒泡两种机制。
事件捕捉：事件从文档的根节点开始，依次向下查找触发事件的元素，直到找到目标元素。在这个过程中，假如元素绑定了相应的捕捉阶段的事件处置惩罚步伐，会依次执行。
事件冒泡：事件从目标元素开始，依次向上流传到文档的根节点。假如元素绑定了相应的冒泡阶段的事件处置惩罚步伐，会依次执行。
示例：
- <!DOCTYPE html>
- <html lang="en">
- <body>
- <div id="outer">
- <div id="inner">点击我</div>
- </div>
- <script>
- const outer = document.getElementById('outer');
- const inner = document.getElementById('inner');
-
- outer.addEventListener('click', function() {
- console.log(' 外层 div 冒泡阶段触发');
- }, false);
- outer.addEventListener('click', function() {
- console.log(' 外层 div 捕获阶段触发');
- }, true);
-
- inner.addEventListener('click', function() {
- console.log(' 内层 div 冒泡阶段触发');
- }, false);
- inner.addEventListener('click', function() {
- console.log(' 内层 div 捕获阶段触发');
- }, true);
- </script>
- </body>
- </html>
五、事件委托
原理：
利用事件冒泡的原理，将事件处置惩罚步伐绑定到父元素上，当子元素触发事件时，事件会冒泡到父元素上，从而触发父元素上的事件处置惩罚步伐。通过判断事件的 target 属性，可以确定是哪个子元素触发了事件。
示例：
- <!DOCTYPE html>
- <html lang="en">
- <body>
- <ul id="myList">
- <li>列表项 1</li>
- <li>列表项 2</li>
- <li>列表项 3</li>
- </ul>
- <script>
- const list = document.getElementById('myList');
- list.addEventListener('click', function(event) {
- if (event.target.tagName === 'LI') {
- console.log(' 你点击了列表项：', event.target.textContent);
- }
- });
- </script>
- </body>
- </html>
- 优点：是可以减少事件处置惩罚步伐的绑定命量，进步性能；便于动态添加和删除子元素，无需为新添加的子元素重新绑定事件处置惩罚步伐。
- 缺点：是需要对事件的 target 属性进行判断，增长了代码的复杂度。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
