Part4：事件、事件对象、事件委托、拖拽

最新推荐文章于 2023-05-15 16:44:01 发布
最新推荐文章于 2023-05-15 16:44:01 发布
阅读量387 收藏
点赞数
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46403734/article/details/113917524
版权

一、事件

1.事件及浏览器常用的事件行为
  • 事件是元素天生自带的默认操作行为
    =>不论我们是否给其绑定了方法，当我们操作的时候，也会把对应的事件触发
  • 事件绑定是给元素的某个行为绑定一个方法
    =>目的是当事件行为触发的时候，可以做一些事情
    常用的事件行为：
    [鼠标事件]
    * click 点击（移动端click被识别为单击）
    * dblclick 双击
    * mousedown 鼠标按下
    * mouseup 鼠标抬起
    * mousemove 鼠标移动
    * mouseover 鼠标滑过
    * mouseout 鼠标滑出
    * mouseenter 鼠标进入
    * mouseleave 鼠标离开
    * mousewhell 鼠标滚轮滚动
    [键盘事件]
    * keydown 按下某个键
    * keyup 抬起某个键
    * keypress 除Shift/Fn/CapsLock键以外，其它键按住（连续触发）
    [移动端手指事件]
    * 单手指事件模型 Touch
    * touchstart 手指按下
    * touchmove 手指移动
    * touchend 手指松开
    * touchcancel 操作取消（一般应用于非正常状态下操作结束）
    * 多手指事件模型 Gesture
    * gesturestart
    * gesturechange / gestureupdate
    * gestureend
    * gesturecancel
    [表单元素常用事件]
    * focus 获取焦点
    * blur 失去焦点
    * change 内容改变
    [音视频常用事件]
    * canplay 可以播放（资源没有加载完，播放中可能会卡顿）
    * canplaythrough 可以播放（资源已经加载完，播放中不会卡顿）
    * play 开始播放
    * playing 播放中
    * pause 暂停播放
    [其它常用事件]
    * load 资源加载完
    * unload 资源卸载
    * beforeunload 当前页面关闭之前
    * error 资源加载失败
    * scroll 滚动事件
    * readystatechange AJAX请求状态改变事件
    * contextmenu 鼠标右键触发
    * …
    * https://developer.mozilla.org/zh-CN/docs/Web/Events
    * 或者查看元素的属性（属性中onxxx就是元素拥有的事件行为）
2.DOM0和DOM2事件绑定的区别【重点】
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>珠峰培训</title>
	<link rel="stylesheet" href="css/reset.min.css">
	<style>
		html,
		body {
			height: 100%;
			background: lightcyan;
		}

		#box {
			box-sizing: border-box;
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -100px 0 0 -100px;
			width: 200px;
			height: 200px;
			background: lightcoral;
		}
	</style>
</head>

<body>
	<div id="box"></div>

	<script>
		/* 
		 * DOM0事件绑定 VS DOM2事件绑定
		 *   [DOM0]
		 *     元素.on事件行为=function(){}
		 *   [DOM2]
		 *     元素.addEventListener(事件行为,function(){},true/false)  
		 * 		    【注：false：代表在冒泡阶段执行此方法；true：代表在捕获阶段执行此方法. false/true不写默认是false】
		 *     IE6~8中：元素.attachEvent('on事件行为',function(){})
		 */
		/* DOM0事件绑定的原理：给元素的私有属性赋值，当事件触发，浏览器会帮我们把赋的值执行，但是这样也导致 “只能给当前元素某一个事件行为绑定一个方法” */
		/* box.onclick = function () {
			console.log('哈哈哈~~');
		}
		box.onclick = function () {
			console.log('呵呵呵~~');
		} */

		/* box.onclick = function () {
			console.log('哈哈哈~~');
			//=>移除事件绑定：DOM0直接赋值为null即可
			box.onclick = null;
		} */

		/* ================================================ */
		/* DOM2事件绑定的原理：基于原型链查找机制，找到EventTarget.prototype上的方法并且执行，此方法执行，会把给当前元素某个事件行为绑定的所有方法，存放到浏览器默认的事件池中（绑定几个方法，会向事件池存储几个），当事件行为触发，会把事件池中存储的对应方法，依次按照顺序执行 “给当前元素某一个事件行为绑定多个不同方法” */
		/* box.addEventListener('click', function () {
			console.log('哈哈哈~~');
		}, false);
		box.addEventListener('click', function () {
			console.log('呵呵呵~~');
		}, false); */

		//=>DOM2事件绑定的时候，我们一般都采用实名函数
		//=>目的：这样可以基于实名函数去移除事件绑定
		/* function fn() {
			console.log('哈哈哈~~');
			//=>移除事件绑定：从事件池中移除，所以需要指定好事件类型、方法等信息（要和绑定的时候一样才可以移除）
			box.removeEventListener('click', fn, false);
		}
		box.addEventListener('click', fn, false); */

		/* function fn1(){ console.log(1); }
		function fn2(){ console.log(2); }
		function fn3(){ console.log(3); }
		box.addEventListener('click', fn2, false); 
		box.addEventListener('click', fn3, false); 
		box.addEventListener('click', fn1, false); 
		//=>基于addEventListener向事件池增加方法，存在去重的机制 “同一个元素，同一个事件类型，在事件池中只能存储一遍这个方法，不能重复存储”
		box.addEventListener('click', fn1, false); 
		box.addEventListener('mouseover', fn1, false);  */

		/* window.oncontextmenu = function (ev) {
			alert("哇咔咔~~");
		} */

		/* DOM0和DOM2可以混在一起用【并不会冲突，因为处理的机制不一样】：执行的顺序以绑定的顺序为主 */
		/* box.addEventListener('click', function () {
			console.log('哔咔哔咔~~');
		});
		box.onclick = function () {
			console.log('哇咔咔~~');
		}
		box.addEventListener('click', function () {
			console.log('call~~');
		}); */

		/* DOM0中能做事件绑定的事件行为，DOM2都支持；DOM2里面一些事件，DOM0不一定能处理绑定，例如：transitionend、DOMContentLoaded... */
		// box.style.transition = 'opacity 1s';
		/* box.ontransitionend = function () {
			console.log('哇咔咔~~');
		} */
		/* box.addEventListener('transitionend', function () {
			console.log('哇咔咔~~');
		}); */

		/* window.addEventListener('load', function () {
			//=>所有资源都加载完成触发
			console.log('LOAD');
		});
		window.addEventListener('DOMContentLoaded', function () {
			//=>只要DOM结构加载完就会触发
			console.log('DOMContentLoaded');
		}); */
	</script>
	</body>

