JS基础笔记_冒泡 委托 绑定

最新推荐文章于 2024-11-18 12:11:58 发布
最新推荐文章于 2024-11-18 12:11:58 发布
阅读量183 收藏
点赞数
分类专栏： WEB 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Quc2019/article/details/104784168
版权

添加事件：

              1.   确定添加对象和事件类型    --- 哪个对象 ？什么事件？

              2.   完成事件业务函数  ---     实现回调函数

              3.    是否可以利用事件特性？ 冒泡 ，委托 ， 绑定。  

 

 ##事件的冒泡（Bubble）
指的是事件的向上传导，当后代元素的事件被触发时，其祖先元素的相同时间也会被触发

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 300px;
				height: 300px;
				background-color: lightpink;
			}
			#box2{
				width: 200px;
				height: 200px;
				background-color: lightgreen;
			}
			#box3{
				width: 100px;
				height: 100px;
				background-color: yellowgreen;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var box1 = document.getElementById("box1");
				var box2 = document.getElementById("box2");
				var box3 = document.getElementById("box3");
				
				box1.onclick = function(){
					alert("我是box1");
				};
				box2.onclick = function(){
					alert("我是box2");
				};
				box3.onclick = function(){
					alert("我是box3");
				};
			};
			
		</script>
	</head>
	<body>
		<div id="box1">
			<div id="box2">
				<div id="box3"></div>
			</div>
		</div>
	</body>
</html>

 

可用事件对象来取消冒泡，将事件对象的cancleBubble设置为true 

box3.onclick = function(event){
	event = event || window.event;
	alert("我是box3");
	event.cancelBubble = true;
};

 

通过事件的冒泡，可以做出让div跟随鼠标移动的效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				height: 2000px;
				width: 1500px;
			}
			
			#box1{
				width: 100px;
				height: 100px;
				background-color: coral;
				position: absolute;
			}
		</style>
		
		<script type="text/javascript">
			window.onload = function(){
				//获取box1
				var box1 = document.getElementById("box1");
				//
				//绑定鼠标响应函数
				document.onmousemove = function(event){
					event = event || window.event;
					
					//获取鼠标坐标
					//pageX和pageY可以获取鼠标相对于当前页面的坐标，但在IE8中不支持
					var x = event.clientX;//pageX
					var y = event.clientY;//pageY
					/*
					 *clientX和clientY 表示的是鼠标在当前可见窗口的坐标
					 * 因此如果出现滚动条就会出现错误
					 * 鼠标的坐标是当前窗口的坐标+滚动条滚动的距离
					 */
					 
					//获取滚动条滚动的长度
					var sv = document.body.scrollTop || document.documentElement.scrollTop;
					var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
					
					//给box1设置偏移量
					box1.style.left = x + sl + "px";
					box1.style.top = y + sv + "px";
				};
				
			};
		</script>
		
	</head>
	<body>
		<div id="box1"></div>
	</body>
</html>

 

 

 

##事件的委派


将事件统一绑定给元素共同的祖先元素（后代元素事件触发时，通过冒泡，通过祖先元素的响应函数来处理事件）
这样可以只绑定一次，即可应用到多个元素上
事件的委派利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能

event中的target表示的触发事件的对象
使用它对触发事件的元素进行判断
 

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				
				var u1 = document.getElementById("u1");
				//点击按钮以后添加超链接
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					//创建一个li
					var li = document.createElement("li");
					li.innerHTML = "<a href='javascript:;' class='link'>新建的超链接</a>";
					//将li添加到ul中
					u1.appendChild(li);
				};
				
				//获取所有的a
				var allA = document.getElementsByTagName("a");
				//为ul绑定一个单击响应函数
				u1.onclick = function(event){
					event = event || window.event;
					//如果触发事件的对象是我们期望的元素，则执行否则不执行
					if(event.target.className == "link"){
						alert("我是ul的单击响应函数");
					}
				};
			};
		</script>
	</head>
	<body>
		<button id="btn01">添加超链接</button>
		<ul id="u1" style="background-color: #bfa;">
			<li>
				<p>我是p元素</p>
			</li>
			<li><a href="javascript:;" class="link">超链接一</a></li>
			<li><a href="javascript:;" class="link">超链接二</a></li>
			<li><a href="javascript:;" class="link">超链接三</a></li>
		</ul>
	</body>
</html>

 

###事件的绑定

 

 /*
                 * 使用 对象.事件 = 函数 的形式绑定响应函数，
                 * 它只能同时为一个元素的一个事件绑定一个响应函数，
                   不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的

主流浏览器中使用 addEventListener()

          /*
                 * addEventListener()
                 *     - 通过这个方法也可以为元素绑定响应函数
                 *  - 参数：
                 *         1.事件的字符串，不要on
                 *         2.回调函数，当事件触发时该函数会被调用
                 *         3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false
                 * 
                 * 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，
                 *     这样当事件被触发时，响应函数将会按照函数的绑定顺序执行
                 *    addEventListener( "不加on事件",  function(  ){  } ,false);
                 * 这个方法不支持IE8及以下的浏览器
                 */

