针对js事件的实践与练习答案（一）

最新推荐文章于 2023-05-21 17:51:24 发布

nicexibeidage

最新推荐文章于 2023-05-21 17:51:24 发布

阅读量651

点赞数

分类专栏： DOM 事件

本文链接：https://blog.csdn.net/nicexibeidage/article/details/78809754

版权

DOM 事件专栏收录该内容

16 篇文章 0 订阅

订阅专栏

哈哈！！答案如若有不对的地方，还请赐教，大家如果对答案不太理解，可以看我前面的博客，是针对每个事件的详解

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-不支持

nicexibeidage

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
针对js事件的实践与练习答案（一）

哈哈！！答案如若有不对的地方，还请赐教，大家如果对答案不太理解，可以看我前面的博客，是针对每个事件的详解1.事件冒泡：各个浏览器都支持，ie9+以及其他浏览器会冒泡到window对象，而ie8-会冒泡到document 事件捕获：ie8-不支持，其他浏览器支持，其他浏览器是从window开始捕获的2.事件处理程序分为4类。 HTML事件处理程序：写法：
复制链接

扫一扫