</html>

DOM2级事件存在去重机制： “同一个元素，同一个事件类型，在事件池中只能存储一遍这个方法，不能重复存储”。

function fn1(){ console.log(1); }
function fn2(){ console.log(2); }
function fn3(){ console.log(3); }
box.addEventListener('click', fn2, false); 
box.addEventListener('click', fn3, false); 
box.addEventListener('click', fn1, false); 
//=>基于addEventListener向事件池增加方法，存在去重的机制 “同一个元素，同一个事件类型，在事件池中只能存储一遍这个方法，不能重复存储”
box.addEventListener('click', fn1, false); 
box.addEventListener('mouseover', fn1, false);

浏览器事件池：去掉了重复的fn1函数。
在这里插入图片描述

3.JQuery中事件的处理机制
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>珠峰培训</title>
	<link rel="stylesheet" href="css/reset.min.css">
	<style>
		html,
		body {
			height: 100%;
			background: lightcyan;
		}

		#box {
			box-sizing: border-box;
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -100px 0 0 -100px;
			width: 200px;
			height: 200px;
			background: lightcoral;
		}
	</style>
</head>

<body>
	<div id="box"></div>

	<script>
		//=>$(document).ready(function(){})
		/* $(function () {
			//=>JQ中的这个处理（DOM结构加载完触发）采用的就是DOMContentLoaded事件，并且依托DOM2事件绑定来处理，所以同一个页面中，此操作可以被使用多次
		});
		$(function () {

		}); */
		/* JQ中的事件绑定采用的都是DOM2事件绑定，例如：on/off/one */
	</script>
	<script src="js/jquery.min.js"></script>
	<script>
		let $box = $('#box');
		/* $box.one('click', function () {
			console.log('哇咔咔~~');
		}); */
		$box.on('click', function () {
			console.log('哇咔咔~~');
		});
		$box.on('click', function () {
			console.log('哔咔哔咔，丘~~');
		});
	</script>
</body>

</html>

面试题： window.onload VS $(document).ready()

这个题我知道，我之前看过部分JQ源码。
// 1.$(document).ready() 采用的是DOM2事件绑定，监听的是DOMContentLoaded这个事件，所以只要DOM结构加载完成就会被触发执行，而且同一个页面中可以使用多次（绑定不同的方法，因为基于DOM2事件池绑定机制完成的）
// 2.window.onload必须等待所有资源都加载完成才会被触发执行，采用DOM0事件绑定，同一个页面只能绑定一次（一个方法），想绑定多个也需要改为window.addEventListener(‘load’,
function () { })DOM2绑定方式

二、事件对象

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>珠峰培训</title>
	<link rel="stylesheet" href="css/reset.min.css">
	<style>
		html,
		body {
			height: 100%;
			background: lightcyan;
		}

		#box {
			box-sizing: border-box;
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -100px 0 0 -100px;
			width: 200px;
			height: 200px;
			background: lightcoral;
		}
	</style>
</head>

