DOM0 事件和DOM2级在事件监听使用方式上有什么区别?
DOM0级事件使用方式:
1.直接在标签内部写onclick等事件;
2.在js代码中例如:xxx.oncilck = function(){}
DOM2级事件使用方式:
监听方法:
addEventListener:添加事件处理,可以为元素添加多个事件处理程序,触发时会按照添加顺序依次调用。
removeEventListener:移除事件处理,不能移除匿名添加的函数。
它们都有三个参数:
事件类型,事件处理方法,布尔值(true表示在时间捕获阶段调用事件处理,false表示在事件冒泡阶段调用事件处理);
只有2级DOM包含3个事件:事件捕获阶段、处于目标阶段和事件冒泡阶段。
attachEvent与addEventListener的区别?
IE并不支持addEventListener,但支持attachEvent;由于IE只支持冒泡事件,所以添加的程序会被添加到冒泡阶段。
attachEvent与addEventListener的不同点:
1.参数个数不同,attachEvent添加的事件处理程序只能发生在冒泡阶段;addEventListener则可以通过第三个参数来决定冒泡还是捕获(为了浏览器兼容一般都选择冒泡);
2.第一个参数意义不同,addEventListener第一个参数是事件类型(比如click,load),而attachEvent第一个参数指明的是事件处理函数名称(onclick,onload)
3.事件处理程序的作用域不相同,addEventListener的作用域是元素本身,this是指的触发元素;attachEvent事件处理程序会在全局变量内运行,this是window。
4.为一个事件添加多个事件处理程序时,执行顺序不同。addEventListener添加会按照添加顺序执行;attachEvent添加多个事件处理程序时顺序无规律
解释IE事件冒泡和DOM2事件传播机制?
IE事件冒泡,从目标元素出发,向外层元素冒泡,最后到达顶层(window或document),依次执行绑定再其上的事件。
事件捕获阶段,即由最顶层元素(一般是从window元素开始,有的浏览器是从document开始,至于其中的差别我稍后会更新)开始,逐次进入dom内部,最后到达目标元素,依次执行绑定在其上的事件。
如何阻止事件冒泡? 如何阻止默认事件?
阻止冒泡:IE下设置CancleBubble为true,其他的利用stopPropagation
function stopPropagation(e) {
if (e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;//IE
}
}
阻止默认:
function preventDefault(e) {
if (e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;//IE
}
}
有如下代码,要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<script>
var ul = document.querySelector('.ct');
ul.addEventListener('click', function (e) {
/* body... */
var target = e.target;
console.log(target.innerText);
});
</script>
补全代码,要求
当点击按钮开头添加时在<li>这里是</li>元素前添加一个新元素,内容为用户输入的非空字符串;当点击结尾添加时在最后一个 li 元素后添加用户输入的非空字符串.
当点击每一个元素li时控制台展示该元素的文本内容。
任务6