DOM 事件相关

月石子君
126 阅读3分钟

什么是事件委托？

  • 答:监听祖先元素 : 捕获和冒泡允许我们实现一种被称为事件委托的强大的事件处理模式.
    • 如果我们有许多类似的方式要处理元素,那么就不必为每个元素分配一个处理程序 —— 而是将单个处理程序放在它们的共同祖先上 => 即监听祖先元素
    • 优点: 1. 省内存 2. 可以监听动态元素

怎么阻止默认动作？

什么是默认动作?

  • 点击一个链接 —— 触发导航（navigation）到该 URL。
  • 点击表单的提交按钮 —— 触发提交到服务器的行为。
  • 在文本上按下鼠标按钮并移动 —— 选中文本。

怎么阻止默认动作?

1.可以使用event对象,event.preventDefault()方法

<a href="/" onclick="return false">Click here</a>
or
<a href="/" onclick="event.preventDefault()">here</a>

通过上述代码我们在点击链接就没有任何的反应了 2. 或者使用return false

<input onmousedown="return false" onfocus="this.value=''" value="Click me">

通过上述代码我们就无法在点击聚焦文本框了,点击文本框也没有任何反应了

怎么阻止事件冒泡？

首先要明白什么是事件冒泡和事件捕获

<html lang="en">
<body>
<table>
<tr>
    <td>P</td>
</tr>
</table>
</body>
</html>
  • 请问点击鼠标点击P的时候发生了什么?
    • 答: 点击的时候事件会经历三个阶段:
      1. 捕获阶段（Capturing phase）—— 事件（从 Window）向下走近元素。
      2. 目标阶段（Target phase）—— 事件到达目标元素。
      3. 冒泡阶段（Bubbling phase）—— 事件从元素上开始冒泡。
        未命名
  1. 捕获阶段（Capturing phase）
    • 点击后,首先会从window开始运行,监听
    • 然后在Dounment上运行,监听
    • 然后是在上<html>运行,监听
    • 然后是在上<body>运行,监听
    • 然后是在上<table>运行,监听
    • 然后是在上<tbody>运行,监听
    • 直到最后在<td>上捕获P(此就到达目标属于（目标阶段）)
    • 一层一层的向下捕获
  2. 冒泡阶段（Bubbling phase）—— 事件从元素上开始冒泡
  • 点击后,首先会从window开始运行,监听
    • 首先从目标阶段<td>上开始运行,监听
    • 然后是在<tr>上运行,监听
    • 然后是在<tbody>上运行,监听
    • 然后是在<table>上运行,监听
    • 然后是在<body>上运行,监听
    • 然后是在<body>上运行,监听
    • 然后是在上<html>运行,监听
    • 然后在Dounment上运行,监听
    • 最后到底window
    • 一层一层向上浮动

  1. 点击 <td>，事件首先通过祖先链向下到达元素（捕获阶段），然后到达目标（目标阶段），最后上升（冒泡阶段），在途中调用处理程序。

  2. 注意的是: 所有事件,都是先捕获阶段,然后冒泡阶段,按照这样的顺序进行的

如何阻止事件冒泡?

  • 用于停止冒泡的方法是 event.stopPropagation()
<body onclick="alert(`the bubbling doesn't reach here`)">
  <button onclick="event.stopPropagation()">Click me</button>
</body>

通过上述代码我们阻止了冒泡,我们再次点击按钮,就不会发生冒泡事件

avatar
文章
阅读
粉丝