javascript - trigger - js click




jQuery.click()vs onClick (11)

$('#myDiv').click更好,因為它將JavaScript代碼與HTML分開。 我們必須盡力保持頁面行為和結構的不同 。 這有很大幫助。

我有一個巨大的jQuery應用程序,並且我正在使用以下兩種方法進行點擊事件。

第一種方法

HTML

<div id="myDiv">Some Content</div>

jQuery的

$('#myDiv').click(function(){
    //Some code
});

第二種方法

HTML

<div id="myDiv" onClick="divFunction()">Some Content</div>

JavaScript函數調用

function divFunction(){
    //Some code
}

我在我的應用程序中使用第一種或第二種方法。 哪一個更好? 性能更好? 和標準?


作品的差異。 如果使用click(),則可以添加多個函數,但如果使用屬性,則只會執行一個函數 - 最後一個函數。

DEMO

HTML

<span id="JQueryClick">Click #JQuery</span> </br>
<span id="JQueryAttrClick">Click #Attr</span> </br>

JavaScript的

$('#JQueryClick').click(function(){alert('1')})
$('#JQueryClick').click(function(){alert('2')})

$('#JQueryAttrClick').attr('onClick'," alert('1')" ) //This doesn't work
$('#JQueryAttrClick').attr('onClick'," alert('2')" )

如果我們談論性能,無論如何直接使用總是更快,但使用屬性,您將只能分配一個函數。


使用$('#myDiv').click(function(){ 更好,因為它遵循標準事件註冊模型(jQuery在internally使用addEventListenerattachEvent )。

基本上以現代方式註冊事件是處理事件的unobtrusive方式。 也可以為目標註冊多個事件偵聽器,您可以為同一個目標調用addEventListener()

var myEl = document.getElementById('myelement');

myEl.addEventListener('click', function() {
    alert('Hello world');
}, false);

myEl.addEventListener('click', function() {
    alert('Hello world again!!!');
}, false);

http://jsfiddle.net/aj55x/1/

為什麼使用addEventListener? (來自MDN)

addEventListener是註冊W3C DOM中指定的事件偵聽器的方式。 其好處如下:

  • 它允許為事件添加多個單個處理程序。 這對於DHTML庫或Mozilla擴展尤其有用,即使使用其他庫/擴展,也需要很好地工作。
  • 當聽者被激活時,它可以更好地控制階段(捕獲與冒泡)
  • 它適用於任何DOM元素,而不僅僅是HTML元素。

更多關於現代活動註冊 - > http://www.quirksmode.org/js/events_advanced.html

其他方法,例如設置HTML屬性 ,例如:

<button onclick="alert('Hello world!')">

DOM元素屬性 ,例如:

myEl.onclick = function(event){alert('Hello world');}; 

很舊,他們可以輕鬆寫完。

應該避免使用HTML屬性,因為它使標記變得更大,可讀性更差。 對內容/結構和行為的擔憂並沒有很好地分離,這使得更難找到一個錯誤。

DOM元素屬性方法的問題在於,每個事件只能將一個事件處理程序綁定到元素。

有關傳統事件處理的更多信息 - > http://www.quirksmode.org/js/events_tradmod.html

MDN參考: https://developer.mozilla.org/en-US/docs/DOM/eventhttps://developer.mozilla.org/en-US/docs/DOM/event


兩者都不是更好 ,因為它們可能用於不同的目的。 onClick (實際上應該是onclick )執行得稍微好一點,但我非常懷疑你會注意到這裡的差異。

值得注意的是,他們做了不同的事情: .click可以綁定到任何jQuery集合,而onclick必須內聯在您希望綁定的元素上。 你也可以綁定一個事件來使用onclick ,而.click讓你繼續綁定事件。

在我看來,我會保持一致,只需使用.click ,並將所有 JavaScript代碼放在一起並與HTML分開。

不要使用onclick 。 沒有任何理由使用它,除非你知道你在做什麼,而你可能不知道。


單擊按鈕時執行JavaScript:

<button onclick="myFunction()">Click me</button>

<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Hello World";
}
</script>

大多數情況下,當性能是唯一標準時,原生JavaScript方法是比jQuery更好的選擇,但jQuery使用JavaScript並使開髮變得容易。 您可以使用jQuery,因為它不會降低性能。 在你的具體情況下,表現的差異是可以忽略的。


恕我直言,onclick是首選的方法,只有滿足以下條件時才可以使用.click:

  • 頁面上有很多元素
  • 只有一個事件需要註冊點擊事件
  • 你擔心移動性能/電池壽命

我形成了這個觀點,因為移動設備上的JavaScript引擎比在同一代中製作的桌面應用程序慢4到7倍。 我討厭它,當我訪問我的移動設備上的網站,並收到抖動滾動,因為jQuery綁定了所有的事件,犧牲了我的用戶體驗和電池壽命。 另一個最近的支持因素,雖然這應該只是一個政府機構的關注;),我們有IE7彈出一個消息框,指出JavaScript進程需要很長時間...等待或取消過程。 每當有大量元素通過jQuery進行綁定時就會發生這種情況。


為了獲得更好的性能,請使用原生JavaScript。 為了更快的開發,請使用jQuery。 檢查jQuery性能比較本地元素性能

我已經在Windows Server 2008 R2 / 7 64位上的Firefox 16.0 32位上進行了測試

$('span'); // 6,604 operations per second
document.getElementsByTagName('span'); // 10,331,708 operations/sec

對於點擊事件,請檢查Native Browser事件與jQuery觸發器jQuery與原生Click事件綁定

在Windows Server 2008 R2 / 7 64位版本的32位Chrome 22.0.1229.79上進行測試

$('#jquery a').click(window.testClickListener); // 2,957 operations/second

[].forEach.call( document.querySelectorAll('#native a'), function(el) {
    el.addEventListener('click', window.testClickListener, false);
}); // 18,196 operations/second

第一種方法是喜歡。 它使用高級事件註冊模型[s] ,這意味著您可以將多個處理程序附加到相同的元素。 您可以輕鬆訪問事件對象,並且處理程序可以位於任何函數的作用域中。 此外,它是動態的,即它可以在任何時候被調用,並且特別適合動態生成的元素。 無論你使用jQuery,其他庫還是本地方法都無關緊要。

第二種使用內聯屬性的方法需要很多全局函數(這會導致命名空間污染),並將內容/結構(HTML)與行為(JavaScript)混合在一起。 不要使用它。

關於性能或標準的問題不能輕易回答。 這兩種方法完全不同,做不同的事情。 第一個是更強大,而第二個是鄙視(被認為是壞的風格)。


那麼, jQuery背後的主要思想之一就是將JavaScript與討厭的HTML代碼分開。 第一種方法是要走的路。


<whatever onclick="doStuff();" onmouseover="in()" onmouseout="out()" />

onclick,onmouseover,onmouseout等事件實際上對性能不利 (在Internet Explorer中主要是去圖)。 如果你使用Visual Studio編寫代碼,當你用這些代碼運行一個頁面時,其中的每一個都會創建一個單獨的SCRIPT塊來佔用內存,從而降低性能。

更不用說你應該分離擔憂了 :JavaScript和佈局應該分開!

為任何這些事件創建evenHandlers總是更好,一個事件可以捕獲成千上萬個項目,而不是為每個項目創建數千個獨立的腳本塊!

(另外,其他人都在說一切。)





jquery