jq與js中的事件機制與阻止

JQuery中的事件綁定，都是屬於事件冒泡，本文我們就和大家分享jq與js中的事件機制與阻止。

JQuery中綁定事件處理函數的幾種方式，都不允許我們傳遞事件類型（是事件冒泡，還是事件捕獲）。例如：

.on(events [, selector ] [, data ], handler)

參數
events  - String類型一個或多個用空格分隔的事件類型和可選的命名空間，例如”click”、”focus click”、 」keydown.myPlugin」。
eventsMap   - Object類型一個Object對象，其每個屬性對應事件類型和可選的命名空間(參數events)，屬性值對應綁定的事件處理函數(參數handler)。
selector    - 可選/String類型一個jQuery選擇器，用於指定哪些後代元素可以觸發綁定的事件。如果該參數為null或被省略，則表示當前元素自身綁定事件(實際觸發者也可能是後代元素，只要事件流能到達目前元素即可)。
data    - 可選/任一類型觸發事件時，需要透過event.data傳遞給事件處理函數的任意資料。
handler - Function類型指定的事件處理函數。

原生javascript提供的addEventListener()允許設定事件的類型

element.addEventListener(event, function, useCapture)

參數
event   - 必須。字串，指定事件名。

注意: 不要使用 “on” 前綴。 例如，使用 “click” ,而不是使用 “onclick”。

function    - 必須。指定要事件觸發時執行的函數。

當事件物件會作為第一個參數傳入函數。 事件物件的類型取決於特定的事件。例如， “click” 事件屬於 MouseEvent(滑鼠事件) 物件。
useCapture  - 可選。布林值，指定事件是否在捕獲或冒泡階段執行。

可能值:
true - 事件句柄在捕獲階段執行
false- false- 預設。事件句柄在冒泡階段執行

阻止事件傳播的2種方式

方式1：使用event物件的stopPropagation()函數，這種做法與javascript一致。

$("#outC").click(function(event){  
    event.stopPropagation();  
});

方式2：事件處理函數的回傳值false，javascript中的addEventListener沒有這個功能。

$("#outC").click(function(event){  
    return false;  
});

                           

#版權聲明：此文章中為我的個人站Keyon Y，轉載請註明出處。

JQuery中的事件綁定，都是屬於事件冒泡。

JQuery中綁定事件處理函數的幾種方式，都不允許我們傳遞事件類型（是事件冒泡，還是事件捕獲）。例如：

.on(events [, selector ] [, data ], handler)

參數
events  - String類型一個或多個用空格分隔的事件類型和可選的命名空間，例如”click”、”focus click”、 」keydown.myPlugin」。
eventsMap   - Object類型一個Object對象，其每個屬性對應事件類型和可選的命名空間(參數events)，屬性值對應綁定的事件處理函數(參數handler)。
selector    - 可選/String類型一個jQuery選擇器，用於指定哪些後代元素可以觸發綁定的事件。如果該參數為null或被省略，則表示當前元素自身綁定事件(實際觸發者也可能是後代元素，只要事件流能到達目前元素即可)。
data    - 可選/任一類型觸發事件時，需要透過event.data傳遞給事件處理函數的任意資料。
handler - Function類型指定的事件處理函數。

原生javascript提供的addEventListener()允許設定事件的類型

element.addEventListener(event, function, useCapture)

參數
event   - 必須。字串，指定事件名。

注意: 不要使用 “on” 前綴。 例如，使用 “click” ,而不是使用 “onclick”。

function    - 必須。指定要事件觸發時執行的函數。

當事件物件會作為第一個參數傳入函數。 事件物件的類型取決於特定的事件。例如， “click” 事件屬於 MouseEvent(滑鼠事件) 物件。
useCapture  - 可選。布林值，指定事件是否在捕獲或冒泡階段執行。

可能值:
true - 事件句柄在捕獲階段執行
false- false- 預設。事件句柄在冒泡階段執行

阻止事件傳播的2種方式

方式1：使用event物件的stopPropagation()函數，這種做法與javascript一致。

$("#outC").click(function(event){  
    event.stopPropagation();  
});

方式2：事件處理函數的回傳值false，javascript中的addEventListener沒有這個功能。

$("#outC").click(function(event){  
    return false;  
});

相關推薦：

JavaScript的事件機制

初窺JQuery(二) 事件機制(1)_jquery

#淺析JavaScript中的事件機制_基礎知識

以上是jq與js中的事件機制與阻止的詳細內容。更多資訊請關注PHP中文網其他相關文章！