前端面试题——js事件
1、解释一下事件冒泡和事件捕获?
1、事件冒泡是IE团队提出来的,是事件开始时由最具体的元素接收,然后一层一层向上传播到较为不具体的节点。
2、事件捕获是由网景开发团队提出来的,正好与事件冒泡相反
2、如何阻止事件冒泡和默认事件?
1、对于主流浏览器以及IE9+的,e.stopPropagation()阻止事件冒泡,e.preventDefault()阻止默认行为
2、对于IE浏览器,使用e.cancelBubble = true来阻止事件冒泡,e.returnValue = false阻止默认行为
3、什么是事件委托?举个例子?
事件委托就是利用事件冒泡,在父级元素上添加事件,执行触发效果。即只指定一个事件处理程序,就可以管理某一类型的所有事件。
优点:1、代码简洁 2、减少浏览器内存占用
//例子
<body>
<ul id="box">
<Li>苹果</Li>
<li>香蕉</li>
<li>桃子</li>
</ul>
</body>
<script type="text/javascript">
var box = document.getElementById('box')
box.onclick = function(e){
alert(e.target.innerHTML) //并没有给li绑定事件,点击谁就能获取谁
}
</script>
4、dom0级和dom2级的事件绑定的区别?
1、dom0级后面绑定的事件会覆盖前面绑定的事件,点击的时候会执行新绑定的事件
2、dom2级不会覆盖前面绑定的事件,点击的时候所有绑定的事件会依次执行一遍
3、也就是说0级只能绑定一个事件,二级可以绑定多个
5、JavaScript的事件流模型都有什么?
1、事件冒泡流,事件捕获流,DOM事件流
2、其中DOM事件流会有三个阶段,即事件捕获阶段,处于目标阶段,事件冒泡阶段
6、DOM事件的绑定有几种方式?
1、直接在HTML便签里绑定,即HTML事件处理程序
2、获取元素,然后给元素绑定onclick属性,即DOM0级事件
3、获取元素,然后给元素绑定addEventListener(),即DOM2级事件处理程序
4、对于IE8之前的浏览器并不支持DOM2级事件,即不支持addEventListener()。可以使用attchEvent(),即IE事件处理程序
7、DOM事件中target和currentTarget的区别?
1、当事件处理程序绑定在目标元素上时,target和currentTarget,还有this是全相等的
2、当事件处理程序存在目标元素的父节点上时,target指向目标元素,而currentTarget和this全相等,都等于父元素
8、如何跨浏览器绑定原生事件?
兼容IE8
思路:1、封装一个对象EventUtil
2、创建两个方法,一个添加,一个删除
3、在方法里判断,各浏览器支持哪个方法就用哪个方法
<body>
<div>
<input type="button" value="按钮" id="btn">
</div>
</body>
<script type="text/javascript">
function showName(){
alert('bree')
}
var EventUtil = {
//添加事件
addHandler:function(ele,type,fn){
//DOM2级事件
if(ele.addEventListener){
ele.addEventListener(type,fn,false);
//IE事件
}else if(ele.attachEvent){
ele.attachEvent("on"+type,fn)
//DOM0级事件
}else{
ele["on"+type] = fn
}
},
//删除事件
removeHandler:function(ele,type,fn){
//DOM2级事件
if(ele.removeEventListener){
ele.removeEventListener(type,fn,false);
//IE事件
}else if(ele.detachEvent){
ele.detachEvent("on"+type,fn)
//DOM0级事件
}else{
ele["on"+type] = null
}
}
}
var btn = document.getElementById('btn');
EventUtil.addHandler(btn,"click",showName);
EventUtil.removeHandler(btn,"click",showName)
</script>
9、IE和DOM事件流的区别?
1、执行顺序不一样。IE事件流就是事件冒泡,DOM事件流是先捕获,然后处于目标,然后冒泡。
2、参数不一样,IE8之前的都用attachEvent()方法,只有两个参数。DOM事件流用addEventListener()方法有三个参数。
3、事件on。attachEvent()方法第一个参数要加上on,即onclick。DOM事件流的addEventListenner()方法不用加on
11、如何开启事件捕获流?
addEventListener(type,fn,true) 第三个参数是true就可以了
10、事件绑定和普通事件有什么区别?
即DOM0级和DOM2级的区别(覆盖问题)