2. 程式人生 > >JavaScript為動態生成的標籤繫結事件-引數

JavaScript為動態生成的標籤繫結事件-引數

阿新 • • 發佈：2019-01-15

熟悉用C#,Java語言的人都知道，為一個動態生成的控制元件繫結事件都有固定的事件引數，而JavaScript同樣可以傳遞引數。
不同的是JavaScript一般只支援傳遞一個引數，而且，這個引數是一個複雜的物件：
event引數
可以看到傳遞的引數是一個十分複雜的類，大多數屬性都可以通過屬性名識別，這裡對path左下解析。
“path”展開後，可以看到從內到外一次排列的標籤（物件）名。
path
一般情況下，我們為標籤繫結事件是為了控制這個標籤，在靜態繫結的事件中，可以以“this”進行方便的傳遞，而動態繫結的事件則可以通過這一“path”屬性達到訪問標籤的效果。

<body>
        <div
 
>
            <div id="nav" style="background: grey;overflow: hidden;" >
                <p onclick="lan_Click()">程式語言</p>
                <ul id="language"></ul>
            </div>
            <div id="content">

            </div>
        </div>
        <script
 
 type="text/javascript">
            function lan_Click() {
                var lan = document.getElementById("language");
                var lans = ["C", "C++", "Java", "Php", "C#"];

                if(lan.children.length == 0){
                    for(var i = 0; i < lans.length; i++) {
                        var
 
 li = document.createElement("li");
                        li.innerHTML = lans[i];
                        //動態繫結事件
                        li.addEventListener("click",function(e){
                            console.log(e.path[0].innerHTML);
                        });
                        lan.appendChild(li);
                    }
                }else{
                    lan.innerHTML = null;
                }
            }
        </script>
    </body>

同樣的，也可以根據需求訪問相應的“path”來訪問相應的標籤即可。
效果

以上就是對動態繫結事件引數傳遞的淺談。

相關推薦

JavaScript為動態生成的標籤繫結事件-引數

熟悉用C#,Java語言的人都知道，為一個動態生成的控制元件繫結事件都有固定的事件引數，而JavaScript同樣可以傳遞引數。 不同的是JavaScript一般只支援傳遞一個引數，而且，這個引數是一個複雜的物件： 可以看到傳遞的引數是一個十分複雜的類，

easyUI 導航欄動態生成時繫結事件不相應

            一個困擾兩天的問題。demo取的是easyUI官網上的例子。            最近在接觸easyUI輕量級框架的時候，看到一個模板款式蠻好看的。          一個標準的 分為North ,south,west以及center 在生成導

關於動態生成dom繫結事件失效的原因及解決和live()

在測試給動態生成的dom繫結事件的時候發現事件失效，於是就測試了一下： 1. 事件失效的原因： （1）bind事件繫結只對dom中存在的元素有效，對於我們後來動態增加的元素是監測不到，所以繫結不了 （2）同樣，當你使用var aa = document.getElemen

給動態動態生成元素繫結事件不生效解決方法

