事件

最新推荐文章于 2021-11-04 10:52:08 发布

katsukichan

最新推荐文章于 2021-11-04 10:52:08 发布

阅读量244

点赞数

分类专栏： Js

本文链接：https://blog.csdn.net/nep_chan/article/details/81699895

版权

Js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

什么是事件

事件是可以被JavaScript侦测到的行为。网页中的每个元素都可以产生某些可以触发JavaScript函数的事件

事件绑定方式

格式：节点.on+事件名 = 事件处理函数;

//节点绑定方式会同名事件被覆盖
div.onclick = function(){}

事件分类

鼠标事件

onclick：当用户点击某个对象时调用的事件。

click = mousedown + mouseup

ondblclick ：当用户双击某个对象时调用的事件。

dblclick = click*2(短时间内两次单击)

onmousedown ：鼠标按钮被按下。
onmouseup：鼠标按键被松开。

onmouseover ：鼠标移到某元素之上。
onmouseout：鼠标从某元素移开。
onmousemove ：鼠标被移动时触发。
onmouseenter ：在鼠标光标从元素外部移动到元素范围之内时触发。这个事件不冒泡
onmouseleave：在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡

执行顺序：mouseover=>mouseenter; mouseout => mouseleave

oncontextmenu ：鼠标右键菜单展开时触发

键盘事件

onkeydown ：某个键盘按键被按下。
onkeyup：某个键盘按键被松开。
onkeypress：键盘<字符键>被按下,而且如果按住不放的话，会重复触发此事件。

UI事件

onload ：页面元素（包括图片多媒体等）加载完成后
onscroll：滚动时触发。
onresize ：窗口或框架被重新调整大小。

表单事件

onblur：元素失去焦点时触发。
onfocus ：元素获得焦点时触发。
onchange ：元素内容被改变，且失去焦点时触发。
oninput：输入字符时触发
onreset ：重置按钮被点击。
onsubmit ：确认按钮被点击。
onselect ：输入框文本被选中。

Event对象

获取event对象

标准：事件处理函数的第一个参数

div.onclick = function(e){
	console.log(e);//输出event对象信息
}

IE8-：window.event

//获取event对象的兼容写法
e = e || window.event;

鼠标事件Event属性

event.button 返回当事件被触发时，哪个鼠标按钮被点击。
W3C标准
0: 代表鼠标按下了左键
1: 代表按下了滚轮
2: 代表按下了右键

IE8-（IE8以下的浏览器）
1鼠标左键， 2鼠标右键， 3左右同时按， 4滚轮， 5左键加滚轮， 6右键加滚轮， 7三个同时

键盘事件Event属性

event.which/event.keyCode 获取键盘事件
对于keypress事件，该属性声明了被敲击的键生成的 Unicode 字符码(ascii码)

对于keydown和keyup事件，它指定了被敲击的键的虚拟键盘码。

onkeydown的常用键盘键值

左 37
上 38
右 39
下 40
Esc 27
空格 32
回车 13

altKey：返回当事件被触发时，ALT 键是否被按下。
ctrlKey ：返回当事件被触发时，CTRL 键是否被按下。
shiftKey ：返回当事件被触发时，Shift 键是否被按下。

光标位置信息

event.clientX…（其余一样）

clientX /clientY 光标相对于浏览器可视区域的位置，也就是浏览器坐标。
screenX/screenY 光标指针相对于电脑屏幕的水平/垂直坐标。
pageX/pageY:鼠标相对于文档的位置

pageX：包括滚动条滚动的距离，即：clientX+window.scrollX，IE8-不支持

offsetX,offsetY: 光标相对于事件源对象的相对偏移量。
事件源对象：触发事件的对象

Event公共属性

type：被触发的事件的类型(一般用于判断)
currentTarget：其事件处理程序当前正在处理事件的那个元素

事件冒泡

什么是事件冒泡：
在一个对象上触发某类事件（如onclick事件），那么click事件就会沿着DOM树向这个对象的父级传播，从里到外，直至它被处理程序处理，或者事件到达了最顶层（document/window）

事件源对象：触发事件的元素
标准：event.target
IE8-：event.srcElement

停止事件的传播
标准：event.stopPropagation();
IE8-：event.cancelBubble = true;

1）不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload…。
2）冒泡到最顶层的目标不同。大部分浏览器到window对象，IE8-到document对象