<body>
	<div id="box"></div>

	<script src="js/jquery.min.js"></script>
	<script>
		let $box = $('#box'),
			box = $box.get(0);

		/*
		 * 给元素的事件行为绑定方法，当事件行为触发方法会被执行，不仅被执行，而且还会把当前操作的相关信息传递给这个函数 =>“事件对象ev”
		 * 如果是鼠标操作，获取的是MouseEvent类的实例 =>鼠标事件对象
		 *   鼠标事件对象 -> MouseEvent.prototype -> UIEvent.prototype -> Event.prototype -> Object.prototype
		 * 如果是键盘操作，获取的是KeyboardEvent类的实例 =>键盘事件对象
		 * 除了以上还有：普通事件对象(Event)、手指事件对象(TouchEvent)等
		 */

		/*box.onclick = function (ev) {
			//=>鼠标事件对象
			//clientX/clientY：当前鼠标触发点距离当前窗口左上角的X/Y轴坐标
			//pageX/pageY：触发点距离当前页面左上角的X/Y轴坐标
			//type：触发事件的类型
			//target：事件源（操作的是哪个元素，哪个元素就是事件源），在不兼容的浏览器中可以使用srcElement获取，也代表的是事件源
			//preventDefault()：用来阻止默认行为的方法，不兼容的浏览器中用ev.returnValue=false也可以阻止默认行为
			//stopPropagation()：阻止冒泡传播，不兼容的浏览器中用ev.cancelBubble=true也可以阻止默认行为
			console.log(ev); //MouseEvent {isTrusted: true, screenX: 258, screenY: 390, clientX: 258, clientY: 287, …}
		}*/


		/* 事件对象和函数以及给谁绑定的事件没啥必然关系，它存储的是当前本次操作的相关信息，操作一次只能有一份信息，所以在哪个方法中获取的信息都是一样的；第二次操作，存储的信息会把上一次操作存储的信息替换掉...；
		 * 
		 * 每一次事件触发，浏览器都会这样处理一下
		 *   1.捕获到当前操作的行为（把操作信息获取到），通过创建MouseEvent等类的实例，得到事件对象EV
		 *   2.通知所有绑定的方法（符合执行条件的）开始执行，并且把EV当做实参传递给每个方法，所以在每个方法中得到的事件对象其实是一个
		 *   ......
		 *   3.后面再重新触发这个事件行为，会重新获取本次操作的信息，用新的信息替换老的信息，然后继续之前的步骤...
		 */
		let obj = null;
		box.addEventListener('click', function (ev) {
			console.log(ev);
			obj = ev;
		});
		box.addEventListener('click', function (ev) {
			console.log(ev === obj); //=>true

		});
		document.body.onclick = function (ev) {
			console.log(ev === obj); //=>true
		}
	</script>
</body>

</html>

在这里插入图片描述

1.阻止事件的默认行为
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>珠峰培训</title>
	<link rel="stylesheet" href="css/reset.min.css">
</head>

<body>
	<!-- 
		A标签的默认行为1：页面跳转 
		A标签的默认行为2：锚点定位(后面加“#”号)
	-->
	<!-- <a href="http://www.zhufengpeixun.cn/#free_course">珠峰培训</a> -->

	<!-- 
		阻止它的默认行为
		  1. href="javascript:;"
		  2. 点击A标签：先触发click行为，然后再去执行href的跳转
	 -->
	<!-- <a href="http://www.zhufengpeixun.cn/" id="link">我就是一个按钮</a> -->
	<script>
		/* link.onclick = function (ev) {
			//=>返回一个FALSE，相当于结束后面即将执行的步骤
			return false;
		}
		link.onclick = function (ev) {
			ev.preventDefault();
		} */
	</script>

	<!-- <style>
		.context {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			box-sizing: border-box;
			padding: 0 5px;
			width: 100px;
			border: 1px solid lightcoral;
		}

		.context li {
			line-height: 35px;
			border-bottom: 1px dashed #EEE;
		}

		.context li:nth-last-child(1) {
			border-bottom: none;
		}
	</style>
	<ul class="context">
		<li>哇咔咔~~</li>
		<li>比卡丘~~</li>
	</ul>
	<script>
		let context = document.querySelector('.context');
		window.addEventListener('contextmenu', function (ev) {
			ev.preventDefault();
			context.style.display = 'block';
			context.style.top = ev.clientY + 'px';
			context.style.left = ev.clientX + 'px';
		});
	</script> -->

	<input type="text" id="cardInp">
	<script>
		//=>键盘事件对象
		//code & key：存储的都是按键，code更细致
		//keyCode & which：存储的是键盘按键对应的码值
		//  方向键：37 38 39 40 =>左上右下
		//  空格SPACE 32
		//  回车ENTER 13
		//  回退BACK 8
		//  删除DEL 46
		//  SHIFT 16
		//  CTRL 17
		//  ALT  18
		//  ......

		cardInp.onkeydown = cardInp.onkeyup = function (ev) {
			let val = this.value,
				reg = /[^0-9X]/g;
			this.value = val.replace(reg, '');
			//=>超过18位禁止输入
			if (this.value.length >= 18) {
				let arr = [8, 13, 37, 38, 39, 40, 46];
				if (!arr.includes(ev.keyCode)) {
					ev.preventDefault();
				}
			}
			//=>按ENTER弹出输入的内容
			if (ev.keyCode === 13) {
				alert(this.value);
			}
		} 
	</script>
</body>

</html>
2.小案例：推盒子
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>珠峰培训</title>
	<link rel="stylesheet" href="css/reset.min.css">
	<style>
		html,
		body {
			height: 100%;
		}

		.container {
			box-sizing: border-box;
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -200px 0 0 -200px;
			width: 400px;
			height: 400px;
			background: lightblue;
		}

		.container .box {
			position: absolute;
			top: 0;
			left: 0;
			width: 100px;
			height: 100px;
			background: lightcoral;
			/* CSS3动画 */
			transition: .3s linear;
		}
	</style>
</head>

<body>
	<div class="container">
		<div class="box"></div>
	</div>

	<script src="js/jquery.min.js"></script>
	<script>
		let $container = $('.container'),
			$box = $container.children('.box');
		$(document).on('keydown keypress', function (ev) {
			//1.首先获取按键码和元素当前的TOP/LEFT
			let code = ev.keyCode,
				T = parseFloat($box.css('top')),
				L = parseFloat($box.css('left')),
				step = 30;
			//2.根据键盘码计算移动的距离
			switch (code) {
				case 37:
					L -= step;
					break;
				case 38:
					T -= step;
					break;
				case 39:
					L += step;
					break;
				case 40:
					T += step;
					break;
			}
			//4.边界判断
			let minL = 0,
				maxL = $container.outerWidth() - $box.outerWidth(),
				minT = 0,
				maxT = $container.outerHeight() - $box.outerHeight();
			L = L < minL ? minL : (L > maxL ? maxL : L);
			T = T < minT ? minT : (T > maxT ? maxT : T);
			//3.把最新的样式重新赋值为盒子
			$box.css({
				left: L,
				top: T
			});
		});
	</script>
</body>

</html>
3.事件的传播机制【重点】

事件的传播机制（三个阶段）

  • 捕获阶段：从最外层向最里层事件源依次进行查找（目的：是为冒泡阶段事先计算好传播的层级路径） =>CAPTURING_PHASE:1
  • 目标阶段：当前元素的相关事件行为触发 =>AT_TARGET:2
  • 冒泡传播：触发当前元素的某一个事件行为，不仅它的这个行为被触发了，而且它所有的祖先元素（一直到window）相关的事件行为都会被依次触发（从内到外的顺序）
    =>BUBBLING_PHASE:3 （Event.prototype）
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>珠峰培训</title>
	<link rel="stylesheet" href="css/reset.min.css">
	<style>
		html,
		body {
			height: 100%;
		}

		#outer {
			margin: 20px auto;
			width: 300px;
			height: 300px;
			background: lightblue;
		}

		#inner {
			margin: 20px auto;
			width: 200px;
			height: 200px;
			background: lightcoral;
		}

		#center {
			margin: 20px auto;
			width: 100px;
			height: 100px;
			background: lightgreen;
		}
	</style>
