四、DOM-事件高级

最新推荐文章于 2024-06-10 21:57:08 发布

槿川001

最新推荐文章于 2024-06-10 21:57:08 发布

阅读量31

点赞数

分类专栏： Web APIs 文章标签： java 前端 javascript

本文链接：https://blog.csdn.net/qq_55891636/article/details/128087846

版权

Web APIs 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

事件高级

事件对象

获取事件对象

事件绑定的回调函数的第一个参数就是事件对象

一般命名为event、ev、e
```
  元素.addEventListener('click',function(e) {})
```
事件对象常用属性

常用：pageX，pageY
事件流

事件冒泡

当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡

简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件

事件冒泡是默认存在的

事件捕获

从DOM的根元素开始去执行对应的事件(从外到里)
```
  DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制)
```
阻止事件流动

因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素

若想把事件就限制在当前元素内，就需要阻止事件流动

阻止事件流动需要拿到事件对象

语法
```
  事件对象.stopPropagation()
```
阻止默认行为，比如链接点击不跳转，表单域的不提交

语法
```
  <a href="http://www.baidu.com">跳转到百度<a/>
  <script>
      let a = document.querySelect('a')
      a.addEventListener('click',function(event) {
          e.preventDefault()//阻止默认行为
      })
  <script/>
```

事件委托

给父元素绑定事件，它的子元素也能绑定事件，利用了事件的冒泡

真正触发事件的元素：事件对象.target

  <script>
      let ul = document.querySelector('ul')
      ul.addEventListener('click',function(event) {
          event.target.style.color = 'red'
      })
  <script/>