<style>
	.katsuki{width:200px;height:100px;background-color: #58bc58;}
</style>
<script>
window.onload = fuction(){
	var katsuki = document.getElementsByClassName('katsuki');
	katsuki.onclick = function(){
		console.log('katsuki');
	}
	//body
	document.body.onclik(e){
		console.log('body');
		//兼容获取event
		e = e || window.event;
		// 被处理：停止事件的传播
		e.stopPropagation();
	}
	//html
	document.documentElement.onclick(e){
		console.log('html');
		//事件源对象
		console.log(e.target);
	}
	//document
	document.onclick = function(e){
		console.log('document');
		//事件源对象
		console.log(e.target);
	}
	//window
	window.onclick = function(e){
		console.log('window');
		//事件源对象
		console.log(e.target);
	}
	/*
		由于冒泡是沿着DOM树向这个对象的父级传播
		因此得到 div body html document window输出顺序
		和代码顺序无关，打乱各层的onclick代码顺序得到相同结果

		body中e.stopPropagation();没被注释时，输出 katsuki body
		被注释时，输出 
		katsuki 
		body 
		html <div class="katsuki"></div>
		document <div class="katsuki"></div>
		window <div class="katsuki"></div>
	*/
}
</script>
<body>
	<div class="katsuki"></div>
</body>

阻止浏览器默认行为

链接跳转
表单提交
右键菜单…
文本的选择

标准：event.preventDefault();
IE8-：event.returnValue = false;

事件监听与捕获(反冒泡)

事件监听器(同名事件不会被覆盖，且支持捕获)

格式：元素.addEventListener(事件名,事件处理函数,是否捕获)
target.addEventListener(“click”, fn, false);
可以绑定多个处理函数在一个对象上, 执行顺序按照绑定的顺序来

不同元素事件执行顺序跟html结构有关
相同元素事件执行顺序跟绑定先后有关

第三个参数是否使用捕获(反向冒泡)，默认false，为冒泡

IE8-的事件监听器：
格式：元素.attachEvent(on+事件名,事件处理函数)
target.attachEvent(“onclick”,fun);
可以绑定多个函数在一个对象上, 执行顺序按照绑定的反序

<script>
window.onload = function(){
	var katsuki = document.getElementById('katsuki');
	var span = katsuki.children[0];
	//事件监听方式绑定事件
	//katsuki
	katsuki.addEventListener('click',function(){
		console.log('katsuki');
	});
	//span
	span.addEventListener('click',function(){
		console.log('span');
	});
	//body
	document.body.addEventListener('click',funtion(){
		console.log('body');
	});
	//html
	document.documentElement.addEventListener('click',function(){
		console.log('html');
	},true);
	//document
	document.addEventListener('click',function(){
		console.log('document');
	},true);
	//window
	window.addEventListener('click',function(){
		console.log('window');
	});
	/*
		没有设置捕获为true时，事件冒泡，同理上面输出方式：
		span katsuki body html document window
		设置了捕获为true时，事件根据DOM树结构倒序提前,所以上面代码输出：
		document html span katsuki body window
	*/
}
</script>
<body>
	<div id="katsuki">
		<span></span>
	</div>
</body>

移除

标准：
removeEventListener(‘click’,fn, true)
传入的所有参数(包括函数)必须与事件监听器中一致，否则不能移除事件

IE8-：
detachEvent(‘onclick’,fun)
传入的参数fun要跟添加时一样，否则不能移除事件

注意：
页面事件绑定数量越多，越影响性能（速度越慢）

<style>
	#katsuki{width:300px;box-sizing: border-box;}
</style>
<script>
window.onload = function(){
	var katsuki = document.getElementById('katsuki');
	var btnRemove = document.getElementById('btnRemove');
	var btnRemove2 = document.getElementById('btnRemove2');
	
	//节点方式绑定
	katsuki.onclick = function(){
		console.log('katsuki');
	}
	//节点方式移除
	btnRemove.onclick = function(){
		katsuki.onclick = null;
	}
	//鼠标移入移出事件添加样式，删除绑定
	//监听方式绑定
	//需要移除事件时，事件处理函数必须单独编写，这样才能是移除事件效果
	var handler = function(){
		katsuki.style.border = '10px solid #f00';
	}
	katsuki.addEventListener('mouseover',handler);
	katsuki.addEventListener('mouseout',function(){
		katsuki.style.border = 'none';
	});
	btnRemove2.onclick = function(){
		katsuki.removeEventListener('mouseover',handler);
	}
}
</script>
<body>
	<p>
		<button id="btnRemove">移除节点绑定方式</button>
		<button id="btnRemove2">移除事件监听器绑定方式</button>
	</p>
	<img src="img/katsuki.jpg" id="katsuki">
</body>

拖拽案例

拖拽的原理

鼠标按下且移动鼠标时，改变当前元素的top,left值

拖拽的思路

1给目标元素添加onmousedown事件

拖拽的前提是目标元素设置css定位

记录按下鼠标位置与元素左上角的偏移量
ox = offsetX, oy = offsetY
ox = clientX-offsetLeft, oy=clientY-offsetTop

2当onmousedown发生以后，此刻给document添加onmousemove事件

意味着此刻鼠标在网页的移动都将改变目标元素的位置

在onmousemove事件中，设定目标元素的left和top：
公式
目标元素的left = 鼠标的clientX – offsetX
目标元素的top = 鼠标的clientY– offsetY

3给document添加onmouseup事件，清空document的onmousemove事件

意味着拖动过程中鼠标在网页的任意位置松开鼠标，都会放弃拖拽的效果

<style>		
	#katsuki{position:absolute;top:100px;left:100px;width:100px;height:100px;}
</style>
<script>
window.onload = function(){
	/*鼠标按下移动拖动元素，松开取消拖动*/
	// 事件绑定了就会一直存在，移动事件就需要移除
	katsuki.onmousedown = function(event){
		// 按下时记录光标位置与，事件源对象的偏移量
		ox = event.offsetX;
		oy = event.offsetY;
		// move绑定给document是防止鼠标移动过快移出元素停止拖动
		// 绑定给katsuki就会有鼠标移动过快移出元素停止拖动问题
		document.onmousemove = function(e){
			// 移动中不断改变元素的left和top值
			katsuki.style.left = e.pageX - ox + 'px';
			katsuki.style.top = e.pageY - oy + 'px';
			// img移动在浏览器里有默认行为，需要清除
			e.preventDefault();
		}
	}
	// 松开鼠标移除移动事件绑定
	document.onmouseup = function(){
		document.onmousemove = null;
	}
}
</script>
<body>
	<!--了解 draggable="false" img移动在浏览器里有默认行为属性，设置为false可清除-->
	<img src="img/katsuki.jpg" id="katsuki">
</body>