事件

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>

代码预览

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 158,233评论 4赞 360
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,013评论 1赞 291
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 108,030评论 0赞 241
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,827评论 0赞 204
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,221评论 3赞 286
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,542评论 1赞 216
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,814评论 2赞 312
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,513评论 0赞 198
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,225评论 1赞 241
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,497评论 2赞 244
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,998评论 1赞 258
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,342评论 2赞 253
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 32,986评论 3赞 235
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,812评论 0赞 194
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,560评论 2赞 271
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,461评论 2赞 266

推荐阅读更多精彩内容

  • 《JavaScript 闯关记》之事件
    JavaScript 程序采用了异步事件驱动编程模型。在这种程序设计风格下，当文档、浏览器、元素或与之相关的对象发...
    劼哥stone阅读 1,232评论 3赞 11
  • JS中DOM0,DOM2,DOM3级事件模型解析
    声明：本文来源于http://www.webzsky.com/?p=731我只是在这里作为自己的学习笔记整理一下（...
    angryyan阅读 6,772评论 1赞 6
  • Dom、事件
    一、问答 1. dom对象的innerText和innerHTML有什么区别？ innerHTML： 也就是从对象...
    饥人谷_罗伟恩阅读 566评论 0赞 2
  • 事件相关
    如何批量操作 css 如何获取 DOM 计算后的样式 使用getComputedStyle获取元素计算后的样式 实...
    _Dot912阅读 535评论 1赞 3
  • 事件
    事件 JavaScript和HTML的交互是通过事件实现的。JavaScript采用异步事件驱动编程模型，当文档、...
    徐国军_plus阅读 545评论 0赞 2