1. DOM0 事件和DOM2级在事件监听使用方式上有什么区别?
- DOM0级事件
var btn = document.getElementById("myBtn");
btn.onclick = function(){
//do sth...
console.log(this); // myBtn
}
// 事件以'on'开头,如onmouseover, onmouseout等
使用DOM0级方法指定的事件处理程序被认为是元素的方法,此时事件处理程序是在元素的作用域里中运行,所以此时this指向的是元素本身。而且这种添加方式的缺陷是,只能存在一个处理程序,如果再次向同一个元素添加另外一个处理程序,上一个处理程序会被覆盖。
- DOM2级事件
DOM2级别事件监听使用的方法为:
var btn = document.getElementById("myBtn");
btn.addEventListener("事件名", function(){
//do sth...
console.log(this); // myBtn
});
这样的添加方式比起DOM0级更灵活,它可以给一个同一个元素添加多个处理事件。同时它的this也同样指向元素本身。
2.attachEvent与addEventListener的区别?
接收参数不同
attachEvent()接收两个参数,一个事件,一个事件的处理函数,且不支持事件捕获。
addEventLisner接受三个参数,一个事件,一个事件的处理函数,第三个参数是boolean,如果为false是事件冒泡,true,则为事件捕获。第三个参数可选,默认值为false。第一个参数意义不同
attachEvent接受的第一个参数的意义是事件处理函数的名称,而addEventListener指的是参数事件类型。只需在参数事件类型前加'on'就可以了。事件处理程序的作用域不同
addEventListener的作用域是元素本身,this是指的触发元素,而attachEvent事件处理程序会在全局变量内运行,this是window。为一个事件添加多个处理程序时,执行顺序不同
addEventListener添加会按照添加顺序执行,而attachEvent添加会往往按照反序执行,添加的多了就没有规律而言。
3.解释IE事件冒泡和DOM2事件传播机制?
- 事件冒泡
当我们触发某种事件,首先会精准判断触发事件的元素到底是哪一个具体的元素,然后再层层往上报,最终触发到document。举个例子来说.
<!DOCTYPE html>
<html>
<body>
<div>
<li>
<input>
</li>
</div>
</body>
</html>
假如给<input>绑定一个点击事件,首先input会监听到这个时间,触发事件处理函数,然后再往上报,也会触发<li>的点击处理函数,再往上报,依次类推。
- DOM2级事件处理程序
分为三个阶段,第一个阶段,事件捕获,由window-html-body-父-子。这一阶段为截取事件提供了机会。
第二个阶段,目标阶段,传递到目标,
第三阶段,冒泡阶段,再倒序的传
4.如何阻止事件冒泡? 如何阻止默认事件?
- 阻止事件冒泡
用stopPropagation()方法可以停止事件在DOM层次的传播,即取消进一步事件的捕获或者冒泡。 - 阻止默认事件
用preventDefault()阻止默认事件。
5.有如下代码,要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容
http://js.jirengu.com/gahudaguni/1/edit?html
6. 补全代码,要求:
当点击按钮开头添加时在<li>这里是</li>元素前添加一个新元素,内容为用户输入的非空字符串;当点击结尾添加时在最后一个 li 元素后添加用户输入的非空字符串.
当点击每一个元素li时控制台展示该元素的文本内容。
代码一:http://js.jirengu.com/noloholona/1/
代码二 http://js.jirengu.com/kayufuboxa/1/
7.补全代码,要求:当鼠标放置在li元素上,会在img-preview里展示当前li元素的data-img对应的图片
代码一:http://js.jirengu.com/hataqefuca/1/
代码二:http://js.jirengu.com/veyedudaqe/1/