快捷導(dǎo)航

Jquery 動態(tài)添加元素并添加點擊事件實現(xiàn)過程解析

更新時間：2019年10月12日 14:57:55 作者：Zero_追夢

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

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

1. 語法

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

2. 實例

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

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

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

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

代碼：

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

     ......
   }, boolean);

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

您可能感興趣的文章: