事件

作者: 小囧兔 | 来源:发表于2017-06-09 22:08 被阅读0次

JavaScript事件01——事件流
事件对象，事件监听，事件冒泡，事件代理
事件总结
Javascript事件系统
Javascript事件-事件冒泡，事件捕获，事件监听和事件委托
【事件】事件流
【事件】事件对象
【事件】事件类型
2018-09-10JQuery高级应用
JS事件

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

事件是浏览器自身或者用户执行的某种动作，比如click，load等都是事件的名字，响应事件的某个函数就叫做事件处理程序或者事件监听器。
DOM0
DOM0事件处理程序是将一个函数赋值给事件处理程序的属性，每个元素都有自己的事件处理程序属性，这些属性都是小写，如onclick,将元素的属性值设置为一个函数，就可以为元素添加事件处理程序了，如：

   var btn=document.getElementsByClassName("btn")[0];
              btn.onclick=function(){
                console.log("onclick");
              };

DOM0级的方法指定的事件处理程序，可以通过给事件处理程序的属性赋值为null实现，如：

var btn.onclick=null;

将事件处理程序的属性值设为null，之后，点击按钮就不会有任何响应了。

DOM2
DOM2事件定义了addEventListener()和removeEventListener()这两个方法，用于指定和删除事件处理程序的操作，所有DOM节点都包含这两个方法，并且它们都接受三个参数：要处理的事件名、事件处理程序的函数、一个布尔值，布尔值默认是false,表示在事件冒泡阶段处理，如果是true表示在捕获阶段调用事件处理程序。如：

<script>
   var btn=document.getElementsByClassName("btn")[0];
    var handler=function(){
        console.log("dom2");
    };
   //指定事件处理程序
    btn.addEventListener("click",handler,false);
    //删除事件处理程序
   btn.removeEventListener("click",handler,false);
</script>

通过removeEventListener()函数来移除事件处理程序，移除时传入的参数必须与添加处理程序时使用的参数相同，这也意味着通过addEventListener()添加的匿名函数将无法移除，如：

  var btn=document.getElementsByClassName("btn")[0];
  btn.addEventListener("click",function(){
        console.log("dom2");
    },false);
   btn.removeEventListener("click",function(){
       console.log("dom2");
   },false);

虽然使用了相同的参数，但是第二个参数是两个完全不同的函数（即使看起来一样），所以匿名函数无法移除。

DOM0和DOM2的区别：
DOM2可以添加多个事件处理程序，如果DOM0添加几个事件处理程序，后面的程序会覆盖前面的。

2.attachEvent与addEventListener的区别？

1.传入的参数不同
attachEvent的第一参数也是事件处理名称，但是前面有“on”,比如“onclick”,而addEventListener是“click”。参数的个数不同，attachEvent有两个参数，addEventListener有三个参数，通过attachEvent添加的事件处理程序都会被添加到冒泡阶段，而addEventListener的第三个参数可以设置添加的事件处理程序是在捕获阶段还是冒泡阶段处理。
2.添加多个事件时处理的顺序不同
addEventListener添加会按照添加顺序执行，而attachEvent添加多个事件处理程序时顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的，但是添加的多了就无规律了)，所以添加多个的时候，不依赖执行顺序的还好，若是依赖于函数执行顺序，最好自己处理，不要指望浏览器
3.事件处理程序的作用域不相同
addEventListener会在其所属元素的作用域内运行，而attachEvent会在全局作用域中运行，因此attachEvent中的this等于window,

 btn.attachEvent("onclick",function(){
       console.log(this===window);//true
   });

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

IE事件冒泡
IE的事件流叫做事件冒泡，即事件最开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点（文档）。如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ie事件冒泡</title>
</head>
<body>
   <div>点我</div>
</body>
</html>

如果点击了页面中的div元素，那么这个click事件会按照这个顺序传播：
1.<div>
2.<body>
3.<html>
4.document
所以事件首先会在我们点击的<div>元素上发生，然后click事件沿着DOM树逐级向上传播，在每一级的节点都会发生，直到document对象，

Paste_Image.png

DOM2事件
DOM2级事件流的事件流规定了三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。首先发生的是事件捕获，为事件截获提供了机会，然后是实际的目标接收到事件，最后是冒泡阶段，可以在这个阶段对事件做出响应，以下例子为例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom2事件</title>
</head>
<body>
   <div>点我</div>
</body>
</html>

在dom事件流中，实际的目标（上面的<div>元素）在捕获阶段不会接收到事件。这意味着事件从document到<html>再到<body>就停止了。下一个阶段是处于目标阶段，所以事件在<div>上发生，并在事件处理中被看作冒泡阶段的一部分，最后冒泡阶段发生，事件传回文档。

Paste_Image.png

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

bubbles（事件是否冒泡）如果为true时，可以用stopPropagation()方法立即停止事件在DOM层次中的传播，即取消事件进一步捕获或者冒泡，

 var btn=document.getElementById("btn");
 btn.addEventListener("click",function(e){
        console.log("click");
        e.stopPropagation();
    },false);
   document.body.addEventListener("click",function(e){
      console.log("阻止事件冒泡");
   });

