javascript基础（事件的委派）（三十三）

来源：互联网发布：关闭miui优化有影响吗编辑：程序博客网时间：2024/06/05 19:43
1事件的委派：
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">#u1{background-color: #bfa;}</style><script type="text/javascript">window.onload = function(){//点击按钮以后，向ul中添加一个新的超链接//获取按钮对象和ul对象var btn01 = document.getElementById("btn01");var u1 = document.getElementById("u1");//为按钮绑定单击响应函数btn01.onclick = function(){//创建一个livar li = document.createElement("li");//设置li中的内容li.innerHTML = '<a class="link" href="javascript:;">新超链接</a>';//将li添加到ul中u1.appendChild(li);};/*//获取所有的超链接var links = document.getElementsByTagName("a");//为所有的超链接都绑定一个单击响应函数for(var i=0 ; i<links.length ; i++){ * 这里我们通过for循环的形式来为每一个超链接都绑定了一个相同的单击响应函数， * 这里for循环每执行一次，函数就会重新创建一次，而且这些函数的功能还都是相同的。 *  * 而且我们所绑定事件都是仅限于现在已有的元素，而新添加的元素上是没有响应函数， * 还需要单独绑定，这样实在是太麻烦了 *  links[i].onclick = function(){alert("hello");};}*//* * 我们希望，响应函数只绑定一次，就可以应用到所有的元素上（包括新添加的元素） *  * 事件委派 * - 指统一将多个元素上的事件绑定到他们共同的祖先元素上， * 这样只需要绑定一次即可同时处理多个元素上的相同的事件， * 这样简化了代码的开发，也可以确保新添加的元素上也可以有事件响应函数 *  */u1.onclick = function(event){event = event || window.event;//判断当前触发事件的是否是超链接//如果是超链接，则触发事件，如果不是则不触发//alert(this);//alert(event.target);/* * 事件对象中target属性 * 事件是由谁触发的，target就是谁 */if(event.target.className == "link"){alert("ul上的单击响应函数");}};};</script></head><body><button id="btn01">点我一下</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><li><a href="javascript:;" class="link">超链接四</a></li></ul></body></html>
0 0