DOM 事件模型

什么是 DOM 事件

  • DOM 事件是浏览器的一个功能,是浏览器或者用户针对页面做出的某些动作,比如点击,鼠标移动,键盘输入等。
  • DOM 事件是用户与页面进行交互的核心,当事件触发时,可以绑定一个或多个事件处理函数,来完成我们要实现的功能。

DOM 事件模型

DOM 事件模型分类两种,事件冒泡和事件捕获。当某一事件触发时,先执行捕获再执行冒泡。

事件冒泡

子元素的事件类型触发时,所有父元素上绑定同类型事件均会从内到外层层触发。

代码示例

<body>
    <div class="grandparent">
        祖父元素
        <div class="parent">
            父元素
            <div class="children">子元素</div>
        </div>
    </div>
    <script>
        let children = document.querySelector('.children')
        let parent = document.querySelector('.parent')
        let grandparent = document.querySelector('.grandparent')
       
        // 这里的绑定的三个事件类型相同,均为 click,如果不相同则不会执行事件冒泡
       children.addEventListener('click', () => {
            console.log ('子元素被点击了')
        })

        parent.addEventListener('click', () => {
            console.log ('父元素被点击了')
        })

        grandparent.addEventListener('click', () => {
            console.log ('祖父元素被点击了')
        })
    </script>
</body>

当点击子元素时,控制台打印如下结果


事件捕获

子元素的事件类型触发时,所有父元素上绑定的同类型事件均会从外到内层层触发。

代码示例

<body>

    <div class="grandparent">
        祖父元素
        <div class="parent">
            父元素
            <div class="children">子元素</div>
        </div>
    </div>
    <script>
        let children = document.querySelector('.children')
        let parent = document.querySelector('.parent')
        let grandparent = document.querySelector('.grandparent')
    
        children.addEventListener('click', () => {
            console.log ('子元素被点击了')
        }, true)

        parent.addEventListener('click', () => {
            console.log ('父元素被点击了')
        }, true)

        grandparent.addEventListener('click', () => {
            console.log ('祖父元素被点击了')
        }, true)
    </script>
</body> 

当点击子元素时,控制台打印如下结果


事件对象

每当事件触发时,浏览器会把当前事件触发的详情信息记录下来,并把它们封装成一个对象,可以传递给事件处理函数。

 children.addEventListener('click', (e) => {
            console.log ('子元素被点击了')
            console.log(e)
        }, true) // e 为事件对象

e.target 和 e.currentTarget 的区别

e.target 用户操作的元素
e.currentTarget 程序员监听的元素

代码示例

 children.addEventListener('click', (e) => {
            console.log('子元素被点击了')
            console.log(e.target)    // 输出子元素
            console.log(e.currentTarget);  // 输出子元素
        })

parent.addEventListener('click', (e) => {
            console.log('父元素被点击了')
            console.log(e.target)    // 输出子元素或父元素
            console.log(e.currentTarget)  // 输出父元素
        })
console.log(e)  // 报错 Uncaught ReferenceError: e is not defined

当点击子元素时,控制台打印出如下结果


两个点击事件的 e.target 值都是用户点击子元素,而 e.currentTarget 则是事件触发的元素,用户点击触发的元素 e.targete.currentTarget 的值是相同的,通过事件冒泡和事件捕获触发的元素,e.targete.currentTarget 的值是不相同的。

当事件结束后,事件对象 e 就不存在。

阻止事件冒泡和事件捕获

通过 e.stopPropagation() 可以阻止事件冒泡和事件捕获

阻止事件冒泡
代码示例

 children.addEventListener('click', (e) => {
            console.log('子元素被点击了')
        })

parent.addEventListener('click', (e) => {
            console.log('父元素被点击了')
            e.stopPropagation()   // 当代码执行到这里时,停止事件传播
        })

grandparent.addEventListener('click', (e) => {
            console.log('祖父元素被点击了')    //  这里不会打印出来
        })

阻止事件捕获

  • 子元素不能阻止父元素的事件捕获
    代码示例
 children.addEventListener('click', (e) => {
            console.log('子元素被点击了')  //  这里不会打印出来
        })

parent.addEventListener('click', (e) => {
            console.log('父元素被点击了')
            e.stopPropagation()   // 当代码执行到这里时,停止事件传播
        })

grandparent.addEventListener('click', (e) => {
            console.log('祖父元素被点击了')    
        })

取消默认事件

e.preventDefault()   // w3c 的写法
e.returnValue = false   // IE 的写法
  • 元素有默认事件才可以取消,如果元素本身没有默认事件或者元素不支持取消默认事件(如滚动条),则调用无效。
  • 不可取消冒泡和不可取消默认事件的元素可以通过 MDN 英文版搜索 元素 event ,看到 Bubbles (冒泡) 和(Cancelable)是否支持。

什么元素有默认事件

<a> 链接
<inpunt type='submit'> 表单提交按钮
οncοntextmenu 右键菜单
onmousewheel 鼠标滚轮
touchstart 触屏滑动

代码示例

<body>
<a href="https://www.baidu.com">百度</a>
    <script>
        a.onclick = (e) => {
            if (e.preventDefault) {
                e.preventDefault()
                console.log('链接跳转被阻止了')
            } else {
                window.event.returnValue = false
                console.log('链接跳转被阻止了')
            }
        }
    </script>
</body>

推荐阅读更多精彩内容