进阶任务9（主线任务）：事件

2017-12-28 本文已影响32人 _小黑

题目1： DOM0 事件和DOM2级在事件监听使用方式上有什么区别？
DOM0通过 JavaScript 指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。这种为事件处理程序赋值的方法是在第四代 Web 浏览器中出现的，而且至今仍然为所有现代浏览器所支持。原因一是简单，二是具有跨浏览器的优势。要使用 JavaScript 指定事件处理程序，首先必须取得一个要操作的对象的引用。但是，后添加的事件处理程序会覆盖掉之前添加的处理程序，只能有一个是有效的。

DOM2的事件监听
DOM2中通过addEventListener()添加事件监听，通过removeEventListener()来移除事件监听

var btn=document.quertSelector(".mybtn")
btn.addEventListener('click',showMessage,false)
btn.removeEventListener('click',showMessage,false)

实现了js和html分离，也可以绑定多个元素

btn.addEventListener('click',showMessage,false)
btn.addEventListener('click',showMessage2,false)
btn.addEventListener('click',showMessage3,false)

题目2： attachEvent与addEventListener的区别？
attachEvent() 作用于IE中，接受两个参数:事件处理程序名称与事件处理程序函数。由于 IE8 及更早版本只支持事件冒泡，所以通过 attachEvent()添加的事件处理程序都会被添加到冒泡阶段。
attachEvent()的第一个参数是on+参数，在使用 attachEvent()方法的情况下，事件处理程序会在全局作用域中运行，因此 this 等于 window。
addEventListener() 接受三个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是 true，表示在捕获阶段调用事件处理程序;如果是 false，表示在冒泡阶段调用事件处理程序。

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

IE 的事件流叫做事件冒泡(event bubbling)，即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级向上传播到较为不具体的节点(文档)。以下面的 HTML 页面为例:

<!DOCTYPE html>
    <html>
    <head>
        <title>Event Bubbling Example</title>
    </head>
    <body>
        <div id="myDiv">Click Me</div>
    </body>
    </html>

如果你单击了页面中的<div>元素，那么这个 click 事件会按照如下顺序传播: (1) <div>
(2) <body>
(3) <html>
(4) document
也就是说，click 事件首先在<div>元素上发生，而这个元素就是我们单击的元素。然后，click 事件沿 DOM 树向上传播，在每一级节点上都会发生，直至传播到 document 对象。图 13-1 展示了事件冒泡的过程。
图 13-1

image.png

所有现代浏览器都支持事件冒泡，但在具体实现上还是有一些差别。IE5.5 及更早版本中的事件冒泡会跳过<html>元素(从<body>直接跳到 document)。IE9、Firefox、Chrome 和 Safari 则将事件一直冒泡到 window 对象。

DOM2事件“DOM2级事件”规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。以前面简单的 HTML 页面为例，单击<div>元素会按照图13-3所示顺序触发事件。

image.png

在 DOM 事件流中，实际的目标(<div>元素)在捕获阶段不会接收到事件。这意味着在捕获阶段，事件从 document 到<html>再到<body>后就停止了。下一个阶段是“处于目标”阶段，于是事件在<div> 上发生，并在事件处理中被看成冒泡阶段的一部分。然后，冒泡阶段发生，事件又传播回文档。
多数支持 DOM 事件流的浏览器都实现了一种特定的行为;即使“DOM2 级事件”规范明确要求捕获阶段不会涉及事件目标，但 IE9、Safari、Chrome、Firefox 和 Opera 9.5 及更高版本都会在捕获阶段触发事件对象上的事件。结果，就是有两个机会在目标对象上面操作事件。

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

DOM中用stopPropagation()阻止事件冒泡，用preventDefault()阻止默认事件，在IE中可以设置cancelBubble为true阻止冒泡，设置returnValue为false阻止默认事件

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

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<script>
//todo ...
</script>

方法一：

 var ele = document.querySelectorAll(".ct li");
      
      ele.forEach(function(e){
        console.log(e);
        e.addEventListener("click", function(){
         console.log(this.innerText);})})

方法二：

var list = document.getElementsByClassName('ct')[0].getElementsByTagName("li");
      for(var i = 0;i < list.length; i++){
        list[i].addEventListener("click",function(){
            console.log(this.innerText);
        })
      }

方法三：

var element = document.querySelector(".ct");
      element.addEventListener("click",function(e){
          var target = e.target;
          console.log(target.innerText);
      })

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

当点击按钮开头添加时在<li>这里是</li>元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在最后一个 li 元素后添加用户输入的非空字符串.
当点击每一个元素li时控制台展示该元素的文本内容。

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>任务班</li>
</ul>
<input class="ipt-add-content" placeholder="添加内容"/>
<button id="btn-add-start">开头添加</button>
<button id="btn-add-end">结尾添加</button>
<script>
//你的代码
</script>

var firstLi = document.querySelector(".ct li");
        var input = document.querySelector(".ipt-add-content");
        var ct = document.querySelector(".ct");
        var lastButton = document.querySelector("#btn-add-end")
            ct.addEventListener("click",function(e){
            var target = e.target;
            console.log(target.innerText);
        });
        var firstButton = document.querySelector("#btn-add-start");
        firstButton.addEventListener("click", function(){
        if(!input.value){ }
        else{
            var newLi = document.createElement("li"); 
            newLi.innerText = input.value;

            ct.insertBefore(newLi,firstLi);
        }});
        lastButton.addEventListener("click",function(){
            if(!input.value){}
                else{
                    var newli = document.createElement("li");
                    newli.innerText = input.value;
                    ct.appendChild(newli);
                }
        })

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

<ul class="ct">
    <li data-img="1.png">鼠标放置查看图片1</li>
    <li data-img="2.png">鼠标放置查看图片2</li>
    <li data-img="3.png">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
//你的代码
</script>

var imgPreview = document.getElementsByClassName("img-preview")[0];
      var ct = document.getElementsByClassName("ct")[0];
      ct.addEventListener("mouseover",function(e){
          var target = e.target;
          console.log(e.target);

         var dataImg = target.getAttribute("data-img");
          imgPreview.innerHTML = '<img src ="'+ dataImg +'">'

进阶任务9（主线任务）：事件

猜你喜欢

热点阅读