事件

2017-07-05 本文已影响24人好好顽

题目1： DOM0 事件和DOM2级在事件监听使用方式上有什么区别？

DOM0级事件监听就是把一个方法赋值给一个元素的事件处理程序属性。将这些属性的值设置为一个函数，就可以指定事件处理程序。一个事件只能绑定一次，并且新方法会覆盖老方法。例如btn.onclick=function(){}
DOM2级事件监听定义了两个方法用于处理指定和删除事件处理程序的操作：addEventListener、removeEventListener。所有的DOM节点都包含这两个方法，并且它们都接受三个参数：事件类型、事件处理方法、布尔参数。例如addEventListener、removeEventListener。可以选择按照冒泡的顺序处理还是捕获的顺序处理。

题目2： attachEvent与addEventListener的区别？

参数不同。addEventListener有三个参数，attachEvent只有两个，attachEvent添加的事件处理程序只能发生在冒泡阶段，addEventListener第三个参数可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理（我们一般为了浏览器兼容性都设置为冒泡阶段）
事件名不同。attachEvent第一个参数事件名前要加on，比如el.attachEvent('onclick', handleClick);
第一个参数意义不同，addEventListener第一个参数是事件类型（比如click，load），而attachEvent第一个参数指明的是事件处理函数名称（onclick，onload）
事件处理程序的作用域不相同，addEventListener的作用域是元素本身，this是指的触发元素，而attachEvent事件处理程序会在全局变量内运行，this是window，所以会返回undefined，而不是元素id。
为一个事件添加多个事件处理程序时，执行的顺序不同。 addEventListener 会按照添加的顺序执行。 attachEvent 添加多个事件处理程序时，顺序是无规律的。

题目3：解释IE事件冒泡和DOM2事件传播机制？

IE事件冒泡：事件由目标元素接收，然后逐级向上传播到到最不具体的元素
DOM2事件传播：总共可以分为三个阶段：事件捕获阶段、目标阶段和事件冒泡阶段；首先发生的是事件捕获，为截获事件提供机会，然后是实际目标接收事件，最后是事件冒泡阶段

题目4：如何阻止事件冒泡？如何阻止默认事件？

如果使用的是addEventListener添加的事件，通过调用event对象的stopPropagation();来阻止冒泡，通过preventDefault()阻止默认事件
如果使用的是attachEvent添加的事件，通过cancelBubble阻止冒泡，通过returnValue取消默认事件

题目5：有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<script>
//todo ...
  let ct =document.querySelector('.ct')
  ct.addEventListener('click',function(e){
    console.log(e.target.innerHTML)
  })
</script>

题目6：补全代码，要求：

当点击按钮开头添加时在li元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在最后一个 li 元素后添加用户输入的非空字符串.
当点击每一个元素li时控制台展示该元素的文本内容。
http://js.jirengu.com/devowayaqu/1/edit?html,console,output

题目7：补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="task22-3" />
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
  
  </style>
</head>
<body>

<ul class="ct">
    <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg">鼠标放置查看图片1</li>
    <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg">鼠标放置查看图片2</li>
    <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
var ct = document.querySelector('.ct')
    var preview = document.querySelector('.img-preview')
    ct.addEventListener('mouseover',function(e){
        var image = document.createElement('img')
        image.src = e.target.dataset.img
        preview.appendChild(image)
    })
    ct.addEventListener('mouseout',function(e){
        preview.innerHTML = ''
    })
  
  //也可以考虑不使用循环，用事件代理把事件绑定到父元素上，想想怎么实现
</script>


</body>
</html>

事件

猜你喜欢

热点阅读