JQ動態生成的元素，無法繫結事件，查詢到的原因是：繫結事件的元素必須是構造頁面時已經存在的，假如構造元素是不存在，是後動態生成，則繫結不了，解決方法，通過on()繫結舉例:$("body").on("c

jquery 動態生成表 繫結click事件，獲取同行資料

這個問題糾結了好久，動態生成的表格，直接按照普通方式，onclick=“afun();”  無法在function內獲取到正確的this，就無法獲取表格其他項資料。繫結也無法成功，直接沒反應。 後來debug了一下，感覺jquery繫結事件實在載入前進行的，此時還沒有動態生

javascript實現動態模態繫結grid

<html> <head> <style type="text/css"> .grid{border:1px solid #808080; border-spacing:0; width:500px; border-collapse:collapse}

Android_安卓為按鈕控制元件繫結事件的五種方式

寫在最前面 　　　　本次，來介紹一下安卓中為控制元件--Button繫結事件的五種方式。 二、具體的實現 　　　　第一種：直接繫結在Button控制元件上： 　　　　　　　　步驟1.在Button控制元件上設定android:onClick="，其中這個屬性的屬性值對應的是MainA

a標籤繫結事件

<a href="javascript:void(0);" onclick="js_method()"></a> 這種方法是很多網站最常用的方法，也是最周全的方法，onclick方法負責執行js函式，而void是一個操作符，void(0)返回undefined，地址不發生跳轉。而且這

jquery html 動態新增元素繫結事件

由於實際的需要，有時需要往網頁中動態的插入HTML內容，並在插入的節點中繫結事件處理函式。我們知道，用Javascript向HTML文件中 插入內容，有兩種方法， 一種是在寫HTML程式碼寫入JS，然後插入到文件中； 另外一種是通過ajax的方式，從伺服器獲取資料，然

li標籤繫結事件

關於在前端面試中，經常會被技術人員問道在ul標籤中有一組li標籤，你如何點選每個li並顯示相應的內容，最初我的想法是用for迴圈給每個li新增click事件，然而產生了閉包的效果，為了解決這個問題，我又對程式碼進行了下面的更改。 <ul> <li>1

asp.net動態生成控制元件，併為控制元件繫結事件

1.動態查詢控制元件的例子:         //查詢控制元件         Image img = (Image)Page.FindControl("Image1");         //設定圖片資源         img.ImageUrl = "~/image/p

jQuery 動態生成on的繫結事件

該段程式碼實現的是穿梭框： // on的繫結事件傳引數 var clickEven = [ {id:"#demo01",class:".class0",list:"#demo02"}, {id:"#demo02",class:".class0",lis

jQuery動態生成的元素如何繫結事件

 這段時間在寫程式碼的時候遇到一個問題，通過append()新增的節點，點選事件不起作用。當時我百思不得其解，各種找錯都沒找到錯誤的原因。後來才發現是動態生成節點的問題，還是自己沒有經驗啊。   下面來

JavaScript動態繫結事件

什麼是動態繫結事件？ js最突出優點在於能動態修改頁面樣式和動態修改頁面內容，然而在我們開發過程中，將動態新增的元素中繫結事件的現象稱為動態繫結事件。 動態繫結無法觸發js的案例？ <html> <head> <meta char

關於jquery 的繫結事件on 如何繫結動態生成的dom元素

今天遇到個問題，在table裡面動態更新資料，然後每一行會繫結相應的點選事件 我原本是想用 可作用於未來元素的on方法，但是實際上還是沒有起作用，程式碼如下： $(".form-table tbod

AngularJS中，如何給動態生成的元素繫結事件

1 . 我們知道在jquery中，動態生成一個元素，如果要在動態生成元素的同時，動態繫結事件，可以通過live/on方法（在jquery3.0中已經廢除了bind方法）。 2 . 在angularjs中，操作DOM一般在指令中完成，事件監聽機制是在對於已經靜態

jQuery-為動態新增的元素繫結事件(以及不重複新增新的內容)

在使用jQuery的方式為元素繫結事件時，我經常使用bind或者click,但這隻能為頁面已經載入好的元素繫結事件。像需要用ajax的方式請求遠端資料來動態新增頁面元素時，顯然以上幾種繫結事件的方式是無效的 $(selector).bind(event,d

jQuery動態新增li標籤並新增屬性和繫結事件

程式碼如下： <%@page import="java.util.ArrayList"%> <%@ page language="java" contentType="text/h

動態生成控制元件-繫結事件（VB.NET/C#）

動態生成控制元件後繫結事件的語句: C#:TextBox tbb=new TextBox();tbb.ID="tb";tbb.Width=80;tbb.AutoPostBack=true;tbb.Tex

動態新增的標籤繫結click事件不響應和關於IOS下click事件委託失效的解決方案

給動態新增的標籤使用jQuery繫結click事件不響應以及iOS裝置上click事件委託失效問題 不響應原因：當它使用jQuery繫結click事件時，對應的DOM物件還沒有生成，所以會不響應 解決方案1：可以使用代理事件來解決，程式碼1如下，但是使用下面這個程式碼1會引