DOM事件

  • 1 DOM0 事件和DOM2级在事件监听使用方式上有什么区别?

Dom0事件将函数赋值给事件处理程序属性。此时的事件处理程序会被认为是元素的方法。事件处理程序会在元素的作用域中运行,this指向当前元素.
添加多个事件处理程序会被覆盖,执行最后一个


Dom2定义了两个方法,用于处理删除和指定事件的处理程序的操作:addEventListener() 和 removerEventListener();
与Dom0相比可以给一个元素添加多个相同或不同的事件处理,this指向元素本身



  • 2 attachEvent与addEventListener的区别?
  1. IE事件处理程序attachEvent: 事件处理程序会在全局中运行,因此this=window
    IE8以及更早版本只支持事件冒泡
    事件类型加on
    添加2个相同的事件会先执行后一个,在执行前一个
    第二个参数为处理函数,主要加函数名。否则无法删除

2.非IE事件处理程序addEventListner: 事件处理程序在其依赖的元素的作用域运行,与IE相反
与IE相对应不仅支持事件冒泡,还支持事件捕获.称事件流
addEventLister()的第三个参数可以修改冒泡或者捕获
第二个参数为处理函数,主要加函数名。否则无法删除

  • 3 解释IE事件冒泡和DOM2事件传播机制?
DOM事件_第1张图片
qq 20170511000152

IE事件冒泡重element2->element1->body->html
IE的事件流事件冒泡,从嵌套最深的节点接收逐级向上传播到根节点

DOM事件_第2张图片
qq 20170511000201

DOM2级事件规定的事件流包括3个阶段:事件捕获阶段 处于目标阶段 冒泡阶段
首先发生的是事件捕获,为截获事件提供了机会。然后是实际的目标接受事件。最后一个阶段是冒泡阶> >段,可以在这个阶段对时间对出响应

  • 4:如何阻止事件冒泡? 如何阻止默认事件?
非IE阻止事件冒泡:e.stopPropagation()
非IE阻默认事件   e.preventDefault()

IE阻止事件冒泡:e.cancelable
IE阻默认事件   e.returnValue
  • 5 有如下代码,要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容
    代码地址
  • 这里是
  • 饥人谷
  • 前端6班
  • 6 补全代码,要求:当点击按钮开头添加时在
  • 这里是
  • 元素前添加一个新元素,内容为用户输入的非空字符串;当点击结尾添加时在最后一个 li 元素后添加用户输入的非空字符串.
    当点击每一个元素li时控制台展示该元素的文本内容。
    代码地址
  • 这里是
  • 饥人谷
  • 任务班
  • 7 补全代码,要求:当鼠标放置在li元素上,会在img-preview里展示当前li元素的data-img对应的图片。
    代码地址
  • 鼠标放置查看图片1
  • 鼠标放置查看图片2
  • 鼠标放置查看图片3
  • 8

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