為未來元素繫結事件(JavaScript和jquery兩種方法對比)
阿新 • • 發佈：2019-02-03
小白 ~_~!! 日常打醬油
一般我們為已經存在的元素繫結事件,那麼直接獲取這個元素的id,直接繫結上去就可以了. 但當這個元素不存在,將會我們又會新增進去的時候,直接獲取目標元素id繫結事件就會對未來新新增的元素失效了!!. 也就是你後來新新增這個元素,是無法被觸發的,事件根本就沒有被繫結上去.但是還是有解決辦法滴.
(JavaScript)解決辦法:
1. 通過它的父元素
2. 藉助事件屬性target :target事件屬性可返回事件的目標節點(觸發該事件的節點),語法: event.target
(jquery)解決辦法:
1.使用on
注意: jquery確實是懶人必備,但是不能忘本.知道JavaScript怎麼寫了,jquery用起來也有理有據.只知道jquery,不知道JavaScript就不會有一種知道這麼用,但是很飄的感覺~.
貼出程式碼:
如下動圖:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul id="ul-test"> <li>星期一</li> <li>星期二</li> <li>星期三</li> <li>星期四</li> <li>星期五</li> </ul> </body> <script type="text/javascript" src="js/jquery.min.js"></script> <script> //原生JavaScript,需要一個個繫結,如果是未來元素li,頁面載入了,在通過js動態加進來,這種寫法無效,點選li沒有反應 /*var ol = document.getElementById("ul-test"); var oli = ol.getElementsByTagName("li"); for (var i =0 ,len = oli.length;i <len;i++ ) { oli[i].addEventListener("click",function(){ alert(this.innerHTML); }) } var lis =document.createElement("li"); var node = document.createTextNode("這是我新新增的li"); lis.appendChild(node); ol.appendChild(lis);*/ //為了解決未來元素也能夠被繫結事件,可以採取事件委託的辦法來解決,就是把事件綁在ul上面 /* var oul = document.getElementById("ul-test"); oul.addEventListener("click",function(ev){ var ev = ev || window.event; var target = ev.target || ev.srcElement; alert(target.tagName); if(target.tagName.toLocaleLowerCase()==="li"){ alert(target.innerHTML) } }) var lis =document.createElement("li"); var node = document.createTextNode("這是我新新增的li"); lis.appendChild(node); oul.appendChild(lis);*/ //接下來看一下jquery是如何實現.利用on就可以輕鬆搞定,jquery就是寫最少的程式碼,幹最多的活 $(function() { $("ul").on("click", function(ev) { s = ev.target; alert($(s).html()); }) $("#ul-test").append("<li>我是新新增的,請為我繫結事件!</li>"); }) </script> </html>
可以看到當我點選新新增的元素的時候,也能夠正常繫結到事件了.註釋掉的那兩部分一個是直接獲取元素id繫結(失效了) ,另一個是通過父元素(這個方法是可行的).