快捷導(dǎo)航

Jquery 動(dòng)態(tài)添加元素并添加點(diǎn)擊事件實(shí)現(xiàn)過程解析

更新時(shí)間：2019年10月12日 14:57:55 作者：Zero_追夢(mèng)

這篇文章主要介紹了Jquery 動(dòng)態(tài)添加元素并添加點(diǎn)擊事件實(shí)現(xiàn)過程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

給動(dòng)態(tài)添加的元素添加js事件，不能直接添加js事件，需要借助on( )方法，給選擇器指定的子元素添加事件處理函數(shù)，并非選擇器本身；

1. 語法

$(selector).on(event,childSelector,data,function)
// event _ 需要添加的js事件
//childSelector _ 只能添加到指定的子元素上的事件處理程序
//data _ 調(diào)用函數(shù)時(shí)需要傳遞的參數(shù)
// function _ js函數(shù)發(fā)生時(shí)觸發(fā)的事件

2. 實(shí)例

//html代碼
<div id="div1" style="border:1px solid black;"></div> 
<script type="text/javascript">
  //在id為div_link的元素中動(dòng)態(tài)追加a
  $("#div1").html('<a id="div_link">鏈接點(diǎn)擊</a>');
  //觸發(fā)通過js動(dòng)態(tài)添加的超鏈接a
  $("#div1").on("click", "#div_link", function(){
   //點(diǎn)擊id為div_link時(shí)調(diào)用的處理函數(shù)
  });
</script>

3. 相關(guān)概念：事件冒泡、事件捕獲，默認(rèn)為事件冒泡

事件冒泡：從子元素到祖先元素觸發(fā)事件的執(zhí)行；子元素綁定了click事件，當(dāng)點(diǎn)擊子元素時(shí)，瀏覽器會(huì)向上查找綁有click事件的父、祖先元素，如有就執(zhí)行；默認(rèn)為事件冒泡；

事件捕獲：從點(diǎn)擊的元素到子元素執(zhí)行觸發(fā)的相同的事件；當(dāng)某個(gè)元素中綁定了click事件時(shí)，點(diǎn)擊此元素，瀏覽器會(huì)向下查找綁有click事件的子、后代元素，如有就執(zhí)行點(diǎn)擊事件；

代碼：

 //第一個(gè)參數(shù)：所綁定的事件；
 //第二個(gè)參數(shù)：觸發(fā)事件后執(zhí)行的方法；
 //第三個(gè)參數(shù)：決定是事件冒泡-false還是事件捕獲-true；默認(rèn)為false-事件冒泡；
 elem.addEventListener("click", function(){

     ......
   }, boolean);

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: