js事件委托target

本文轉載自查看原文 2020-03-02 09:04 823 前端

**看一看，瞧一瞧！**

話說要談事件委托和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>

請各位大佬能指出缺漏之處，讓我得以更加完善，使文章能給自己和他人的提高略盡綿薄之力，幫助我們更加向前！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js中的事件委托 JS事件委托 Js 事件原理與事件委托 JS - target 事件屬性 JS事件冒泡、事件捕獲及事件委托關於原生Js的事件委托實現 js的事件的三個階段,事件委托的原理【JS】JS事件綁定、事件監聽、事件委托理解js事件冒泡事件委托事件捕獲 js 事件委托獲取子元素下標