1 DOM0 事件和DOM2级在事件监听使用方式上有什么区别?
- DOM0级事件监听就是把一个方法赋值给一个元素的事件处理程序属性.将这些属性的值设置为一个函数,就可以指定事件处理程序.一个事件只能绑定一次,并且新方法会覆盖老方法.例如
btn.onclick=function(){} - DOM2级事件监听定义了两个方法用于处理指定和删除事件处理程序的操作:
addEventListener,removeEventListener.所有的DOM节点都包含这两个方法,并且它们都接受三个参数:事件类型,事件处理方法,布尔参数.例如addEventListener,removeEventListener.可以选择按照冒泡的顺序处理还是捕获的顺序处理.
2 attachEvent与addEventListener的区别?
- 参数个数不同:addEventListener有三个参数,attachEvent只有两个,attachEvent添加的事件处理程序只能发生在冒泡阶段,addEventListener第三个参数布尔值可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理;
- 第一个参数意义不同:addEventListener第一个参数是事件类型(比如click,load),而attachEvent第一个参数指明的是事件处理函数名称(onclick,onload);
- 事件处理程序的作用域不相同:addEventListener的作用域是元素本身,this是指的触发元素,而attachEvent事件处理程序会在全局变量内运行,this是window;
- 为一个事件添加多个事件处理程序时：执行顺序不同，addEventListener添加会按照添加顺序执行,而attachEvent添加多个事件处理程序时顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的,但是添加的多了就无规律了)
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>
//todo ...
</script>
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<script>
document.querySelector('.ct').addEventListener('click',function (e) {
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>
//你的代码
</script>
<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 addStartBtn = document.querySelector('#btn-add-start');
var addEndBtn = document.querySelector('#btn-add-end');
var ipt = document.querySelector('#ipt-add-content');
ct.addEventListener('click',function (e) {
if (e.target.tagName.toLowerCase() === 'li') {
console.log(e.target.innerText);
}
});
addEndBtn.addEventListener('click',function () {
var li = document.createElement('li');
li.innerText = ipt.value;
ct.appendChild(li);
})
addStartBtn.addEventListener('click',function () {
var li = document.createElement('li');
li.innerText = ipt.value;
ct.insertBefore(li,ct.firstChild);
})
</script>
7 补全代码,要求:当鼠标放置在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>
//你的代码
</script>
<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>
var ct = document.querySelector('.ct');
var childs = ct.querySelectorAll('li');
var imgPreview = document.querySelector('.img-preview');
for (var i=0;i<childs.length;i++){
childs[i].addEventListener('mouseenter',function () {
var dataing = this.getAttribute('data-img');
imgPreview.innerHTML = ''
})
}
</script>
