JS基础-事件绑定，事件冒泡，事件代理

最新推荐文章于 2022-10-07 11:47:24 发布

念你啊

最新推荐文章于 2022-10-07 11:47:24 发布

阅读量146

点赞数

分类专栏： js基础知识面试文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_54500649/article/details/115097641

版权

面试同时被 2 个专栏收录

11 篇文章

订阅专栏

js基础知识

3 篇文章

订阅专栏

本文介绍了JavaScript中的事件绑定，包括在DOM元素、JS代码中以及使用事件监听函数的绑定方式。接着讨论了事件冒泡的概念，它是如何允许事件从子元素向上冒泡到父元素的。然后，重点讲解了事件代理的优势，如何通过在父元素上设置事件处理器来处理子元素的事件，从而提高性能和减少内存占用。文中通过实例展示了事件代理的实现和应用场景。

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

JS基础-事件绑定，事件冒泡，事件代理

事件绑定

事件绑定分三种常用的方法:
(1)在DOM元素中直接绑定
(2)在js代码中绑定;
(3)绑定事件监听函数

const btn = document.getElementById('btn1')
btn.addEventListener('click',event =>{
	console.log('clicked')
})


//	 - 编写一个通用的事件监听函数
function bindEvent(elem,type,fn){
   elem.addEventListener(type,fn)
    }
    const a = document.getElementById('link1')
    bindEvent(a,'click',e =>{
         console.log(e.target); //阻止触发的元素
      e.preventDefault();	//阻止默认行为
      alert('clicked')
    })

事件冒泡

事件在目标元素上触发后，并不在这个元素上终止。它会随着DOM树一层层向上冒泡，回溯到根节点。
冒泡过程非常有用。它将我们从对特定元素的事件监听中释放出来，如果没有事件冒泡，我们需要监听很多不同的元素来确保捕获到想要的事件。

	<body>
		<div id="div1">
    		<p id="p1">激活</p>
    		<p id="p2">取消</p>
    		<p id="p3">取消</p>
    		<p id="p4">取消</p>
  		</div>
  		<div id="div2">
    		<p id="p5"></p>
    		<p id="p6"></p>
  		</div>
	</body>

 // 事件冒泡
    const p1 = document.getElementById('p1')
    const body = document.body
    bindEvent(p1,'click',e=>{
      e.stopPropagation();
      alert('激活')
    })
    bindEvent(body,'click',e =>{
      alert('取消')
    })

事件代理

在传统的事件处理中，你按照需要为每一个元素添加或者是删除事件处理器。然而，事件处理器将有可能导致内存泄露或者是性能下降——你用得越多这种风险就越大。JavaScript事件代理可以把事件处理器添加到一个父元素上，这样就避免了把事件处理器添加到多个子元素上。

（1）它是怎么运作的呢？

事件代理用到了两个JavaSciprt事件特性：事件冒泡以及目标元素。当一个元素上的事件被触发的时候，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；使用事件代理，我们可以把事件处理器添加到一个元素上，等待一个事件从它的子级元素里冒泡上来，并且可以得知这个事件是从哪个元素开始的。

（2）这对我有什么好处呢？

比如说在一个10列、100行的HTML表格里，让其每一个单元格在被点击的时候变成可编辑状态。如果把事件处理器加到这1000个单元格会产生一个很大的性能问题，并且有可能导致内存泄露甚至是浏览器的崩溃。相反地，使用事件代理，你只需要把一个事件处理器添加到table元素上就可以了，这个函数可以把点击事件给截下来，并且判断出是哪个单元格被点击了。

  <div id="div1">
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
  </div>
  <button>
    点击添加一个a 标签
  </button>

    // 事件代理
    const div1 = document.getElementById('div1')
    div1.addEventListener('click',e =>{
      const target = e.target
      if(e.nodeName === 'A'){
        alert(target.innerHtml)
      }
    })```