js為新添加元素添加綁定事件的實例代碼
不知道大家在寫js的時候碰沒碰到過這樣一個問題：算了，還是直接上代碼
就是有時我們使用querySelectAll(‘li’)只能獲取html原有的li1,li2,li3標簽，如果我們此時創(chuàng)建一個新的小li名為newLi并把它添加到div里面,querySelectAll(‘li’）就無法選取newLi。
<div>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</div>
<ul>
</ul>
<!--為一個元素添加事件，那么這個元素不論移到那里，不能是否綁定他，那么這個元素都將擁有這個事件-->
<script>
var li=document.querySelectorAll('li');//獲取所有的li元素
var div=document.querySelector('div');//獲取div元素
var newLi=document.createElement('li');//創(chuàng)建一個新的小li
newLi.innerHTML='我是新建的li4';//修改新的小li的HTML中的內容
div.appendChild(newLi);//把新的小li添加到div中
//遍歷所有l(wèi)i,為他們綁定點擊事件
li.forEach(function (el){
el.addEventListener('click',function (){
alert('我被點擊了');
})
})
var ul=document.querySelector('ul');
ul.appendChild(li[2]);
</script>因為 var li=document.querySelectorAll(‘li’); 把他放在第一行只能獲取前三個，因為新的 小li還沒有創(chuàng)建出來。
此時把 var li=document.querySelectorAll(‘li’);//獲取所有的li元素 放在添加新元素的后面就可以選取新建元素。
var div=document.querySelector('div');//獲取div元素
var newLi=document.createElement('li');//創(chuàng)建一個新的小li
newLi.innerHTML='我是新建的li4';//修改新的小li的HTML中的內容
div.appendChild(newLi);//把新的小li添加到div中
var li=document.querySelectorAll('li');//獲取所有l(wèi)i元素，包括新建的li元素上面的代碼是用原生的Javascript生成的，當此代碼執(zhí)行時，js會在頁面中生成第四個li標簽，且點擊這四個標簽的時候，都會觸發(fā)相應的動 作。那么是不是就是說，用js生成的HTML內容，都可以被綁定相應的事件呢？答案是否定的，在上面代碼的script標簽中，有兩個代碼段，代碼段一是 用來向HTML中插入內容的，代碼段二是用來綁定事件的，如果把代碼段一和代碼段二互換位置，發(fā)現JS生成的第四個li標簽沒有綁定上click事件
發(fā)現結果也一樣，事件執(zhí)行成功與否也代碼段的順序有直接的關系。
其實原來很好分析，無論是利用getElementsByTagName還是jquery的選擇器，當需要的內容還沒有被插入時，選擇器只會選擇頁面中已經存在的元素，所以事先沒有存在元素是綁定不了事件的。
但是，實際情況是，工作中有可能需要把后來生成的元素綁定上事件，并注冊上事件處理函數。
可以這樣理解，無論HTML內容是不是JS生成的，只要沒有跨域，所有頁面內的元素都屬于這個頁面，都能夠綁定事件，JS中有個非常重要的概念叫事件冒泡，簡單來講，就是子元素產生的事件，會一直冒泡到最頂級父元素，并能夠被父元素監(jiān)測到。
那么，我能不能在被插入元素的父元素上監(jiān)測冒泡產生的事件，并回調相應的函數呢？答案是當然是肯定的。
注意此時點擊事件是在添加元素的前面，通過事件委托的方式，我們可以實現為新建元素添加綁定事件
var li=document.querySelectorAll('li');//獲取所有l(wèi)i元素，包括新建的li元素
var li=document.querySelectorAll('li');//獲取所有的li元素
var div=document.querySelector('div');//獲取div元素
var newLi=document.createElement('li');//創(chuàng)建一個新的小li
newLi.innerHTML='我是新建的li4';//修改新的小li的HTML中的內容
div.addEventListener('click',function (e){
console.log(e.target);
})
div.appendChild(newLi);//把新的小li添加到div中我們也可以使用jquery的on()方法實現，來看下面的例子，注意點擊事件是在創(chuàng)建li標簽的后面。
為ul添加點擊事件，但觸發(fā)事件的是ul里面的li的元素
$('ul').on('click','li',function (){
alert('我是新建li')
});
$('ul').append("<li></li>");使用delegatef方法也可以實現
$(".createDiv").delegate('agin', 'clik', function () {
alert(‘我是新建小li');
});總結
到此這篇關于js為新添加元素添加綁定事件的文章就介紹到這了,更多相關js新添加元素添加綁定事件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了thinkjs微信中控之微信鑒權登陸的實現代碼,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
這篇文章主要介紹了JS中關于filter()方法的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
JavaScript setTimeout()基本用法有哪些
這篇文章主要介紹了JavaScript setTimeout()基本用法有哪些,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-11-11
這篇文章主要介紹了CORS與預檢請求，CORS是一套規(guī)范，指導瀏覽器和服務器之間如何進行跨域資源共享，當發(fā)送跨域請求時，瀏覽器會先發(fā)送一個OPTIONS方法的預檢請求。文中介紹的非常詳細，需要的同學可以參考一下2023-04-04
uni-app彈出層uni-popup使用及修改默認樣式的方法實例
我們在使用uniapp開發(fā)的時候,有時可以使用uniapp自有的樣式模板,這樣可以提高開發(fā)效率,下面這篇文章主要給大家介紹了關于uni-app彈出層uni-popup使用及修改默認樣式的相關資料,需要的朋友可以參考下2022-11-11
Wavesurfer.js是一款基于HTML5 canvas和Web Audio的音頻播放器插件，本文主要記錄它及其視覺效果插件Regions插件的使用方法，感興趣的朋友跟隨小編一起看看吧2018-10-10
這篇文章主要介紹了JS使用正則表達式提交頁面驗證的代碼，本文圖文實例代碼相結合給大家介紹的非常詳細,需要的朋友可以參考下2019-10-10
為了讓自定義選擇選擇出的節(jié)點集合盡可能接近原生API選出的結果，我們往往要對結果集進行排序，此順序當然是從上到下，從左到右的DOM樹順序。2011-01-01
JS 滾動事件window.onscroll與position：fixed寫兼容IE6的回到頂部組件
這篇文章主要介紹了JS 滾動事件window.onscroll與position：fixed寫兼容IE6的回到頂部組件的相關資料,需要的朋友可以參考下2016-10-10
下面小編就為大家?guī)硪黄獪\談bootstrap源碼分析之tab(選項卡)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06