事件

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

  1. DOM0 事件:使用onClick方法直接添加事件

<input id="btn" type="button" value="click here"/> <script type="text/javascript"> var btn=document.getElementById("btn"); //添加事件 btn.onclick=function(){ console.log(this.id); }; //删除事件 btn.onclick=null; </script>

使用DOM0级方法指定的事件处理程序被认为是元素的方法,此时事件处理程序是在元素的作用域里中运行,所以此时this指向的是元素本身。而且这种添加方式的缺陷是,只能存在一个处理程序,如果再次向同一个元素添加另外一个处理程序,上一个处理程序会被覆盖。

  1. DOM2级事件:使用addEventListener和removeEventListener来添加事件和删除事件。

<input id="btn" type="button" value="click here"/> <script type="text/javascript"> var btn=document.getElementById("btn"); //添加事件 btn.addEventListener("click",function(){ console.log(this); }); //删除事件 btn.removeEventListener("click",function(){ console.log(this); }); </script>

2.attachEvent与addEventListener的区别?

  • addEventListener是DOM2的添加事件方法(也是目前的标准),attachEvent只是老IE(IE6,7)的方法;

  • 参数个数不同,addEventListener有3个参数(事件类型,处理方法,是否拦截),而attachEvent只有2个参数(事件类型,处理方法);

  • 第一个参数名称不一致:addEventListener的事件类型参数为'click','dblclick'等(type);而attachEvent的事件类型参数为'onclick','ondblclick'等(on+type);

  • 事件流不一样,addEventListener通过设置第三个参数可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理(我们一般为了浏览器兼容性都设置为冒泡阶段);而attachEvent的事件处理只能在冒泡阶段;

  • 事件处理程序的作用域不相同:addEventListener的作用域是元素本身,this是指的触发元素,而attachEvent事件处理程序会在全局变量内运行,this是window;

  • 为一个事件添加多个事件处理程序时,执行顺序不同:addEventListener添加会按照添加顺序执行,而attachEvent添加多个事件处理程序时顺序无规律。

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

  • IE事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的元素;

  • DOM2事件传播机制:DOM2级事件规定事件流包括三个阶段,事件捕获阶段,处于目标阶段,事件冒泡阶段,首先发生的是事件捕获,为截取事件提供机会,然后是实际目标接收事件,最后是冒泡阶段;


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

1.对于DOM的事件对象
stopPropagation() // 取消事件进一步捕获或冒泡
preventDefault() // 取消事件默认行为

2.对于IE
cancelBubble // 默认为false,设置为true后可以取消事件冒泡
returnValue // 默认为true,设为false可以取消事件默认行为

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

<ul class="ct"> <li>这里是</li> <li>饥人谷</li> <li>前端6班</li> </ul>
<script> var ct=document.getElementsByClassName("ct")[0]; ct.addEventListener("click",function(e){ if(e.target.tagName.toLowerCase()==="li"){ console.log(e.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 ct=document.querySelector(".ct"); var ipt=document.querySelector(".ipt-add-content"); var start=document.querySelector("#btn-add-start"); var end=document.querySelector("#btn-add-end"); ct.addEventListener("click",function(e){ if(e.target.tagName.toLowerCase()==="li"){ console.log(e.target.innerText); } }); start.addEventListener("click",function(){ var text=ipt.value; if(/^\s*$/.test(text)){ alert("输入内容不能为空!"); }else{ nodeLi=document.createElement("li"); nodeLi.innerText=text; ct.insertBefore(nodeLi,ct.firstChild); } }); end.addEventListener("click",function(){ var text=ipt.value; if(/^\s*$/.test(text)){ alert("输入内容不能为空!"); }else{ nodeLi=document.createElement("li"); nodeLi.innerText=text; ct.appendChild(nodeLi); } }); </script>

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

<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'), childs = ct.querySelectorAll('li'), preview = document.querySelector('.img-preview');
for(var i=0; i<childs.length; i++){ childs[i].addEventListener('mouseenter', function(){ var dataImg = this.getAttribute('data-img'); preview.innerHTML = '![](' + dataImg + ')' }); } </script>

8.在 github 上创建个人项目,把视频里事件兼容的函数写法放入项目,在 Readme.md里描述项目(选做题目)

github

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,378评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,356评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,702评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,259评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,263评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,036评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,349评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,979评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,469评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,938评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,059评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,703评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,257评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,262评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,485评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,501评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,792评论 2 345

推荐阅读更多精彩内容

  • DOM0级和DOM2级在事件监听使用方式上有什么区别? DOM0级事件监听:用JavaScript指定事件处理程序...
    LeeoZz阅读 368评论 0 1
  • 问答 一、dom对象的innerText和innerHTML有什么区别? innerTextinnerText是一...
    婷楼沐熙阅读 398评论 0 0
  • 1.dom对象的innerText和innerHTML有什么区别? innerText是一个可写属性,返回元素内包...
    GarenWang阅读 452评论 0 0
  • 题目1: DOM0 事件和DOM2级在事件监听使用方式上有什么区别? Dom0级Dom0级事件处理程序是将一个函数...
    QQQQQCY阅读 316评论 0 0
  • 钰妍柔媚的小脸上挂着愠色,款款开口道:“臣妾这么做,都是为了姐姐着想。 姐姐这次差点丢了性命,那些随身伺候的婢女自...
    子敬wu阅读 344评论 0 1