首页 理论教育JavaScript事件委托:简明指南

JavaScript事件委托:简明指南

【摘要】:图15.10.1事件传递给父元素在父元素接收到事件时,根据event.target判断事件是由哪个子元素触发的。在动手写15.10.1的itemClick事件回调中,通过event.target判断事件触发的子元素,而不需要为两个标题元素都添加事件监听器。事件委托能够大幅减少重复的事件监听器。图15.10.3监听未来元素的事件点击按钮新增一个元素
  • 元素没有设置任何事件监听器,但是通过事件委托,
  • 的父元素
      可以监听任何时间点发生在
    • 元素内的点击事件。
  • 事件委托是事件处理元素的转移,简单地说就是通过父元素监听子元素的事件,子元素不需要设置事件监听器,在子元素上发生的事件会通过事件冒泡向上传递给父元素。

    动手写15.10.1

    执行15.10.1.html,输出结果到网页,如下图所示。

    图15.10.1 事件传递给父元素

    在父元素接收到事件时,根据event.target判断事件是由哪个子元素触发的。在动手写15.10.1的itemClick事件回调中,通过event.target判断事件触发的子元素,而不需要为两个标题元素都添加事件监听器。

    事件委托能够大幅减少重复的事件监听器。比如,列表<ul>有10000个<li>标签,如果为每个<li>标签设置监听器,则需要设置10000次,但是只向父元素<ul>添加事件监听器则只需要1次。

    动手写15.10.2

    执行15.10.2.html,输出结果到网页,如下图所示。(www.chuimin.cn)

    图15.10.2 在父元素监听子元素事件

    在动手写15.10.2中,给<ul>标签添加一个click事件监听器,即可监听全部子元素click事件。

    事件委托能够监听未来的子元素。向父元素设置事件监听器之后,在以后不确定的时间新增的子元素触发事件也会传播到父元素,同样只需要根据event.target就能判断来自哪个子元素。

    动手写15.10.3

    执行15.10.3.html,输出结果到网页,如下图所示。

    图15.10.3 监听未来元素的事件

    点击按钮新增一个元素<li>,<li>元素没有设置任何事件监听器,但是通过事件委托,<li>的父元素<ul>可以监听任何时间点发生在<li>元素内的点击事件。