IE8及以下使用  attachEvent()

          /*
                 * attachEvent()
                 *     - 在IE8中可以使用attachEvent()来绑定事件
                 *  - 参数：
                 *         1.事件的字符串，要on
                 *         2.回调函数
                 * attachEvent( "加on事件" ，function(  ){  }  );
                 *  - 这个方法也可以同时为一个事件绑定多个处理函数，
                 *         不同的是它是后绑定先执行，执行顺序和addEventListener()相反
                 */
解决兼容性问题创建一个函数  bind() 

 

         /*    

                *  bind()

                * -  直接调用这个函数实现事件的 添加

                * 参数：

                *   1.要添加事件的对象

                *   2. 添加事件的名称字符串

                *   3. 事件回调函数

                *   bind( button ,  eventstr , callback ) ;

                *  -  函数实现   ：

                                  

		<script type="text/javascript">
			
			window.onload = function(){
				
				/*
				 * 点击按钮以后弹出一个内容
				 */
				//获取按钮对象
				var btn01 = document.getElementById("btn01");
				
				
			    使用 对象.事件 = 函数 的形式绑定响应函数，
				 它只能同时为一个元素的一个事件绑定一个响应函数，
				 不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的
			  	 
				
				//为btn01绑定一个单击响应函数
				/*btn01.onclick = function(){
					alert(1);
				};*/
				
				//为btn01绑定第二个响应函数
				/*btn01.onclick = function(){
					alert(2);
				};*/
				
				
				  addEventListener()
				  	- 通过这个方法也可以为元素绑定响应函数
				   - 参数：
				 		1.事件的字符串，不要on
				  		2.回调函数，当事件触发时该函数会被调用
				  		3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false
				  
				  使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，
				  	这样当事件被触发时，响应函数将会按照函数的绑定顺序执行
				  
				  这个方法不支持IE8及以下的浏览器
				 
				btn01.addEventListener("click",function(){
					alert(1);
				},false);
				
				btn01.addEventListener("click",function(){
					alert(2);
				},false);
				
				btn01.addEventListener("click",function(){
					alert(3);
				},false);
				
				
				  attachEvent()
				  	- 在IE8中可以使用attachEvent()来绑定事件
				   - 参数：
				  		1.事件的字符串，要on
				  		2.回调函数
				  
				   - 这个方法也可以同时为一个事件绑定多个处理函数，
				  		不同的是它是后绑定先执行，执行顺序和addEventListener()相反
				 
				btn01.attachEvent("onclick",function(){
					alert(1);
				});
				
				btn01.attachEvent("onclick",function(){
					alert(2);
				});
				/*
				btn01.attachEvent("onclick",function(){
					alert(3);
				});*/
				
				/*btn01.addEventListener("click",function(){
					alert(this);
				},false);*/
				
				/*btn01.attachEvent("onclick",function(){
					alert(this);
				});*/
				
				bind(btn01 , "click" , function(){
					alert(this);
				});
			
				
			};
			
			//定义一个函数，用来为指定元素绑定响应函数
			
			  addEventListener()中的this，是绑定事件的对象
			  attachEvent()中的this，是window
			   需要统一两个方法this
			 
			/*
			 * 参数：
			 * 	obj 要绑定事件的对象
			 * 	eventStr 事件的字符串(不要on)
			 *  callback 回调函数
			 */
			function bind(obj , eventStr , callback){
				if(obj.addEventListener){
					//大部分浏览器兼容的方式
					obj.addEventListener(eventStr , callback , false);
				}else{
					/*
					 * this是谁由调用方式决定
					 * callback.call(obj)
					 */
					//IE8及以下
					obj.attachEvent("on"+eventStr , function(){
						//在匿名函数中调用回调函数
						callback.call(obj);
					});
				}
			}
			
		</script>

 

