JS高级编程 - - day01

欧亨利@mh

于 2023-02-03 19:33:25 发布

阅读量91

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_48625424/article/details/128866206

版权

一、事件三要素

1.事件源：全部标签
2.事件：鼠标事件，键盘事件等
3.事件处理函数：

二、绑定和解绑事件处理函数

绑定方式：
1.在标签中用属性绑定（ontype）（以下type表示事件种类）

<div id="mydiv" onclick="fn()"></div>
<script>
let mydiv = document.getElementById("mydiv");
function fn() {
	//处理内容
}
</script>

2.事件源对象.ontype = fn

<div id="mydiv"></div>
<script>
	let mydiv = document.getElementById("mydiv");
	//方式一
	mydiv.onclick = function() {
	    console.log(this);
	}
	//方式二
	function fn(){
	    console.log(this);
	}
	mydiv.onclick = fn//赋值的是函数名
	
</script>

3.事件源对象.addEventListener(“type”,fn,false)
第三个参数是缺省值，默认false，可以不写
（注：以上三种方法只有这种方法可为同一个数据源设置两个相同type的监听事件，且两个事件按照先后顺序执行）

<div id="mydiv"></div>
<script>
	let mydiv = document.getElementById("mydiv");
	//方式一
	mydiv.addEventListener("click",function(){
		//处理内容
	})
	//方式二
	function fn(){
	   //处理内容
	}
	mydiv.addEventListener("click",fn)//赋值的是函数名
</script>

解绑方式：
1.事件源对象.ontype = undefined / null；
2.事件源对象.removeEventListener(“type”,fn,false)
第三个参数是缺省值，默认false，可以不写

事件函数传参：
第一种绑定方式可以向事件处理函数传入参数，后面两种不能直接传参数，可以采用fn中调用另一个函数，再在调用另一个函数时传参数。

三、处理事件函数的内置对象——事件对象-event

定义：当一个函数为事件处理函数时，函数内部就会有一个事件对象，这个对象内有很多有用的属性，我们可以通过点语法（event.属性名）来获取到这些信息。
event对象中开发常用的属性：

1.event.clientX: 返回目标对象（被鼠标点击的那个）与浏览器可视区域的最左边的距离(event.clientY则是距离最上边的距离)
2.event.screenX：返回目标对象（被鼠标点击的那个）与设备屏幕最左边的距离（event.screenY则是距离最上边的距离）
3.event.pageX:返回目标对象（被鼠标点击的那个）与网页页面最左边的距离，受滚动影响, pageX=clientX+scrollX（event.pageY则是距离最上边的距离，也受滚动影响）
4.event.offsetX:返回目标对象（被鼠标点击的那个）与自身最左边的距离，不受border影响
（event.offsetY则是距离最上边的距离）
5.event.type：返回事件类型
6.event.timeStamp:返回的是一个毫秒时间戳，表示用户上一次刷新至该用户触发的时间。
7.event.target:鼠标点击的那个对象就是目标对象。（因为事件的冒泡传递，所以目标对象不一定是事件源对象）

四、事件传递

冒泡：
定义：当鼠标点击事件源时，事件源有监听事件就先执行完处理函数，再向上一级的事件源传递，会一直传到最上层的window一级（即使没有监听事件也会向上一层级传递）
注意：1.冒泡传递与监听事件的绑定方式无关，三种绑定方式都会产生冒泡排序
当点击div3时，会依次返回：
showDiv3
showDiv2
showDiv1

<body>
		<div id="div1">
			div1
			<div id="div2">
				div2
				<div id="div3">
					div3
				</div>
			</div>
		</div>
		<script>
			function showDiv1() {
				console.log("showDiv1");
			}
			function showDiv2() {
				console.log("showDiv2");
			}
			function showDiv3() {
				console.log("showDiv3");
			}
			let div1 = document.getElementById("div1");
			let div2 = document.getElementById("div2");
			let div3 = document.getElementById("div3");
			//会冒泡传递
			// div1.οnclick=showDiv1;
			// div2.οnclick=showDiv2;
			// div3.οnclick=showDiv3;
			//会冒泡传递
			// div1.addEventListener("click",showDiv1);
			// div2.addEventListener("click",showDiv2);
			// div3.addEventListener("click",showDiv3);
			//会冒泡传递
			// div1.addEventListener("click",showDiv1,false);
			// div2.addEventListener("click",showDiv2,false);
			// div3.addEventListener("click",showDiv3,false);
		</script>
</body>

委托事件和代理事件：
产生的原因：当鼠标点击源事件后，监听事件向上级冒泡传递，在传递的过程中各级监听事件的处理函数内部的event.target是相同的，都是点击的那个事件。因此可以通过对被点击事件的上级事件设置event.target控制自身的改变，这种行为就是委托事件。
委托事件的定义：父元素设置事件处理函数，对已经存在或以后才能会存在的子元素发生事件后，统一冒泡到父元素的事件处理函数来处理。
代理事件的定义：父元素设置事件处理函数，对以后才能会存在的子元素发生事件后，统一冒泡到父元素的事件处理函数来处理。
委托事件和代理事件区别：代理事件着重于新产生的子元素

阻止事件传递即冒泡：
1.通过在事件处理函数中添加event.stopPropagation()，可以阻止向上冒泡或向下捕获
2.通过在事件处理函数中添加event.stopImmediatePropagation(),阻止向下捕获或向上冒泡，也会阻止同一个节点上同一事件的其他的事件处理