js事件委托target

**看一看,瞧一瞧!** 话说要谈事件委托和target。那我们首先来看看什么是事件。话说什么是事件呢?一般的解释是比较重大、对一定的人群会产生一定影响的事情。而在JavaScript中就不是这样...

**看一看,瞧一瞧!**

话说要谈事件委托和target。那我们首先来看看什么是事件。话说什么是事件呢?一般的解释是比较重大、对一定的人群会产生一定影响的事情。而在JavaScript中就不是这样了,事件就是指事情发生了,然后得到有效的处理的操作。为了您能更好的明白,我们来看看以下例子,让你更清楚什么是事件哦!

请不要眨眼

1、电话铃声响起(事件发生) —需要接电话(事件处理)
2、学生举手请教问题(事件发生) —需要解答(事件处理)
3、9点半提醒大家开始上课(事件发生)—打开直播开始上课(事件处理)
4、按钮被点击了(事件发生), —网页会反馈(事件处理)…## 明白了嘛!
当然了,我们熟知的还有鼠标事件、键盘事件、窗口事件表单事件。
那么问题来了
事件是怎样产生的呢?

oBtn.onclick = function(ev){ var e = ev || window.event;//系统自己产生一个事件对象 alert(e); } 

如何绑定事件

元素节点.on + 事件类型 = 事件处理函数;
事件对象:一旦事件出发,就会产生一个事件对象
(系统根据事件绑定自动生成的)。
【注】当点击按钮以后,系统会调用这个函数,系统会自动将事件对象,传入到函数的第一个参数。
好了看了这么久都是在为我们接下来的主题作铺垫,顺带帮大家回顾回顾哦!
接下来让我们看看什么是事件委托?
首先生活中的委托,大家很熟悉吧!
带饭
看了是不是有点豁然开朗呀!其实从身边的很多事都能表明我们时时刻刻都在接触事件委托。只是我们不习惯不擅长用代码去表示而已。
接下来让我们一起去看看代码中的委托长啥样吧!
简单的举个例吧!当我们在也页面创建‘ul’、‘li’无序列表时。我们通过获取ul并给它绑定点击事件,同时我们事件委托,委托ul的点击事件,将当前点击的li节点变成红色,找到触发对象,判断符合要求,如若符合,完成委托,把当前点击的li变为红色。疑问
该怎样判断呢?
通过event中的target来判断是否是我们所要找的节点

                //e.target就是点击的元素
    var target = e.target || window.event.srcElemen //判断target是否符合要求的元素节点 if(target.tagName.toLowerCase() == "li"){};

事件委托其实就是利用事件冒泡,将事件加在父元素或者祖先元素上,触发该事件。
从上面举例看来可以简单的来总结事件委托实现的步骤就是:
1、找要添加行为的节点的父节点或者祖先节点
2、将事件绑定在找到的父节点上
3、找到触发对象,判断是否符合要求,如果符合要求,进行后续操作。

window.onload = function(){ var UL = document.getElementById('ul1'); //委托ul上的点击事件,将当前点击的li节点变为红色 UL.onclick = function(ev){ var e = ev || window.event; var target = e.target || window.event.srcElement; //判断target是否符合要求的元素节点 if(target.tagName.toLowerCase() == 'li'){ //将当前点击这个li节点变成红色 target.style.backgroundColor = 'red'; } } }

众所周知事件委托,最重要的功能是提高程序运行效率。如果我们想在后面继续添加li标签,让他也拥有点击li节点会变成红色的效果,应该怎样做呢?不知道吧!让我来教你!

 window.onload = function(){ var UL = document.getElementById('ul1'); //委托ul上的点击事件,将当前点击的li节点变为红色 UL.onclick = function(ev){ var e = ev || window.event; var target = e.target || window.event.srcElement; //判断target是否符合要求的元素节点 if(target.tagName.toLowerCase() == 'li'){ //将当前点击这个li节点变成红色 target.style.backgroundColor = 'red'; } } var i = 6; var oBtn = document.getElementById("btn1"); oBtn.onclick = function(){ var newLi = document.createElement("li"); newLi.innerHTML = 111 * i++; oUl.appendChild(newLi); }

事件委托所能带来的好处有:
1、节省资源同时减少了dom操作,提⾼性能
2、对于新添加的元素也会有之前的事件
为了提升大家对事件委托的理解和能有效的运用事件委托解决问题,特别向大家列出几个有关事件委托的案例。
惊不惊喜!意不意外!
在这里插入图片描述
一、表格案例

<head>      
  <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> window.onload = function(){//获取节点 var aInputs = document.getElementsByTagName("input"); var oBtn = document.getElementById("btn1"); var oT1 = document.getElementById("t1"); //给按钮,添加点击 oBtn.onclick = function(){//获取输入框的行业列 var oCol = parseInt(aInputs[1].value); var oRow = parseInt(aInputs[0].value); //如果行和列中其中有一个不存在 if(!(oCol && oRow)){ alert("请输入行和列"); }else{ //根据行和列进行创建 //创建行 for(var i = 0; i < oRow; i++){ var oTr = document.createElement("tr"); //创建列 for(var j = 0; j < oCol; j++){ var oTd = document.createElement("td"); oTd.innerHTML = "行:" + i + ", 列:" + j; oTr.appendChild(oTd); } //最后面添加一个删除按钮 oTd = document.createElement("td"); var newBtn = document.createElement("button"); newBtn.innerHTML = "删除"; oTd.appendChild(newBtn); oTr.appendChild(oTd); oT1.appendChild(oTr); } } } //事件委托 oT1.onclick = function(ev){ var e = ev || window.event; var target = e.target || window.event.srcElement; //判断触发对象 if(target.tagName.toLowerCase() == "button" && target.innerHTML =="删除"){ oT1.removeChild( target.parentNode.parentNode); } } } </script> </head> <body> <input type="text" placeholder="行"> <input type="text" placeholder="列"> <button id = 'btn1'>创建表格</button> <table id = 't1' border="1px"> <!-- <tr> <td></td> </tr> --> </table> </body>

二、阻⽌右键菜单
在这里插入图片描述

<head>  
  <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>右键菜单</title> <style> #menu{ width: 100px; height: 100px; background-color: gray; position: absolute; color: white; display: none; } </style> <script> /* 当前页面上点击右键,弹出一个系统浏览器自带右键菜单。 1、在整个页面上,任何地方,点击右键,显示右键菜单,并且显示在我当前点击的这个位置 2、在页面上,点击除右键以外的别的键,右键菜单消失。 */ window.onload = function(){ //阻止系统右键菜单 document.oncontextmenu = function(){ return false; } var Menu = document.getElementById('menu'); //自定义一个右键菜单 document.onmousedown = function(ev){ var e = ev || window.event; if(e.button == 2){ //判断是否是右键,是右键 Menu.style.display = 'block'; Menu.style.left = e.pageX + 'px'; Menu.style.top = e.pageY + 'px'; }else{ //不是右键 Menu.style.display = 'none'; } } } </script> </head> <body style="height: 3000px;"> <h1>标题1</h1> <h1>标题1</h1> <div id = 'menu'> <ul> <li>选项1</li> <li>选项2</li> <li>选项3</li> </ul> </div> </body>

三、选项卡

<head>    
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>选项卡</title> <style> #div1 button{ width: 100px; height: 30px; background-color: gray; color: white; font-size: 18px; } #div1 div{ width: 360px; height: 360px; border: 1px solid black; background-color: gray; color: white; display: none; } #div1 .active{ background-color: orange; } </style> <script> window.onload = function(){ var Div1 = document.getElementById('div1'); var Btn = Div1.getElementsByTagName('button'); var Divs = Div1.getElementsByTagName('div'); //通过循环给每一个按钮添加点击 for(var i = 0;i<Btn.length;i++){ //给每个按钮添加下标 Btn[i].index = i; Btn[i].onclick = function(){ //先取消所有按钮样式,和隐藏所有div for(var j = 0;j<Btn.length;j++){ Btn[j].className = ''; Divs[j].style.display = 'none'; } this.className = 'active'; Divs[this.index].style.display='block'; } } } </script> </head> <body> <div id = 'div1'> <button class = 'active'>卡卡罗特</button> <button>贝吉塔</button> <button>特兰克斯</button> <div style = 'display: block;'>孙悟空,本名卡卡罗特,日本漫画及改编动画《龙珠》系列的主角,是来自贝吉塔行星的赛亚人。小时候以“下级战士”的身份被送到地球。被武道家孙悟饭收养并取名为“孙悟空”。小时候失控变成大猩猩踩死悟饭后独自生活在深山。有一天结识少女</div> <div>贝吉塔,日本漫画及改编动画《龙珠》系列中的主要角色。是战斗民族赛亚人的王子,拥有极高的自尊心。过去贝吉塔行星被弗利萨毁灭后(不知情,一直以为是被陨石撞击而毁灭。)在弗利萨军团那儿做事。初登场时是个侵略地球的反派角色,后被孙...</div> <div>特兰克斯,日本漫画《龙珠》系列的重要角色之一。赛亚人王子贝吉塔和地球科学家布尔玛之子,保卫地球的Z战士之一。龙珠系列中总共出现了4个特兰克斯,其实是属于4个平行时间线的同一个人:时空1(主时空)的特兰克斯以婴儿的身份初登场于《龙珠Z》人造人篇。少年时期性格任性、顽皮,剧情集中在《龙珠Z...</div> </div> </body>


target
概念:target叫事件源或者事件目标,指向触发事件的元素,可以用来触发对象。
语法:event.target
e.target(低版本IE浏览器不兼容)

   <head>        
   <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> /* 触发对象/目标对象 e.target(低版本IE浏览器不兼容) window.event.srcElement 【注】事件由谁而起的。 */ window.onload = function(){ var oUl = document.getElementById("ul1"); oUl.onclick = function(ev){ var e = ev || window.event; //触发对象 var target = e.target || window.event.srcElement; alert(target.innerHTML + ", " + target.tagName); } } </script> </head> <body> <ul id = 'ul1'> <li>1111</li> <li>2222</li> <li>3333</li> <li> <div>4444</div> </li> <p>5555</p> </ul> </body>

请各位大佬能指出缺漏之处,让我得以更加完善,使文章能给自己和他人的提高略尽绵薄之力,帮助我们更加向前! 

  • 发表于 2020-03-02 15:47
  • 阅读 ( 130 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除