JavaScript基础笔记
xiaomu6的博客
12-03 391
Math Date
JavaScript的数据类型、事件委托、事件冒泡、call、apply、bind区别......今日份复习总结笔记，希望也可以帮到大家~
weixin_55437576的博客
04-10 887
HTML部分 Src和href区别 1.src是指向外资源的位置。指向内容嵌入到当前位置，将资源下载并应用到文档中。在加载该资源时会暂停其他资源的处理，直到该资源执行完毕。因此js文件应该放在底部。 2.href指向网络资源所在的位置，建立连接。在识别文件时，不会停止对当前文档的处理。 3.用link处理css文件而不是import 4.link属于html标签，在加载页面时会被同时加载，权重大于import，不存在浏览器兼容问题 5.import是css提供的，在页面加载完成后才会被加载，只在
JavaScript基础速成笔记
m0_63670951的博客
02-05 1162
这篇笔记是b站课程[黑马前端JS课程]的笔记，发到博客上，大概一周时间粗略了解JS基础。
JS笔记（四）_this指向问题、事件委托、冒泡的理解
C_zhihao的博客
07-03 418
一.this指向 1.普通函数直接调用 var a = 1 function test(){ console.log(this.a) } test() //1 //因为test是直接调用的，没有其他的绑定规则，这里进行了默认绑定，将全局对象绑定this上， //所以this.a 就解析成了全局变量中的a 2.内置函数 function f(){ console.log(this) } setTimeout(f,1000) //window 3 .回调函数 v.
JavaScript - 基础+WebAPI（笔记）
qq_48937489的博客
05-10 4336
输入输出语法、数据类型、运算符、流程控制（分支语句、循环语句）、数组、对象、函数、DOM、事件监听、常用事件、事件对象、事件流、事件委托、日期对象、节点操作、window对象、正则表达式、本地存储
JS基础知识点：事件捕获、事件冒泡和事件委托
王小涵的笔记的博客
09-16 1676
简单的JS知识点
JavaScript基础学习笔记
Zzl_desu的博客
11-13 727
个人学习小记
React基础笔记--2
m0_62475892的博客
07-09 235
根据之前类的知识，我们知道每次。
实例分析JavaScript中的事件委托和事件绑定
laokdidiao的专栏
04-14 2134
我们在学习JavaScript中，难免都会去网上查一些资料。也许偶尔就会遇到“事件委托”（也有的称我“事件代理”，这里不评论谁是谁非。以下全部称为“事件委托”），尤其是在查JavaScript的事件处理的时候。但是，大多数时说的是“事件绑定”，对于“事件委托”，或是不提，或是浅尝辄止。对于我这个比较好奇的人来说，实在很蛋疼。尤其是想更多的了解“事件委托”的时候。 　　这次干脆一劳永逸，自己把
JS中事件处理机制（秒懂事件委托、事件捕获和事件冒泡）
2401_84435768的博客
07-04 591
当事件在 DOM 树中某个元素上触发时，事件首先会从根节点（document）开始，沿着DOM树向下传播直至达到目标元素。因此，如果在某个祖先元素上绑定了事件处理程序，并且该事件处理程序使用了事件捕获阶段，那么该事件处理程序会在目标元素的事件处理程序之前执行。因此，如果在某个祖先元素上绑定了事件处理程序，并且该事件处理程序使用了事件冒泡阶段，那么该事件处理程序会在目标元素的事件处理程序之后执行。因此，当我们将事件处理程序绑定到父元素上时，父元素可以代理处理子元素上的事件，这就是事件委托的原理。
web_js_study:js学习笔记
05-07
JavaScript，简称JS，是一种广泛应用于Web...以上就是“js全栈学习”笔记的主要内容，涵盖JavaScript的基础知识、DOM操作、异步通信、新特性和框架应用等多个方面，适合初学者和进阶者系统学习和提升JavaScript技能。
JavaScript 中级笔记 第一章
10-29
- **事件委托**: 利用事件冒泡特性，在更高层级的元素上处理子元素的事件。 **事件处理示例** ```javascript window.onload = function () { // 获取所有 <li> 元素 var listItems = document....
JavaScript学习笔记(一) JS基础+DOM+BOM
kianagrow的博客
05-04 380
1. JavaScript简介 1.1 JavaScript 是什么 JavaScript 是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行 现在也可以基于 Node.js 技术进行服务器端编程 1.2 JavaScript 的作用 ① 表单动态校验（密码强度检测） （ JS 产生最初的目的 ） ② 网页特效 ③ 服务端开发(Node.js) ④ 桌面程序(Electron) ⑤ App(Cordova).
网页作业9
小派蒙的博客
11-15 655
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>服务中心</title> <style> * { mar
【Node.js】Node.js 和浏览器之间的差异
佚名程序员
11-16 1154
Node.js 是一个基于 Chrome V8 引擎构建的开源 JavaScript 运行时，它使开发者能够在服务端运行 JavaScript 代码。Node.js 提供了高效的事件驱动和非阻塞 I/O 模型，广泛应用于构建快速、可扩展的网络应用。核心特性单线程：使用事件循环机制实现并发。非阻塞 I/O：适合高并发应用。模块化：采用 CommonJS 模块系统。浏览器是前端开发的主要运行环境。其核心任务是解析 HTML、CSS 和 JavaScript，并呈现网页内容。
阶乘递归javascript
2401_83905000的博客
11-18 95
【代码】阶乘递归javascript。
Nuxt2和Nuxt3 对于SEO优化的区别
书山有路_邓
11-14 579
nuxt
vue2 - 17.路由进阶
2301_81051419的博客
11-18 886
linkActiveClass 模糊匹配 类名自定义linkExactActiveClass 精确匹配 类名自定义。
打造技术文档指南
最新发布
欢迎来到我的博客，希望你能有所收获！
11-18 780
文档驱动开发
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值