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事件流:由事件捕获和事件冒泡共同组成
    首先,按照事件捕获阶段顺序传播(不太具体节点 → 最具体节点)
    其次,事件到达目标元素阶段(经过第一次传播,到达具体节点)
    最后,按照事件冒泡阶段顺序传播(最具体节点 → 不太具体节点)
JS事件_第1张图片
图示:三种事件流

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

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

你可能感兴趣的:(JS事件)