JS事件

• 关键词：事件

通过 “事件” 实现JavaScript和HTML的交互

---

1. DOM0事件和DOM2级在事件监听使用方式上有何区别？

事件处理程序（事件监听器）有以下几种：
(1)HTML事件处理程序；(2)DOM0级事件处理程序；
(3)DOM2级事件处理程序；(4)IE事件处理程序；

• （1）HTML事件处理程序

• 元素支持的每种事件，都可以使用一个HTML属性来指定：该属性与相应事件处理程序同名；该属性的值应该是，可执行的 JavaScript 代码

• 本质：直接将事件添加至HTML结构里的HTML元素上

• 在HTML事件处理程序中，可包含要执行的具体动作，也可调用在页面其它地方定义的脚本（封装的函数）

• 缺点
  (1)HTML代码和JS代码紧密耦合，不便于维护，所以不推荐使用
  (2)当事件处理程序未完成加载，此时用户触发事件，就会报错

• （2）DOM0级事件处理程序

• 通过JS指定事件处理程序，这是一种传统方式：将一个函数，赋值给一个事件处理程序的属性。这种方式具有跨浏览器的优势。

• 每个元素都有自己的事件处理程序属性，这些属性通常全部小写，将这种属性的值设置为一个函数，就可以指定事件处理程序

• 一般步骤：这种添加事件的方法叫做DOM0级事件处理程序
  1.在JS中取得元素对象
  2.给元素对象添加事件属性
  3.给元素对象删除事件属性

• 缺点
  可同时绑定几个不同的事件，但不能同时绑定多个相同的事件：围绕同一事件只能添加一个事件处理程序，否则会发生覆盖，最终结果只执行最后一个事件处理程序

• （3）DOM2级事件处理程序

• 定义两个方法专门用于添加事件处理程序（addEventListener()）和删除事件处理程序（removeEventListener()）

• 所有的DOM节点都包含这两个方法，并且它们都接受三个参数：
  1.事件类型, 2.事件处理程序的函数, 3.布尔值（用于设置事件触发阶段：冒泡或捕获）

• 注意：此种方法存在兼容问题，IE8及以下不支持

• 好处：围绕同一事件可添加多个事件处理程序，并按照事件被添加的顺序触发

• （4）IE事件处理程序

• IE实现了与DOM2级类似的两个方法：添加事件处理程序（attachEvent()）和删除事件处理程序（detachEvent()）

• 这两个方法接受两个参数
  1.事件处理程序的名称, 2.事件处理程序的函数
  注：IE8及以下仅支持事件冒泡，所以不存在布尔值这个参数

• 与上述三种事件处理程序不同，IE事件处理程序的this指向window，而非被绑定事件的元素

2. addEventListener()与attachEvent()的区别？

• 1 接受参数数量不同
• addEventListener()接受三个参数：1事件类型, 2事件处理方法, 3布尔参数
• attachEvent()接受两个参数：1事件处理程序名称, 2事件处理程序方法
• 2 第一个参数意义不同
• addEventListener()：第一个参数为 “事件类型” ，例如 click
• attachEvent()：第一个参数为 “事件处理程序名称” ，例如 onclick
• 3 事件处理程序的作用域不同
• addEventListener()：作用域是元素本身，this是指的触发元素
• attachEvent()：作用域处于全局作用域下，this是window
• 4 为一个事件添加多个事件处理程序时，执行顺序不同
• addEventListener()：按照添加顺序执行
• attachEvent()：执行顺序无规律

3. 解释IE事件冒泡和DOM2事件传播机制？

• 事件：是文档或浏览器窗口中发生的，特定的交互瞬间（HTML 和 JS 都是通过事件进行交互）
• 事件流：描述的是从页面中接受事件的顺序——

事件发生时，会在元素节点（触发源）与整个文档节点之间按照特定的顺序传播，
事件所经过的路径上的所有节点都会感知到该事件，这个传播过程即 DOM 事件流。

• 事件流传播顺序
• IE事件冒泡：事件最开始，由最具体的元素接收（文档中嵌套层次最深的那个节点），然后逐级向上传播至最不具体的那个节点（document 文档）
• Netscape事件捕获：事件最开始，不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件
• DOM2事件流：由事件捕获和事件冒泡共同组成
  首先，按照事件捕获阶段顺序传播（不太具体节点 → 最具体节点）
  其次，事件到达目标元素阶段（经过第一次传播，到达具体节点）
  最后，按照事件冒泡阶段顺序传播（最具体节点 → 不太具体节点）

图示：三种事件流

4. 如何阻止事件冒泡？ 如何阻止默认事件？

• 阻止冒泡
• 阻止冒泡，相当于拦截事件：在某个节点终止事件传播，致使传播路径上该节点的后续元素无法感知到该事件
• DOM中：可以调用方法stopPropagation()
• IE中：可以进行赋值：cancelBubble（默认为false，设置为true后可以取消事件冒泡）
• 阻止默认事件
• 与转义符号的功能有些相似，即：使目标自身的特殊功能失效
• DOM中：可以调用方法preventDefault()
• IE中：可以进行赋值：returnValue（默认为true，设为false可以取消事件默认行为）

5. 补全JS代码

• 要求当点击每一个元素li时控制台展示该元素的文本内容（不考虑兼容）

• 思路：为目标元素添加事件处理程序，当发生事件时，执行对应函数

• 示例预览

    
这里是
    
饥人谷
    
前端6班

6. 补全JS代码

• 当点击按钮开头添加时在第一个li元素前添加一个新元素

• 当点击按钮结尾添加时在最后一个 li 元素后添加一个新元素

• 当点击每一个元素li时控制台展示该元素的文本内容。

• 思路：1创建一个新元素；2获取用户输入；3添加元素到页面指定位置

• 示例预览：输入内容为非空字符串

    
这里是
    
饥人谷
    
任务班


开头添加
结尾添加

7. 补全代码

• 要求：当鼠标放置在 li元素 上，会在 img-preview 里展示当前 li元素 的 data-img 对应的图片

• 思路：1获得触发源的 data-img 属性值；2组装HTML结构放到指定位置

• 示例预览

    
鼠标放置查看图片1
    
鼠标放置查看图片2
    
鼠标放置查看图片3

本文章著作权归饥人谷和作者所有，转载须说明来源！