上面这个例子如果不调用stopPropagation()，则结果是：

Paste_Image.png

调用stopPropagation()后，只会输出click，因为事件冒泡被阻止了，不会传播到document.body上，因为不会触发这个元素上的事件处理程序，所以后面的"阻止事件冒泡"不会被输出。

当cancelable（是否可以取消事件的默认行为）为true时，可以使用preventDefault()阻止特定事件的默认行为，比如a链接点击时的默认行为就是跳转到href特性指定的URL，如果想阻止这一行为，可以使用preventDefault()。如：

var link=document.getElementById("link");
    link.addEventListener('click',function(e){
        e.preventDefault();
    })

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

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

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>
 var ul=document.querySelector(".ct");
       var btn1=document.querySelector("#btn-add-start");
       var btn2=document.querySelector("#btn-add-end");
       var input=document.querySelector(".ipt-add-content");
       ul.addEventListener('click',function(e){
           var target= e.target;
           console.log(target.innerText);
       });
       btn1.addEventListener('click',function(e){
           var newli=document.createElement("li");
            newli.innerText=input.value;
            var fisrtli=document.querySelector(".ct li");
           if(input.value!==''){
               ul.insertBefore(newli,fisrtli);
           }else{
               alert("请输入非空字符");
           }
       });
       btn2.addEventListener('click',function(e){
        var newli=document.createElement("li");
        newli.innerText=input.value;
           if(input.value!==''){
               ul.appendChild(newli);
           }else {
               alert("请输入非空字符");
           }
       });
    document.body.addEventListener('click',function(){
        input.value="";
    })
</script>

预览

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

  <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{width: 100%;}
        .img-preview{
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
<ul class="ct">
    <li data-img="http://pic.baike.soso.com/p/20140327/20140327161206-845392828.jpghttp://pic.baike.soso.com/p/20140327/20140327161206-845392828.jpg">鼠标放置查看图片1</li>
    <li data-img="http://img4q.duitang.com/uploads/item/201507/10/20150710092553_fmBXh.thumb.700_0.jpeg">鼠标放置查看图片2</li>
    <li data-img="http://img5.duitang.com/uploads/item/201207/07/20120707132350_ceNvj.thumb.600_0.jpeg">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
    var ul=document.querySelector(".ct");
    ul.addEventListener('mouseover',function(e){
        var target= e.target；
        var img=document.querySelector(".img-preview");
        var dataimg=target.getAttribute("data-img");
       //  img.innerHTML='![]('+dataimg+')';
        img.innerHTML='![]('+dataimg+')';
//不明白这里为何要支持mardown语法，不是要显示在浏览器上吗？既然是浏览器那不就是html标签吗？ img.innerHTML='![]('+dataimg+')';这个写法也是得到一个字符串而已。。不懂，我查了很多资料都是写标签 要么设置属性的。
    })
</script>

代码预览

JavaScript事件01——事件流
大纲：概念（事件、事件流）事件流模型（事件冒泡、事件捕获、DOM事件流）一、概念： 1、事件：事件就是用户或浏览...
事件对象，事件监听，事件冒泡，事件代理
一、事件对象二、冒泡事件：（事件从子元素往父级元素向上触发事件）处理兼容问题：主流浏览器：e.stopPropa...
事件总结
DOM事件主要内容事件流事件注册事件对象事件分类事件代理什么是DOM事件? 事件是某个行为或者触发，比...
Javascript事件系统
本文内容事件基础事件监听方式事件默认行为事件冒泡与事件捕获事件绑定与事件委托事件基础注意：本文不会深...
Javascript事件-事件冒泡，事件捕获，事件监听和事件委托
事件处理机制（一）DOM事件流 DOM模型是一个树形结构，在DOM模型中，HTML元素是有层次的。当一个HTML...
【事件】事件流
1、JavaScript和HTML之间的交互通过事件实现的。2、事件流描述的是从页面中接收事件的顺序。3、IE 和...
【事件】事件对象
触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的额信息。（包括导致事件的元...
【事件】事件类型
DOM3 级事件规定了以下几类事件： UI（User Interface，用户界面）事件，当用户与页面上的元素交互...
2018-09-10JQuery高级应用
JQuery事件 window事件鼠标事件键盘事件表单事件事件注册语法$(对象).type(fn)type...
JS事件
?事件的相关术语事件类型：鼠标事件、键盘事件事件名称： click、dbclick等事件目标：表示与发生事件...

事件

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

2.attachEvent与addEventListener的区别？

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

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

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

6.补全代码，要求：

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

相关文章

JavaScript事件01——事件流

事件对象，事件监听，事件冒泡，事件代理

事件总结

Javascript事件系统

Javascript事件-事件冒泡，事件捕获，事件监听和事件委托

【事件】事件流

【事件】事件对象

【事件】事件类型

2018-09-10JQuery高级应用

JS事件

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

事件

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

2.attachEvent与addEventListener的区别？

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

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

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

6.补全代码，要求：

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

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