进阶9
2017-09-29 本文已影响0人
饥人谷_星璇
题目1： DOM0 事件和DOM2级在事件监听使用方式上有什么区别？
- DOM0事件为将一个事件的方法赋值为一个函数，比如btn.onclick = function(){};这种是将btn的点击事件赋值为一个函数。这种方法只能绑定一个函数，如果后面再对此方法赋值的话会造成后面赋值的函数会覆盖前面赋值的函数。
- DOM2级事件定义了两个方法用于处理指定和删除事件处理程序的操作：
1、addEventListener
2、removeEventListener
所有的DOM节点都包含这两个方法，并且它们都接受三个参数：
1.事件类型
2.事件处理方法
3.布尔参数，如果是true表示在捕获阶段调用事件处理程序，如果是false，则是在事件冒泡阶段处理
DOM2级事件赋值的方法不会覆盖之前赋值的方法。
题目2： attachEvent与addEventListener的区别？
- IE并不支持addEventListener和removeEventListener方法，而是实现了两个类似的方法
1、attachEvent
2，detachEvent
这两个方法都接收两个相同的参数
1、事件处理程序名称
2、事件处理程序方法 - 由于IE只支持事件冒泡，所以添加的程序只能选择事件冒泡阶段处理，不能像addEventListener选择在冒泡阶段或者捕获阶段处理，因此少了第三个参数。
- 而且addEventListener的第一个参数的事件类型，attachEvent的都一个参数代表事件处理程序名称。
- addEventListener的作用域是它作用的元素本身，this是指的触发元素，而attachEvent的作用域是全局作用域，this是window。
- 为一个事件添加多个事件处理程序时，执行顺序不同，addEventListener添加会按照添加顺序执行，而attachEvent添加多个事件处理程序时顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的，但是添加的多了就无规律了)，所以添加多个的时候，不依赖执行顺序的还好，若是依赖于函数执行顺序，最好自己处理，不要指望浏览器
题目3： 解释IE事件冒泡和DOM2事件传播机制？
- 事件流描述的是从页面中接收事件的顺序，目前主要有三种模型：
1、事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素，IE的事件冒泡也是这样。
2、事件捕获：不太具体的节点更早接收事件，而最具体的元素最后接收事件，和事件冒泡相反
3、DOM事件流：DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段
题目4：如何阻止事件冒泡？ 如何阻止默认事件？
- 阻止事件冒泡：
1、标准时间模型中使用stopPropagation()；
2,、在IE事件模型中将cancelBubble设置为true,默认值为false; - 阻止默认事件:
1、标准事件模型中使用preventDefault()；
2,、在IE事件模型中将returnValue设置为false,默认值为true;
题目5：有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<script>
var exhLi = document.querySelectorAll(".ct li")
for(var i=0;i<exhLi.length;i++){
exhLi[i].addEventListener('click',function(){
console.log(this.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 exhCt = document.querySelector(".ct"),
addContent = document.querySelector(".ipt-add-content"),
addStart = document.querySelector("#btn-add-start"),
addEnd = document.querySelector("#btn-add-end");
addStart.addEventListener("click",function(){
if(addContent.value){
var newli = document.createElement('LI'),
newliContent = document.createTextNode(addContent.value);
newli.appendChild(newliContent)
exhCt.insertBefore(newli,exhCt.firstChild)
}else{
alert("请输入内容")
}
})
addEnd.addEventListener("click",function(){
if(addContent.value){
var newli = document.createElement('LI'),
newliContent = document.createTextNode(addContent.value);
newli.appendChild(newliContent);
exhCt.appendChild(newli);
}else{
alert("请输入内容")
}
})
</script>
题目7： 补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。
<ul class="ct">
<li data-img="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506634835121&di=d6a0527ecd212e54c65140a03b9c777b&imgtype=0&src=http%3A%2F%2Fwww.people.com.cn%2Fmediafile%2Fpic%2F20141114%2F68%2F13722014631559806976.jpg">鼠标放置查看图片1</li>
<li data-img="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506634857398&di=821a399d8511b9a8fcac839372e5b999&imgtype=0&src=http%3A%2F%2Fpic2.duowan.com%2Fwow%2F1001%2F128450260452%2F128453038627.jpg">鼠标放置查看图片2</li>
<li data-img="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506634891147&di=60c0c74029d33815f6fc5f31f6e49cdf&imgtype=0&src=http%3A%2F%2Fatt.bbs.duowan.com%2Fforum%2F201204%2F24%2F224551ggtclcphxt2g2slk.jpg">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
var ct = document.querySelector(".ct"),
ctimg = document.querySelectorAll(".ct li"),
imgPre = document.querySelector(".img-preview");
for(i=0;i<ctimg.length;i++){
ctimg[i].addEventListener("mouseenter",function(){
newimg = document.createElement("img");
dataimg = this.getAttribute('data-img');
newimg.setAttribute('src',dataimg);
imgPre.appendChild(newimg);
})
ctimg[i].addEventListener("mouseleave",function(){
imgPre.removeChild(imgPre.firstChild);
})
}
</script>
