addEventListener、onclick和jquery的bind()、click()


addEventListener("click",function(event){},false);

removeEventListener("click",function(event){},false);

1 target.addEventListener(type, listener, options); 2 target.addEventListener(type, listener, useCapture); 3 target.addEventListener(type, listener ,{capture: Boolean, passive: Boolean, once: Boolean});

addEventListener是JS原生的綁定事件函數

target默認使用window,因此通常省略。

type為事件監聽類型,如“click”、"mouseup"等。

listener為監聽函數,默認帶有event參數,即function(event){}

useCapture Boolean 指在DOM樹中,注冊了該listener的元素,是否會先於它下方的任何事件目標,接收到該事件。沿着DOM樹向上冒泡的事件不會觸發被指定為use capture(也就是設為true)的listener。當一個元素嵌套了另一個元素,兩個元素都對同一個事件注冊了一個處理函數時,所發生的事件冒泡和事件捕獲是兩種不同的事件傳播方式。事件傳播模式決定了元素以哪個順序接收事件。進一步的解釋可以查看 事件流 及 JavaScript Event order 文檔。 如果沒有指定, useCapture 默認為 false 。對於事件目標上的事件監聽器來說,事件會處於“目標階段”,而不是冒泡階段或者捕獲階段。在目標階段的事件會觸發該元素(即事件目標)上的所有監聽器,而不在乎這個監聽器到底在注冊時useCapture 參數值是true還是false。

options可以使用一個參數也可以使用一個帶有三個參數的對象

  capture: Boolean,表示 listener 會在該類型的事件捕獲階段傳播到該 EventTarget 時觸發。其實就是useCapture。
  once: Boolean,表示 listener 在添加之后最多只調用一次。如果是 true, listener 會在其被調用之后自動移除。
  passive: Boolean,表示 listener 永遠不會調用 preventDefault()。如果 listener 仍然調用了這個函數,客戶端將會忽略它並拋出一個控制台警告。

解說:

  在事件分派時添加事件處理器,當一個 EventListener 在 EventTarget 正在處理事件的時候被注冊到 EventTarget 上,它不會被立即觸發,但可能在事件流后面的事件觸發階段被觸發,例如可能在捕獲階段添加,然后在冒泡階段被觸發。

  多個相同的事件處理器,同一個 EventTarget 注冊了多個相同的 EventListener,那么重復的實例會被拋棄。所以這么做不會使得 EventListener 被調用兩次,也不需要用 removeEventListener 手動清除多余的EventListener ,因為重復的都被自動拋棄了。

  處理過程中 this 的值的問題,通常來說this的值是觸發事件的元素的引用,這種特性在多個相似的元素使用同一個通用事件監聽器時非常讓人滿意。,當使用 addEventListener() 為一個元素注冊事件的時候,句柄里的 this 值是該元素的引用。其與傳遞給句柄的 event 參數的 currentTarget 屬性的值一樣。如果一個事件的屬性( 例如. onClick)是指定在一個HTML的元素上的,則這個屬性中的JavaScript語句實際上會被包裹在一個處理函數中,在這個處理函數中使用this的效果和使用addEventListener來綁定事件的效果是一樣的; this的出現代表了元素的引用。注意到在一個函數里this調用的的效果和標准規則里面是一樣的。

click()函數用於為每個匹配元素的click事件綁定處理函數。  

  該函數也可用於觸發click事件。click事件就是鼠標按鈕單擊事件。此外,你還可以額外傳遞給事件處理函數一些數據。此外,你可以為同一元素多次調用該函數,從而綁定多個事件處理函數。觸發click事件時,jQuery會按照綁定的先后順序依次執行綁定的事件處理函數。要刪除通過click()綁定的事件,請使用unbind()函數。該函數屬於jQuery對象(實例)。

1 jQueryObject.click( [ [ data ,]  handler ] )

  如果指定了至少一個參數,則表示綁定click事件的處理函數;沒有指定任何參數,則表示觸發click事件。

參數 描述
data 可選/任意類型觸發事件時,需要通過event.data傳遞給事件處理函數的任意數據。
handler 可選/Function類型指定的事件處理函數。

 

 

 

  jQuery 1.4.3 新增支持:click()支持data參數。參數handler中的this指向當前DOM元素。click()還會為handler傳入一個參數:表示當前事件的Event對象。click()函數的返回值為jQuery類型,返回當前jQuery對象本身。

  如果函數handler的返回值為false,則表示阻止元素的默認事件行為,並停止事件在DOM樹中冒泡。例如,<a>鏈接的click事件的處理函數返回false,可以阻止鏈接的默認URL跳轉行為。

經驗:

  在使用jqgrid框架開發時,需要將表格的特定行設置成不能選中,發現怎么修改click()事件,如添加函數event.preventDefault(),都不能阻止可選的上層組件監聽事件。最后深入了解click的api終於發現可以在傳入一個handler函數后再加一個false參數,一下就阻止了默認選中監聽事件,並阻止將事件觸發冒泡到table框架組件中,秀一秀代碼:

 1 $(function () {  2           setTimeout(function() {  3               $("table tbody tr").each(function(indexTr, elementTr) {  4                   $(elementTr).children("td[aria-describedby='basMgmtGridIdGrid_mainItem']:empty").  5                       each(function (indexTd, elementTd) {  6                       var rowid = $(elementTr).attr("id");  7                       $(elementTr).off("click").unbind("click").click(function(event) {}, false);  8                       $(elementTd).prevAll("td[aria-describedby='basMgmtGridIdGrid_cb']").  9                           children(":checkbox").attr("disabled","disabled").remove(); 10  }); 11  }); 12           }, 200); 13       });


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM