JavaScript中事件的委任

最新推荐文章于 2023-03-26 19:35:25 发布

plannothing

最新推荐文章于 2023-03-26 19:35:25 发布

阅读量117

点赞数

分类专栏： js基础教程文章标签： js javascript event

本文链接：https://blog.csdn.net/plannothing/article/details/108036258

版权

js基础教程专栏收录该内容

101 篇文章 0 订阅

订阅专栏

<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(){

// alert(“添加一个超链接”);

				//创建一个li
				
				var li = document.createElement("li");
				li.innerHTML = "<a href = 'javascript:'; class = 'link'>新建的超链接</a>";
				//将li添加到ul中
				
				
				//将li添加到ul中
				u1.appendChild(li);
				
			};
			
			/*
			 * 为每一个超链接都绑定一个单击响应函数
			 * 这里我们为每个超链接都绑定一个单击响应函数，这种操作比较麻烦
			 * 	而且这些操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定
			 * 
			 */
			
			//获取所有的a
			
			var allA = document.getElementsByTagName("a");
			
			//遍历

// for(var i = 0;i<allA.length;i++){
// allA[i].onclick = function(){
// alert(“wo是点击响应函数”);
//
// };
/*
* 我们希望，只绑定一次事件，即可应用到多个元素上，即使元素是后添加的
* 我们可以尝试将其绑定给元素的共同祖先元素
*
* 事件的委派
* - 指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素
* 从而通过祖先元素的响应函数来处理事件
* - 事件委派是利用冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
*/

			//为u1绑定一个单击响应函数
			u1.onclick = function(event){
				
				event = event || window.event;

// alert(“我是ul的单击响应函数”);

				/*
				 * target
				 *  - event中target表示的触发事件的对象
				 */

// alert(event.target);

				//如果触发事件的对象是我们期望的元素，则执行否则不执行
				if(event.target.className == "link"){
					alert("我是U1的单击响应函数");
				}
			}
		}
	</script>
</head>
<body>
	
	<button id = "btn01">添加一个超链接</button>
	
	<ul id = "u1" style="background-color:#bfa;">
		<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>

网页上的效果
在这里插入图片描述

plannothing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中事件的委任

<html><head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> window.onload = function(){ //点击按钮以后添加超链接 var u1 = document.getElementById("u1"); var btn01 = document.g
复制链接

扫一扫