:::info 事件委托是利用事件冒泡原理，管理某一类型的所有事件，利用父元素来代表子元素的某一类型事件的处理方式。 :::

已有元素的事件绑定

• 场景：假如页面上有一个ul标签，里面包含1000个li子标签，我们需要在单击每个li时，输出li中的文本内容。

  • 遇到这样的场景时，很多人的第一想法就是给每个li标签绑定一个click事件，在click事件中输出li标签的文本内容，以下是一些简单易懂的实现方法。
    • 事件处理程序过多导致页面交互时间过长。
    • 事件处理程序过多导致内存占用过多。
  • 事件委托机制
    • 事件委托机制的主要思想是将事件绑定至父元素上，然后利用事件冒泡原理，当事件进入冒泡阶段时，通过绑定在父元素上的事件对象来判断当前事件流正在进行的元素。如果和期望的元素相同，则执行相应的事件代码。

      新创建元素的事件绑定

• 绑定方式

  • 手动绑定方法- 遍历元素，添加事件。
• 事件委托方法
  • 使用事件委托机制，我们可以更加方便快捷地实现新创建元素的事件绑定。由于事件委托机制是利用的事件冒泡机制，即使在元素自身没有绑定事件的情况下，事件仍然会冒泡到父元素中，因此对于新增的元素，只要处理事件流就可以触发其事件。

文档加载完成事件

• 在DOM中，文档加载完成有两个事件，一个是load事件，在原生JavaScript和jQuery中均有实现；另一个是jQuery提供的ready事件。
  • ready事件的触发表示文档结构已经加载完成，不包含图片、flash等非文字媒体内容。
  • onload事件的触发表示页面中包含的图片、flash等所有元素都加载完成。

    load事件

    :::info load事件会在页面、脚本或者图片加载完成后触发 ::: 如果load事件用于页面初始化，则有两种实现方式。
    第一种方式是在body标签上使用onload属性，类似于onclick属性的设置，其实就是DOM0级事件处理程序。
    第二种方式是设置window对象的onload属性，属性值为一个函数。

    ready事件

    :::info ready事件不同于load事件，ready事件只需要等待文档结构加载完成就可以执行。 ::: 拿上面的例子来说，针对一个图片网站，使用ready事件，我们只需要等待HTML中的所有的img标签加载完成就可以执行初始化操作，而不需要等到img标签的src属性完全加载出来。
    这样将节省很长的等待时间，对性能来说是一大提升。
    因此在很多场景中，我们更推荐在ready事件中做初始化处理。
    需要注意的是，ready事件并不是原生JavaScript所具有的，而是在jQuery中实现的，ready事件挂载在document对象上。

加载完成事件的执行顺序

• 页面加载完成一共有5种处理方式。

  • 使用jQuery的$(document).ready(function () {…})。
  • 使用jQuery的$(function () {…})，其实是上一种方式的简写。
  • 使用jQuery的$(window).load(function(){…})。
  • 使用原生JavaScript的window.onload= function(){…}。
  • 在body标签上使用onload属性，代码如下所示。

• 执行顺序结论。

  • 使用jQuery的ready事件总会比load事件先执行，jQuery提供的ready事件的两种形式其实是等效的，定义在前面的会先执行。
  • load事件的执行顺序取决于方法定义中的位置，当将script标签写在body标签中时，方式4中window.onload会比方式3中jQuery的load()函数先执行。
  • 写在body标签中的onload属性优先级会高于window.onload属性。
  • 方式4中window.onload与方式3中jQuery的load()函数，是谁先定义则谁先执行。由于load事件执行顺序有很大的不同，因此在使用load事件做页面加载完成处理时需要特别注意。