- 我们先来写一下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('我是超链接的响应事件');
}
}