</head>

<body>
	<div id="outer">
		<div id="inner">
			<div id="center"></div>
		</div>
	</div>
	<script>
		document.body.onclick = function (ev) {
			console.log('BODY', ev);
		} 
		outer.onclick = function (ev) {
			console.log('OUTER', ev);
			// ev.stopPropagation();
		} 
		inner.onclick = function (ev) {
			console.log('INNER', ev);
		}
		/* outer.addEventListener('click', function (ev) {
			console.log('OUTER', ev);
		}, true); //先输出outer，因为他捕获阶段的时候就已经先执行了；但是真实项目中，一般不会写true，第三个参数不写会默认是false
		inner.addEventListener('click', function (ev) {
			console.log('INNER', ev);
		}, false);
		//【注：false：代表在冒泡阶段执行此方法；true：代表在捕获阶段执行此方法】
		*/
		center.onclick = function (ev) {
			console.log('CENTER', ev);
			//=>阻止冒泡传播
			// ev.stopPropagation();
		} 
	</script>
</body>

</html>

在这里插入图片描述

4.mouseover和mouseenter的本质区别
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>珠峰培训</title>
	<link rel="stylesheet" href="css/reset.min.css">
	<style>
		html,
		body {
			height: 100%;
		}

		#outer {
			margin: 20px auto;
			width: 300px;
			height: 300px;
			background: lightblue;
		}

		#inner {
			margin: 20px auto;
			width: 200px;
			height: 200px;
			background: lightcoral;
		}

		#center {
			margin: 20px auto;
			width: 100px;
			height: 100px;
			background: lightgreen;
		}
	</style>
</head>

<body>
	<div id="outer">
		<div id="inner">
			<div id="center"></div>
		</div>
	</div>
		<!-- 一般不使用mouseover，因为它的机制过于混乱，如果需要基于冒泡传播做什么事，只能用mouseover，因为mouseenter默认阻止了事件的冒泡传播 -->
	<!-- <script>
		center.onmouseover = function () {
			console.log("center over");
		}
		center.onmouseout = function () {
			console.log("center out");
		}
		inner.onmouseover = function () {
			console.log("inner over");
		}
		inner.onmouseout = function () {
			console.log("inner out");
		}
	</script> -->
	<script>
		center.onmouseenter = function () {
			console.log("center enter");
		}
		center.onmouseleave = function () {
			console.log("center leave");
		}
		inner.onmouseenter = function () {
			console.log("inner enter");
		}
		inner.onmouseleave = function () {
			console.log("inner leave");
		}
	</script>
	</body>

</html>

在这里插入图片描述

三、事件委托

事件委托：

  • 1.基于事件的冒泡传播机制完成
  • 2.如果一个容器中很多元素都要在触发某一事件的时候做一些事情（原始方案：给元素每一个都单独进行事件绑定），我们只需要给当前容器的这个事件行为绑定方法，这样不论是触发后代中哪一个元素的相关事件行为，由于冒泡传播机制，当前容器绑定的方法也都要被触发执行
  • 3.想知道点击的是谁（根据是谁做不同的事情），只需要基于事件对象中的ev.target事件源获取即可
    =>基于事件委托实现，整体性能要比一个个的绑定方法高出50%左右
    =>如果多元素触发，业务逻辑属于一体的，基于事件委托来处理更加好
    =>某些业务场景只能基于事件委托处理

【补充】：如果detail是box的子元素，直接用css伪类（hover）来处理即可。

	<div class="box">
		<span>购物车</span>
		<div class="detail">
			暂无购物车内容
		</div>
	</div>
