js基础---事件的委派
时间:2021-09-05
本文章向大家介绍js基础---事件的委派,主要包括js基础---事件的委派使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<!DOCTYPE html> <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(){ //创建一个li var li = document.createElement("li"); li.innerHTML = "<a href='javascript:;' class='link'>新建的超链接</a>"; //将li添加到ul中 u1.appendChild(li); }; /* * 为每一个超链接都绑定一个单击响应函数 * 这里我们为每一个超链接都绑定了一个单击响应函数,这种操作比较麻烦, * 而且这些操作只能为已有的超链接设置事件,而新添加的超链接必须重新绑定 */ //获取所有的a var allA = document.getElementsByTagName("a"); //遍历 /*for(var i=0 ; i<allA.length ; i++){ allA[i].onclick = function(){ alert("我是a的单击响应函数!!!"); }; }*/ /* * 我们希望,只绑定一次事件,即可应用到多个的元素上,即使元素是后添加的 * 我们可以尝试将其绑定给元素的共同的祖先元素 * * 事件的委派 * - 指将事件统一绑定给元素的共同的祖先元素,这样当后代元素上的事件触发时,会一直冒泡到祖先元素 * 从而通过祖先元素的响应函数来处理事件。 * - 事件委派是利用了冒泡,通过委派可以减少事件绑定的次数,提高程序的性能 */ //为ul绑定一个单击响应函数 u1.onclick = function(event){ event = event || window.event; /* * target * - event中的target表示的触发事件的对象 */ //alert(event.target); //如果触发事件的对象是我们期望的元素,则执行否则不执行 if(event.target.className == "link"){ alert("我是ul的单击响应函数"); } }; }; </script> </head> <body> <button id="btn01">添加超链接</button> <ul id="u1" style="background-color: #bfa;"> <li> <p>我是p元素</p> </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>
简化
window.onload = function(){ document.querySelector("#box1").onclick = function(event){ event = event || window.event; if(event.target.className == "Link"){ alert("事件委派"); } } document.querySelector("button").onclick = function(){ // document.querySelector("#box1").innerHTML += "<li><a href='javascript:void(0);'>新添加的</a></li>"; var li = document.createElement("li"); li.innerHTML = "<a href='javascript:void(0);' class='Link'>新添加的</a>"; document.querySelector("#box1").appendChild(li); } }
原文地址:https://www.cnblogs.com/leiyanting/p/15230726.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法