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级的区别（覆盖问题）
网友评论