1.案例：详情区域处理【方案1】
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>珠峰培训-事件委托</title>
	<!-- IMPORT CSS -->
	<link rel="stylesheet" href="css/reset.min.css">
	<style>
		.container {
			margin: 20px auto;
			width: 200px;
		}

		.container .box {
			box-sizing: border-box;
			float: right;
			width: 100px;
			height: 35px;
			line-height: 35px;
			text-align: center;
			font-size: 16px;
			border: 1px solid #AAA;
			position: relative;
			top: 1px;
		}

		.container .detail {
			/* display: none; */
			box-sizing: border-box;
			float: right;
			width: 200px;
			height: 70px;
			line-height: 70px;
			text-align: center;
			font-size: 14px;
			border: 1px solid #AAA;
		}
	</style>
</head>

<body>
	<div class="container clearfix">
		<div class="box"><span>购物车</span></div>
		<div class="detail">
			暂无购物车内容
		</div>
	</div>
	<!-- IMPORT JS -->
	<script>
		let box = document.querySelector('.box'),
			detail = document.querySelector('.detail');
		document.onmouseover = function (ev) {
			let target = ev.target;
			if (target.tagName === "SPAN") {
				//=>如果事件源是SPAN，我们让其变为其父元素
				target = target.parentNode;
			} 
			if (/^(box|detail)$/.test(target.className)) {
				//=>如果事件源的CLASS是BOX/DETAIL
				detail.style.display = 'block';
				return;
			}
			detail.style.display = 'none';
		}

		// 真实项目不会这么搞，我们可以利用事件委托来完成
		/* 
		box.onmouseover = function (ev) {
			detail.style.display = 'block';
		}
		box.onmouseout = function (ev) {
			detail.style.display = 'none';
		}
		detail.onmouseover = function (ev) {
			detail.style.display = 'block';
		}
		detail.onmouseout = function (ev) {
			detail.style.display = 'none';
		} 
		*/
	</script>
</body>

</html>
2.案例：详情区域处理【方案2】
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>珠峰培训-事件委托</title>
	<!-- IMPORT CSS -->
	<link rel="stylesheet" href="css/reset.min.css">
	<style>
		.container {
			margin: 20px auto;
			width: 200px;
		}

		.container .box {
			box-sizing: border-box;
			float: right;
			width: 100px;
			height: 35px;
			line-height: 35px;
			text-align: center;
			font-size: 16px;
			border: 1px solid #AAA;
			position: relative;
			top: 1px;
		}

		.container .detail {
			display: none;
			box-sizing: border-box;
			float: right;
			width: 200px;
			height: 70px;
			line-height: 70px;
			text-align: center;
			font-size: 14px;
			border: 1px solid #AAA;
		}
	</style>
</head>

<body>
	<div class="container clearfix">
		<div class="box"><span>购物车</span></div>
		<div class="detail">
			暂无购物车内容
		</div>
	</div>
	<!-- IMPORT JS -->
	<script>
		let box = document.querySelector('.box'),
			detail = document.querySelector('.detail');
		document.onclick = function (ev) {
			/* let target = ev.target;
			target.tagName === "SPAN" ? target = target.parentNode : null;
			if (/^box$/.test(target.className)) {
				//=>如果是BOX让其显示
				detail.style.display = 'block';
				return;
			} */
			/* if (/^detail$/.test(target.className)) {
				//=>如果是DETAIL啥也不干
				return;
			} */
			//=>剩下的都是隐藏
			detail.style.display = 'none';
		}
		box.onclick = function (ev) {
			//=>如果是BOX让其显示
			detail.style.display = 'block';
			ev.stopPropagation();
		}
		detail.onclick = function (ev) {
			//=>如果是DETAIL啥也不干
			ev.stopPropagation();
		}
	</script>
</body>

</html>
3.案例：给动态元素绑定事件
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>珠峰培训-事件委托</title>
	<!-- IMPORT CSS -->
	<link rel="stylesheet" href="css/reset.min.css">
	<style>
		.box {
			margin: 20px auto;
			width: 200px;
		}

		.newsList {
			box-sizing: border-box;
			padding: 5px;
			border: 2px solid lightcoral;
		}

		.newsList li {
			line-height: 35px;
			border-bottom: 1px dashed #BBB;
		}

		.createBtn {
			box-sizing: border-box;
			margin-top: 10px;
			width: 80px;
			height: 30px;
			border: 1px solid #AAA;
		}
	</style>
</head>

<body>
	<div class="box">
		<ul class="newsList">
			<li>我是第1个LI</li>
			<li>我是第2个LI</li>
			<li>我是第3个LI</li>
			<li>我是第4个LI</li>
			<li>我是第5个LI</li>
		</ul>
		<button class="createBtn">新增</button>
	</div>

	<!-- IMPORT JS -->
	<script src="js/jquery.min.js"></script>
	<script>
		let $newsList = $('.newsList'),
			$createBtn = $('.createBtn'),
			count = 5;
		$newsList.click(function (ev) {
			let target = ev.target,
				$target = $(target);
			if (target.tagName === 'LI') {
				alert(`我是第${$target.index()+1}个LI`);
			}
		});

		$createBtn.click(function () {
			let str = ``;
			for (let i = 0; i < 5; i++) {
				count++;
				str += `<li>我是第${count}个LI</li>`;
			}
			$newsList.append(str);
		});

	</script>


	<!-- <script>
		let $newsList = $('.newsList'),
			$createBtn = $('.createBtn'),
			$lis = null;

		function handle() {
			$lis = $newsList.children('li');
			$lis.each(function (index, item) {
				$(item).click(function () {
					alert(`我是第${index+1}个LI`);
				});
			});
		}
		handle();

		let count = 5;
		$createBtn.click(function () {
			let str = ``;
			for (let i = 0; i < 5; i++) {
				count++;
				str += `<li>我是第${count}个LI</li>`;
			}
			$newsList.append(str);
			handle();
		}); 
	</script> -->
