element 输入框点击事件_DOM事件模型和事件委托

最新推荐文章于 2025-02-26 17:17:50 发布

weixin_31642531

最新推荐文章于 2025-02-26 17:17:50 发布

阅读量361

点赞数

CC 4.0 BY-SA版权

文章标签： element 输入框点击事件

本文链接：https://blog.youkuaiyun.com/weixin_31642531/article/details/112282743

本文介绍了DOM事件模型，包括IE和网景的不同解决方案，以及W3C制定的标准——事件捕获和事件冒泡。此外，还讲解了事件委托的概念，即通过监听祖先元素来处理子元素的事件，以此提高效率和代码维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM事件模型

有如下一段代码

<div class=爷爷>
  <div class=爸爸>
    <div class=儿子>
      文字
    </div>
  </div>
</div>

如果这三个div上都有一个事件监听函数，那么点击文字，会先执行哪一个div上的事件监听函数呢？

IE和网景分别给出了两种不同的答案。

IE认为应该先调用儿子上的事件监听函数，然后调用爸爸的，一级一级往上。

网景认为应该先调用爷爷的事件监听函数，一级一级往下。

最后W3C为了调和这两家，在2002年发布了标准，规定浏览器首先按照爷爷=》爸爸=》儿子的顺序看有没有事件监听，然后按照儿子=》爸爸=》爷爷的顺序看有没有事件监听。并将从爷爷到儿子的监听过程叫做事件捕获，从儿子到爷爷的过程叫事件冒泡。

程序员自己选择将事件放在捕获阶段还是冒泡阶段：

div.addEventListener('click',fn,bool)

当bool为falsy值时让该事件在冒泡时被监听，当bool为true时让该事件在捕获时被监听（不写bool默认为undefined，即在冒泡时被监听）。

事件委托

事件委托是委托一个元素监听我本该监听的事件，一般就是监听祖先元素。

监听一个祖先元素，当他里面的元素触发一个事件时，执行某个函数，这就是事件委托。

on('click', '#div1', 'button', () => {
    console.log('我被点击了')
})

function on(eventType, element, selector, fn) {
    if (!(element instanceof Element)) {
        element = document.querySelector(element)
    }
    element.addEventListener(eventType, e => {
        let el = e.target
        while (!el.matches(selector)) {
            if (el === element) {
                el = null
                break
            }
            el = el.parentNode
        }
        el && fn.call(el, e, el)
    })
    return element
}