事件的委派------梅花

最新推荐文章于 2023-08-17 17:45:30 发布

AAAAA人人爱

最新推荐文章于 2023-08-17 17:45:30 发布

阅读量128

点赞数

分类专栏： JavaScript 文章标签： js javascript dom

本文链接：https://blog.csdn.net/m0_49301210/article/details/108422766

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

我们先来写一下body部分吧！先来写两个button标签，用于增加下面的li

<body>
	<button id="btn">添加</button>
	<button id="btnp">添加p标签</button>
	<ul id="u1">
		<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>

获取一下文本中的这些标签吧

//获取所有的a
var allA = document.getElementsByClass('link');
//获取btn按钮
var btn = document.getElementsById('btn');
//获取ul
var ul = document.getElementsByTagName('ul');
//获取btnp
var btnp = document.getElementsByTagName('btnp');

分别给btn，btnp按钮添加一个单机响应事件，分别创建一个a连接和p标签

var ul = document.getElementById('u1');
btn.onclick = function(){
	//创建一个li
	var li = document.createElement('li');
	//给li里面添加内容
	li.innerHTML = '<a href="javascript:;" class="link">新增的超链接</a>';
	ul.appendChild(li);
	}
	//创建p标签
	var btnp = document.getElementById('btnp');
	btnp.onclick = function(){
		var li = document.createElement('li');
		li.innerHTML = '<p>我是P标签</p>';
		ul.appendChild(li);
	}

4.我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的，并且只给我们的a连接添加事件，p标签不添加，那么我们这个时候就需要用到事件的委派

事件的委派：指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件
事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
所以在这个时候我们需要在父级ul上面做文章

//给父级元素绑定响应事件
	ul.onclick = function(event){
		/*  event中的target表示的触发事件的对象  */
		if(event.target.className == 'link'){
			alert('我是超链接的响应事件');
		}
	}

AAAAA人人爱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件的委派------梅花

我们先来写一下body部分吧！先来写两个button标签，用于增加下面的li<body> <button id="btn">添加</button> <button id="btnp">添加p标签</button> <ul id="u1"> <li><a href="javascript:;" class="link">第一个超链接</a></li> <li>.
复制链接

扫一扫