</body>

</html>

四、拖拽

1.拖拽小案例
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>DRAG-拖拽</title>
	<!-- IMPORT CSS -->
	<link rel="stylesheet" href="css/reset.min.css">
	<style>
		html,
		body {
			height: 100%;
			overflow: hidden;
		}

		.box {
			position: absolute;
			top: 0;
			left: 0;
			width: 100px;
			height: 100px;
			background: red;
			cursor: move;
		}
	</style>
</head>

<body>
	<div class="box" id="box"></div>

	<script>
		//真实项目中，一般是用DOM2事件绑定来做

		box.addEventListener('mousedown', down);

		function down(ev) {
			this.startX = ev.pageX;
			this.startY = ev.pageY;
			this.startL = this.offsetLeft;
			this.startT = this.offsetTop;
			//=>把执行BIND处理后的函数存储到盒子的自定义属性上，绑定的时候绑定存储的这个方法，移除的时候也基于自定义属性获取到这个方法移除
			this._MOVE = move.bind(this);
			this._UP = up.bind(this);
			document.addEventListener('mousemove', this._MOVE);
			document.addEventListener('mouseup', this._UP);
		}

		function move(ev) {
			let curL = ev.pageX - this.startX + this.startL,
				curT = ev.pageY - this.startY + this.startT;
			let minL = 0,
				minT = 0,
				maxL = document.documentElement.clientWidth - this.offsetWidth,
				maxT = document.documentElement.clientHeight - this.offsetHeight;
			curL = curL < minL ? minL : (curL > maxL ? maxL : curL);
			curT = curT < minT ? minT : (curT > maxT ? maxT : curT);
			this.style.left = curL + 'px';
			this.style.top = curT + 'px';
		}

		function up(ev) {
			//up中的this改为box
			document.removeEventListener('mousemove', this._MOVE);
			document.removeEventListener('mouseup', this._UP);
		}
	</script>


	<script>
		/*
		box.onmousedown = down;

		function down(ev) {
			//=>把鼠标起始位置信息和盒子起始位置信息存储到盒子的自定义属性上
			this.startX = ev.pageX;
			this.startY = ev.pageY;
			this.startL = this.offsetLeft;
			this.startT = this.offsetTop;
			//=>按下来在给盒子绑定MOVE方法
			//=>谷歌浏览器中解决鼠标焦点丢失的问题（别绑定给盒子了，绑定给document），但是要注意move中的this已经是document了，而不是之前的box，我们需要处理一下
			document.onmousemove = move.bind(this);//用call会立即把move方法执行，用bind就是移动的时候才让他执行move方法
			document.onmouseup = up.bind(this);

		}

		function move(ev) {
			//=>随时获取当前鼠标的信息，计算盒子最新的位置
			let curL = ev.pageX - this.startX + this.startL,
				curT = ev.pageY - this.startY + this.startT;
			//=>边界判断
			let minL = 0,
				minT = 0,
				maxL = document.documentElement.clientWidth - this.offsetWidth,
				maxT = document.documentElement.clientHeight - this.offsetHeight;
			curL = curL < minL ? minL : (curL > maxL ? maxL : curL);
			curT = curT < minT ? minT : (curT > maxT ? maxT : curT);
			this.style.left = curL + 'px';
			this.style.top = curT + 'px';
		}

		function up(ev) {
			//=>鼠标抬起，把MOVE移除掉【DOM0事件绑定的方法，移除的时候直接赋值为null就可以了】
			document.onmousemove = null;
			document.onmouseup = null;
		}
		*/
 

		/*
		 *  //=>把鼠标和当前盒子拿绳子捆在一起
			this.setCapture();
			//=>把鼠标和盒子解绑
			this.releaseCapture(); 
			=>【解决鼠标移动过快，鼠标焦点丢失问题，但是谷歌不支持】
		 */
	</script>
</body>

</html>

拖拽原理图：
在这里插入图片描述

2.H5中的拖拽事件【不常用】
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>珠峰培训</title>
	<link rel="stylesheet" href="css/reset.min.css">
	<style>
		html,
		body {
			height: 100%;
			overflow: hidden;
		}

		#box {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 10;
			width: 100px;
			height: 100px;
			background: red;
			cursor: move;
		}

		#container {
			position: relative;
			box-sizing: border-box;
			margin: 30px auto;
			width: 300px;
			height: 200px;
			border: 2px solid lightseagreen;
		}
	</style>
</head>

<body>
	<div id="box" draggable="true"></div>
	<div id="container"></div>
	<!-- 
		HTML5中DRAG事件：可以把一个元素从当前位置拖拽到指定的容器中
			dragstart
			drag
			dragend
			dragover 拖动元素到指定的目标区域上
			drop 可以把拖动元素放到目标区域中了

		1.给要拖拽的元素设置可被拖拽属性
		  draggable="true"
		2.在拖拽开始的时候，记录一些信息
	 -->
	<script>
		box.ondragstart = function (ev) {
			//=>DragEvent:拖拽事件对象
			// dataTransfer（DataTransfer）：setData/getData/clearData 设置的内容最后都会变为字符串  setData(类型标识,对应的值)
			ev.dataTransfer.setData('@A', ev.target.id);
		}

		container.ondragover = function (ev) {
			ev.preventDefault();
		}
		container.ondrop = function (ev) {
			ev.preventDefault();
			let _ID = ev.dataTransfer.getData('@A'),
				_ELE = document.getElementById(_ID);
			container.appendChild(_ELE);
		}
	</script>
