javascript基础(事件的委派)(三十三)
2017-02-14 16:07
302 查看
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(){ //创建一个li var 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>
相关文章推荐
- javascript的事件处理(一)——基础原理
- 重拾Javascript基础(四) - BOM&DOM事件
- 基础知识javascript--事件
- [学习笔记]JavaScript基础--提取事件
- JavaScript 事件基础补充
- javaScript进阶-事件委派
- JavaScript基础----25JS事件详解-事件对象
- Javascript基础知识(二)事件
- Javascript基础知识(一)核心基础语法与事件模型
- JavaScript基础----23JS事件详解-事件流
- javascript 事件(基础)0831
- JavaScript事件基础知识总结【思维导图】
- JavaScript相关-基础语法,常用对象和简单事件
- javascript基础——鼠标事件,系统对话框等
- JavaScript的事件和委派
- javascript的事件处理(一)——基础原理
- Javascript 跨浏览器基础事件,浏览器检测,判断浏览器的名称、版本号、操作系统
- javascript基础-事件1
- javascript基础学习之-事件冒泡
- JavaScript基础----24JS事件详解-事件处理