事件

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

DOM0事件是将一个函数赋值给一个事件处理程序属性：
例如：var a.onclick = function（）{}
DOM2是给一个事件添加一个处理程序，而且可以添加多个处理程序
a.addEventListener( 'click' , function(e){ console.log(e); } )

attachEvent与addEventListener的区别？

1. attachEvent在IE上使用，addEventListener在标准流里使用
2. attachEvent里面的作用域是全局作用域，this指window，addEventListener里this指当前
3. attachEvent里面函数执行顺序从下往上，addEventListener则是从上往下
4. attachEvent的事件相对于addEventListener要加一个on
5. attachEvent（）括号里面只能添加两个参数，事件和处理函数，addEventListener则可以添加三个，事件、函数、监听方式（true/false），true代表事件捕获阶段处理事件，为false的话在冒泡阶段处理事件，默认为false。

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

IE事件冒泡：就是事件从下往上传播，事件由最开始接收的节点开始，往上一级一级传播
DOM2事件传播机制：DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段

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

阻止冒泡：添加一个e.stopPropagation()的事件，IE的话添加cancelBubble：true
标准流阻止默认事件：e.preventDefault() IE：window.event.returnValue：false

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

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

补全代码，要求：

当点击按钮开头添加时在<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> function $(cls){ return document.querySelector(cls); } $(".ct").addEventListener("click",function(e){ if(e.target.tagName.toLowerCase() ==="li"){ console.log(e.target.innerText); } }); $("#btn-add-end").addEventListener("click",function(e){ var newLi = document.createElement("li"); newLi.innerText = $(".ipt-add-content").value ; $(".ct").appendChild(newLi); }); $("#btn-add-start").addEventListener("click",function(e){ var newLi = document.createElement("li"); newLi.innerText = $(".ipt-add-content").value ; $(".ct").insertBefore(newLi,$(".ct").firstChild); }); </script>

补全代码，要求：当鼠标放置在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> function $(cls){ return document.querySelector(cls); } $(".ct").addEventListener("mouseover",function(e){ if(e.target.tagName.toLowerCase() ==="li"){ var newImg = document.createElement("img"); newImg.innerHTML = e.target.data-img ; $(".img-preview").appendChild(newImg); } }); $(".ct").addEventListener("mouseout",function(e){ if(e.target.tagName.toLowerCase() ==="li"){ newImg.innerHTML = "" ; } }); </script>