</body>

</html>
3.拖拽插件封装
/*
 * 简易的拖拽插件
 *    new Drag([selector],[options]); 
 * SELECTOR
 *    按住谁来实现拖拽
 * OPTIONS = {}
 *    element：拖拽中要移动的元素（默认值：当前按住的元素）
 *    boundary：是否进行边界校验 （默认值：true，不能超过要移动元素所在容器的范围，需要开发者保证：当前移动的元素是相对于它所在容器定位的）   
 * 
 *    生命周期函数（钩子函数）
 *    dragstart：拖拽开始
 *    dragmove：拖拽中
 *    dragend：拖拽结束
 */
~ function () {
	/*
	 * 拖拽插件封装 
	 */
	class Drag {
		constructor(selector, options) {
			this.initParams(selector, options);
			this._selector.addEventListener('mousedown', this.down.bind(this));
		}
		//=>参数初始化（尽可能把一切信息都挂载到实例上，这样在其它方法中，只要能获取到实例，这些信息都可以调用 =>我们尽可能保证每个方法中的THIS都是实例）
		initParams(selector, options = {}) {
			this._selector = document.querySelector(selector);

			//=>配置项的默认值信息
			let defaultParams = {
				element: this._selector,
				boundary: true,
				dragstart: null,
				dragmove: null,
				dragend: null
			};
			defaultParams = Object.assign(defaultParams, options);

			//=>把配置项信息都挂载到实例上
			Drag.each(defaultParams, (value, key) => {
				this['_' + key] = value;
			});
		}
		//=>实现拖拽的效果
		down(ev) {
			let {
				_element
			} = this;
			this.startX = ev.pageX;
			this.startY = ev.pageY;
			this.startL = Drag.queryCss(_element, 'left');
			this.startT = Drag.queryCss(_element, 'top');
			this._move = this.move.bind(this);
			this._up = this.up.bind(this);
			document.addEventListener('mousemove', this._move);
			document.addEventListener('mouseup', this._up);
			//=>钩子函数处理
			this._dragstart && this._dragstart(this, ev);
		}
		move(ev) {
			let {
				_element,
				_boundary,
				startX,
				startY,
				startL,
				startT
			} = this;
			let curL = ev.pageX - startX + startL,
				curT = ev.pageY - startY + startT;
			if (_boundary) {
				//=>处理边界
				let parent = _element.parentNode,
					minL = 0,
					minT = 0,
					maxL = parent.offsetWidth - _element.offsetWidth,
					maxT = parent.offsetHeight - _element.offsetHeight;
				curL = curL < minL ? minL : (curL > maxL ? maxL : curL);
				curT = curT < minT ? minT : (curT > maxT ? maxT : curT);
			}
			_element.style.left = curL + 'px';
			_element.style.top = curT + 'px';

			//=>钩子函数处理
			this._dragmove && this._dragmove(this, curL, curT, ev);
		}
		up(ev) {
			document.removeEventListener('mousemove', this._move);
			document.removeEventListener('mouseup', this._up);
			
			//=>钩子函数处理
			this._dragend && this._dragend(this, ev);
		}
		//=>设置工具类的方法（把它当做类[普通对象]的私有属性）
		static each(arr, callback) {
			if ('length' in arr) {
				//=>数组||类数组
				for (let i = 0; i < arr.length; i++) {
					callback && callback(arr[i], i);
				}
				return;
			}
			//=>普通对象
			for (let key in arr) {
				if (!arr.hasOwnProperty(key)) break;
				callback && callback(arr[key], key);
			}
		}
		static queryCss(curEle, attr) {
			return parseFloat(window.getComputedStyle(curEle)[attr]);
		}
	}
	window.Drag = Drag;
}();
巨人张
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
事件委托版拖拽
fusheng_lee的博客
04-03 79
这个算是对上一个元素拖拽及原理案例的变性，这个是相同的作用，只不过通过。这个没有做溢出处理，具体方法可以参考上一个。也是对上一个项目的优化。
DOM事件机制之事件对象、事件委托和事件类型
qq_50748038的博客
08-25 198
event事件对象、事件委托和事件类型的简单总结
js原生 事件委托 拖拽功能
MENGCHIXIANZI的专栏
12-23 288
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个.
事件的委托以及拖拽效果
qq_45903009的博客
02-02 207
文章目录一：事件绑定的方式1·1：html元素内进行绑定1·2：JS进行绑定1·3：使用事件监听进行绑定1·4：事件监听的兼容性二：事件的委托2·1：委托的好处2·2：委托的实现方法2·3：例题：三：拖拽效果3·1思路3·2：拖拽的边界问题四：jSON对象4·1定义4·2操作4·3：json的转换五：事件的兼容 一：事件绑定的方式 1·1：html元素内进行绑定 1·2：JS进行绑定 1·3：使用事件监听进行绑定 事件源(元素).addEventListener(去掉on的事件,回调函数,[是否是捕获])
2020/4/26 拖拽与事件委托
qq1547511739的博客
04-26 141
拖拽（拖拽三剑客） mousedown(鼠标按下) 记录鼠标按下位置和被拖拽物体的相对距离 var offsetX = e.clientX - node.offsetLeft var offsetY = e.clientY - node.offsetTop mousemove(鼠标按下移动) 一致保持相对距离 node.style.left = e.clientX - offsetX + ...
ISO_16750-4：2010_Part 4：Climatic loads .pdf
09-05
Road vehicles — Environmental conditions and testing for electrical and electronic equipment — Part 4: Climatic loads 标准内容高清可复制，非扫描版。 道路车辆—电气和电子设备的环境条件和测试—第 4 ...
ISO-17458-4-2013-Part 4: Electrical physical layer specificatio
11-29
Road vehicles — FlexRay communications system — Part 4: Electrical physical layer specificationISO 17458-4:2013规定了FlexRay通信系统的电气物理层。FlexRay的电气物理层是为数据率高达10 Mbit/s的时间触发...
ISO_TS_7637-4：2020_Part 4：Electrical transient conduction
09-05
Part 4: Electrical transient conduction along shielded high voltage supply lines only 道路车辆—传导和耦合引起的电气干扰—第 4 部分：仅沿屏蔽高压电源线的电气瞬态传导 本文件规定了测试方法和程序，以...
GFI EventsManager 8.0 事件管理器 part4
03-07
预配置的处理规则可以进行高效的预设事件分类和管理 > 自动全天候 24/7 事件活动监控和报警 >强大的报告用于有效的网络活动监控并立即实现 ROI <br>GFI EventsManager是一个便于使用的事件管理解决方案，它能...
fullstackopen-part4：FullStackOpen的练习-第4部分
02-24
fullstackopen-part4：FullStackOpen的练习-第4部分
JavaScript学习的第十二天
hw2948502143的博客
03-29 659
文章目录事件冒泡阻止事件冒泡stopPropagatione.cancelBubble默认行为e.preventDefault() 阻止默认事件e.returnValue右键出现菜单 oncontextmenu的事件offset 都是只读属性，不能设置offsetParent获取offsetLeft offsetTop获取offsetWidth 和 offsetheight实现拖拽获取样式的兼容getComputedStylecurrentStyle常用方式 解决兼容使用三元运算符事件监听事件委托 事件冒泡
玩无限消乐的设计示例（基础篇）DataGridView控件添加拖放事件方法和委托
浤济的专栏
07-09 522
给DataGridView控件添加拖放事件方法，预备交换动画元素。         private void 玩无限消乐_DragDrop(object sender, DragEventArgs e)         {             Point 平面二维 = 玩无限消乐.PointToClient(new Point(e.X, e.Y));             玩无限消除
JS中的事件委托（事件代理）
weixin_30667301的博客
12-23 560
一步一步来说说事件委托（或者有的资料叫事件代理） js中事件冒泡我们知道，子元素身上的事件会冒泡到父元素身上。 事件代理就是，本来加在子元素身上的事件，加在了其父级身上。 那就产生了问题：父级那么多子元素，怎么区分事件本应该是哪个子元素的？ 答案是：event对象里记录的有“事件源”，它就是发生事件的子元素。 它存在兼容性问题，在老的IE下，事件源是 window.event.src...
html跟随鼠标事件,HTML5深入学习之鼠标跟随，拖拽事件
weixin_29304021的博客
06-07 698
知识点(鼠标跟随)：mousedown: 当用户用鼠标点击在某一元素上就会触发该事件mouseover: 当鼠标指针在某一元素上移动就会触发改事件下面这个例子的效果就是鼠标点击元素后，元素跟着鼠标移动独秀不爱秀* {padding: 0;margin: 0;}#one {width: 100px;height: 100px;background-color: red;position: abso...
前端实现可拖拽课程表【纯HTML、CSS、JS】
最新发布
菜菜的博客
05-15 2247
前端实现可拖拽课程表
详解事件代理（事件委托）以及应用场景
qq_60008492的博客
04-11 5251
事件代理（也称事件委托）事件代理，俗地来讲，就是把⼀个元素响应事件 （ click 、 keydown ......）的函数委托到另⼀个元素 前⾯讲到，事件流的都会经过三个阶段： 捕获阶段 -> ⽬标阶段 -> 冒泡阶段，⽽事件委托就是在冒泡阶段完成 事件委托 会把⼀个或者⼀组元素的事件委托到它的⽗层或者更外层元素上，真正绑定事件的是外层元 素，⽽不是⽬标元素 当事件响应到⽬标元素上时，会通过事件冒泡机制从⽽触发它的外层元素的绑定事件上，然后在外层元 素上去执⾏函数 应用场景 如果我们有⼀
Javascript中事件委托（delegate）是如何运行的
CSDN前端知识共享
09-21 3444
什么是事件委托（Event Delegation）
QT 委托事件之拖拽对象
小鱼游戏开发的博客
07-08 426
#ifndef DRAGEDGE_H #define DRAGEDGE_H #include &lt;QWidget&gt; class DragEdge : public QWidget { Q_OBJECT enum PointType{ LEFT_TOP,CENTER_TOP,RIGHT_TOP, LEFT_CENTER,RIGHT_CEN...
logstash ruby 分割原始事件为多个事件
04-29
在 Logstash 中，你可以使用 Ruby 进行事件处理。如果你想将原始事件分割为多个事件，可以使用 Ruby 的 `split` 方法。 假设你的原始事件长这样： ``` {"message": "foo,bar,baz"} ``` 你想将其分割成三个事件，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值