题目1： DOM0 事件和DOM2级在事件监听使用方式上有什么区别？
- DOM0事件直接给元素的事件属性赋值来设置事件监听，如下所示
<div onclick='function(){}'></div>
- DOM2级通过元素的addEventListener方法添加事件监听，如下所示
var btn = querySelector(#btn);
btn.addEventListener(function(e){});
题目2： attachEvent与addEventListener的区别？
- 参数个数不同：addEventListener有三个参数，attachEvent只有两个，attachEvent添加的事件处理程序只能发生在冒泡阶段，addEventListener第三个参数布尔值可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理；且第一个参数意义不同：addEventListener第一个参数是事件类型（比如click，load），而attachEvent第一个参数指明的是事件处理函数名称（onclick，onload）；
- 事件处理程序的作用域不相同：addEventListener的作用域是元素本身，this是指的触发元素，而attachEvent事件处理程序会在全局变量内运行，this是window；
- 为一个事件添加多个事件处理程序时：执行顺序不同，addEventListener添加会按照添加顺序执行，而attachEvent添加多个事件处理程序时顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的，但是添加的多了就无规律了)
- attachEvent适用于IE，而addEventListener适用于所有其它主流浏览器。
题目3： 解释IE事件冒泡和DOM2事件传播机制？
- IE事件冒泡：一开始由最具体的元素接受事件，然后逐级向上传递到较为不具体的事件。
- DOM2事件传播机制：DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段。
题目4：如何阻止事件冒泡？ 如何阻止默认事件？
对于兼容DOM2级事件传播方式的浏览器，事件处理函数会传入一个event对象，调用event.stopPropagation()方法阻止事件继续传播，调用event.preventDefault()取消默认事件。对于老版本IE来说，设置event对象的cancelBubble位true来取消事件冒泡，设置returnValue的值为false来取消默认事件。
题目5：有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<script>
var ct = document.querySelector('.ct');
ct.addEventListener('click',function(event){
var x = event.target.innerText;
console.log(x);
},false)
</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 btnStart = document.querySelector('#btn-add-start');
btnStart.addEventListener('click',function(event){
if(document.querySelector('.ipt-add-content').value){
addStart();
}
},false);
//结尾添加
var btnEnd = document.querySelector('#btn-add-end');
btnEnd.addEventListener('click',function(event){
if(document.querySelector('.ipt-add-content').value){
addEnd();
}
},false);
//控制台显示文本内容
var ct = document.querySelector('.ct');
ct.addEventListener('click',function(event){
var x = event.target.innerText;
console.log(x);
});
function addStart(){
var iptCt = document.querySelector('.ipt-add-content').value;
var newLi = document.createElement('li');
var liText = document.createTextNode(iptCt);
newLi.appendChild(liText);
var list = document.querySelector('.ct');
list.insertBefore(newLi,list.childNodes[0]);
}
function addEnd(){
var iptCt = document.querySelector('.ipt-add-content').value;
var newLi = document.createElement('li');
var liText = document.createTextNode(iptCt);
newLi.appendChild(liText);
var list = document.querySelector('.ct');
list.appendChild(newLi);
}
// 如果需要在指定位置后面添加，可使用该函数
// function insertAfter(newElement,targetElement){
// var parent = targetElement.parentNode;
// if(parent.lastChild == targetElement){
// parent.appendChild(newElement);
// }
// else{
// parent.insertBefore(newElement,targetElement.nextSibling);
// }
// }
</script>
题目7： 补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。
<ul class="ct">
<li data-img="1.jpg">鼠标放置查看图片1</li>
<li data-img="2.jpg">鼠标放置查看图片2</li>
<li data-img="3.jpg">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
var ct = document.querySelector('.ct');
var childs = ct.querySelectorAll('li');
var 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 = '<img src = "'+dataImg+'">'
})
}
</script>
网友评论