哈哈!!答案如若有不对的地方,还请赐教,大家如果对答案不太理解,可以看我前面的博客,是针对每个事件的详解
1.事件冒泡:各个浏览器都支持,ie9+以及其他浏览器会冒泡到window对象,而ie8-会冒泡到document
事件捕获:ie8-不支持,其他浏览器支持,其他浏览器是从window开始捕获的
2.事件处理程序分为4类。
HTML事件处理程序:
写法:<div id="div" οnclick='alert(this.id+";"event.type)'></div>
特点:1)将代码直接写入html中,默认会封装一个函数,并可以直接使用this(指的是当前元素的指针)和event(指的是事件对象)
2)也可以调用在页面其他地方定义的脚本,<div id="div" οnclick='test()'></div>
3)默认封装的函数,可以像访问局部变量一样访问document及该元素本身的成员(像上面例子一样),如果为表单元素,也包括访问表单元素(父元素)的入口
<form action='a.html'>
<input style="height:30px;width:200px;background-color:pink;" onclick = "console.log(cookie+','+action+','+style);" id='input'>
</form>
cookie是document的成员变量,action是form的成员变量,style是input的
兼容性:所有浏览器都兼容
缺点:1)用户可能会有HTML元素一出现在页面上时就触发相应的事件,但当时的事件处理程序有可能尚不具备执行条件,就会报错
2)客户端编程的通用风格是保持HTML内容和javaScript行为分离,所以应该避免使用HTML事件处理程序属性,因为这些属性直接混合了javascript和HTML,且不易扩展
删除:onclick属性的值就是一个包含着在同名HTML特性中指定的代码的函数,而将相应的属性设置为null,可以删除此方法的事件处理程序
<form action='a.html'>
<input style="height:30px;width:200px;background-color:pink;" onclick = "console.log(cookie+','+action+','+style);" id='input'>
</form>
<script type="text/javascript">
var input = document.getElementById("input");
input.onclick = null;
</script>
DOM0级事件处理程序:
写法:
<form action='a.html'>
<input style="height:30px;width:200px;background-color:pink;" id='input'>
</form>
<script type="text/javascript">
var input = document.getElementById("input");
input.onclick = function(){
console.log(this.id)
}
</script>
特点:这种写法onclick为一个属性,属性全部为小写
这种方式的事件处理程序默认为元素的方法,所以this指的是当前指定了点击事件的元素
这种方式添加的事件处理程序会在事件流的冒泡阶段被处理
<form action='a.html'>
<input style="height:30px;width:200px;background-color:pink;" id='input'>
</form>
<script type="text/javascript">
var input = document.getElementById("input");
input.onclick = function(){
console.log(this.id)
}
document.οnclick=function(){
console.log("11")
}
</script>
兼容性:所有浏览器都兼容
缺点:一个事件只能绑定一个处理函数,如果绑定了多个,只会执行最后一个
<form action='a.html'>
<input style="height:30px;width:200px;background-color:pink;" id='input'>
</form>
<script type="text/javascript">
var input = document.getElementById("input");
input.onclick = function(){
console.log(this.id)
}
input.onclick = function(){
console.log(this.style)
}
</script>
删除:可以通过将事件处理程序属性设置为null来删除事件处理程序
DOM2级事件处理程序:
写法:input.addEventListener("click",test,false)
特点:事件不加on
有三个参数,第二个参数为方法,不加括号,也可以是匿名函数,第三个参数为布尔值,为true是捕获阶段,为false是冒泡阶段,默认为false
input.addEventListener("click",function (){
console.log(this.id)
},false)
可以添加多个相同的事件,并按照顺序触发
input.addEventListener("click",function (){
console.log(this.id)
},false)
input.addEventListener("click",function(){
console.log("hh")
})
程序中的this就是当前的元素
兼容性:ie8-不支持
删除:只能通过removeEventListener删除,三个参数必须都一样,所以要是以匿名函数写的话,是没办法删除的
ie事件处理程序:写法:input.attachEvent("onclick",test)
特点:事件加on
方法中的this指向的是window
<script type="text/javascript">
var input = document.getElementById("input");
function test(){
console.log(this)//window
}
input.attachEvent("onclick",test)
</script>
可以执行多个同事件方法,但是执行顺序ie9+是正序的,ie8-是逆序
<script type="text/javascript">
var input = document.getElementById("input");
function test(){
console.log(this)
}
function test1(){
console.log("haha")
}
input.attachEvent("onclick",test)
input.attachEvent("onclick",test1)
</script>//haha window
只支持事件冒泡阶段 ,只冒泡到document
<script type="text/javascript">
var input = document.getElementById("input");
function test(){
console.log(this)
}
input.attachEvent("onclick",test);
document.attachEvent("onclick",function(){
console.log("hahah")
});
window.attachEvent("onclick",function(){
console.log("111")
});
</script>
兼容性:ie兼容除了ie11
删除:只能通过detachEvent删除,两个参数也得一样,所以要是以匿名函数写的话,是没办法删除的
兼容所有浏览器的写法(执行顺序没有兼容):
<script type="text/javascript">
var input = document.getElementById("input");
function test(){
console.log(this)
}
getEvent(input,"click",test);
function getEvent(target,type,handler){
if(target.addEventListener){
target.addEventListener(type,handler);
}else{
target.attachEvent("on"+type,function(){
handler.call(target,event);
});
}
}
</script>
3.
那么它们的调用顺序在各浏览器中表现并不一致
<div id="box" style="height:100px;width:100px;background:pink;" onclick = "this.innerHTML +='html\n'"></div>
<script>
if(box.addEventListener){
box.addEventListener('click',function(){this.innerHTML += 'DOM2级\n'})
}
if(box.attachEvent){
box.attachEvent('onclick',function(){box.innerHTML +='IE\n'})
}
box.onclick = function(){
this.innerHTML += 'DOM0级\n';
}
</script>
【相同点】
如果同时出现HTML事件处理程序和DOM0级事件处理程序,DOM0级会覆盖HTML事件处理程序
【不同点】
chrome/opera/safari等webkit内核的浏览器会按照事件处理程序出现的顺序来排列,所以结果为:DOM2级 DOM0级
firefox浏览器和IE浏览器会将DOM0级事件优先调用
所以firefox和IE11浏览器结果为:DOM0级 DOM2级
IE9、10浏览器结果为:DOM0级 DOM2级 IE
IE8-浏览器结果为:DOM0级 IE
4.event对象在事件处理程序执行的时候创建,在事件处理程序结束时销毁
5.event对象是事件程序的第一个参数,ie8-不支持
<div id="box" style="height:100px;width:100px;background:pink;"></div>
<script>
var box = document.getElementById("box");
box.onclick = function(e){
console.log(e.type)
}
</script>
event变量表示event对象,火狐不支持
<div id="box" style="height:100px;width:100px;background:pink;"></div>
<script>
var box = document.getElementById("box");
box.onclick = function(){
console.log(event.type)
}
</script>
如果事件处理程序是使用attachEvent()添加的,那么就会有一个event对象作为参数被传入事件处理程序函数中,但是也可以直接使用event对象,但是不管attachEvent用什么方法使用event对象,事件处理函数的第一个参数都会传递event对象
兼容性写法:
<div id="box" style="height:100px;width:100px;background:pink;"></div>
<script>
var box = document.getElementById("box");
box.onclick = function(e){
e = e||event;
console.log(e.type)
}
</script>
6.e.type
7.e.currentTarget
特点:是被绑定事件的那个元素
this与这个值始终相等,但是在attachEvent中this指向window
兼容性:ie8-不支持
e.target
特点:是执行事件处理程序的那个元素
兼容性:ie8-不支持
e.srcElement
特点:与target一致
兼容性:火狐不支持
浏览器兼容性写法
<div id="box" style="height:100px;width:100px;background:pink;"></div>
<script>
var box = document.getElementById("box");
box.onclick = function(e){
e = e||event;
var obj = e.target||e.srcElement;
console.log(obj.id)
}
</script>
8.
由于事件会在
冒泡阶段
向上传播到父节点,因此可以把子节点的监听函数定义在父节点上,由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理(delegation),也叫事件委托
9.bubbles 判断这个事件是否可以冒泡 focus、blur和scroll事件不会冒泡
ie8-不支持
stopPropagation() 阻止冒泡与捕获
ie8-不支持
stopImmediatePropagation() 阻止冒泡和捕获与接下来这个元素的同一事件的其他函数执行
ie8-不支持
<div id="box" style="height:100px;width:100px;background:pink;"></div>
<script>
var box = document.getElementById("box");
box.addEventListener("click", function(e){
e = e||event;
var obj = e.target||e.srcElement;
e.stopImmediatePropagation();
console.log("111")
})
box.addEventListener("click", function(e){
e = e||event;
var obj = e.target||e.srcElement;
e.stopImmediatePropagation();
console.log("222")
})
document.onclick = function(e){
console.log("haha")
}
</script>
cancelBubble 只能阻止冒泡 但不是标准写法
所有浏览器都支持
10.eventPhase
ie8-不支持
【1】以下代码返回2,表示处于目标阶段
<button id="test" style="height: 30px;width: 200px;"></button>
<script>
test.onclick = function(e){
e = e || event;
test.innerHTML = e.eventPhase;
}
</script>
【2】以下代码返回1,表示处于捕获阶段
<button id="test" style="height: 30px;width: 200px;"></button>
<script>
document.addEventListener('click',function(e){
e = e || event;
test.innerHTML = e.eventPhase;
},true);
</script>
【3】以下代码返回3,表示处于冒泡阶段
<button id="test" style="height: 30px;width: 200px;"></button>
<script>
document.addEventListener('click',function(e){
e = e || event;
test.innerHTML = e.eventPhase;
},false);
</script>
11.cancelable 事件是否能够取消默认行为
ie8-不支持
preventDefault() 阻止默认行为
ie8-不支持
return false 阻止默认行为
所有浏览器都支持
returnValue 阻止默认行为
火狐和ie9+不支持
defaultPrevented 是否被阻止
ie8-不支持