2016-02-11 96 views
0

我很抱歉如果這篇文章是在之前發佈的,但我無法找到它。使用ID和onClick之間的區別

假設我們有

<button class="sample-class" role="button" tabindex="0" id="onEvent">play</button> 

,然後一個Javascript來觸發它,像這樣

<script> 
    $("#onEvent").click(function(){ 
     //do something 
    }) 
<script> 

現在,如果我們有同樣的事情,這樣

<button class="sample-class" role="button" tabindex="0" onClick="foo()">play</button> 

,我們觸發它由

<script> 
    function foo() 
    { 
    //Do something 
    } 
</script> 

有人能告訴我使用兩者之間的區別嗎?在哪一方面首先被調用,哪一個更高效,如果我同時使用,他們會工作嗎?

謝謝!

+2

你可能想閱讀[點擊=「」與事件處理程序(http://stackoverflow.com/q/6941483/ 218196),它詢問爲什麼應該避免內聯事件處理程序。 –

+0

@Patrick:這個問題是關於內聯事件處理程序與jQuery我猜,而你的是DOM onClick與addEventListener。相關,但不一樣。 –

+0

我認爲javascript功能更高效,並且執行速度更快。因爲jquery是一個使用javascript開發的庫。 –

回答

1

如果你想它類似於CSS是如何工作的,

onclick= : id= :: style= : class= 

通過這一點,我的意思是從第一種是混合的你想的聲明和陳述的做什麼實際功能這一頁。 「更簡潔」的方法是採取分離問題的方法 - 允許HTML成爲演示者和JavaScript來處理功能,與CSS樣式表處理樣式方面相同,而不是聲明樣式一致。

除少數例外,其結果通常更便攜和可維護。這也可以幫助您避免未來的麻煩。例如,如果您要將函數foo重命名爲bar,並且您在網站上的50個位置聲明onclick='foo()',那麼這就是onclick屬性的50個更改。如果您使用替代方法(通過ID將元素綁定到JavaScript),則可以進行單行更改。

此外,請注意,您不限於在ID上匹配。您也可以將javascript方法附加到類中,或者將兩者結合使用,這樣您就可以在HTML中獲得很大的靈活性,而不需要額外的標記。

有關有關你的問題的總體概念的其他詳細信息,請參閱: https://en.wikipedia.org/wiki/Unobtrusive_JavaScript#Separation_of_behavior_from_markup

1

有人能告訴我使用兩者之間的區別嗎?

第一個代碼是使用外部腳本來完成任務。但是第二個代碼是使用內聯腳本來完成任務。在事件處理程序中沒有區別,但只是使用代碼調用事件的區別。

我們大多數人使用第二種方法,即。要說避免內聯腳本

無論在哪個人會叫第一

瀏覽器會先呈現內嵌腳本像以前一樣,如果你保持你的腳本主體的結束標記之前加載腳本加載它。如果你在head標籤中使用script,那麼這個代碼將首先被調用。

哪個更有效率,如果我同時使用,他們會工作嗎?

兩者都有效。但是,如果你有與事件有關的各種事情呢?把它放在內聯腳本中會很警惕。

你不需要擔心使用外部腳本即。如果有人擔心用戶是否禁用了瀏覽器,腳本將無法運行。因爲現代網站都是用javascript/jquery組成的。因此,您可以強制訪問者啓用JavaScript以正確運行網站。

+0

非常感謝!但是,當你說第一個使用外部腳本而第二個使用內聯腳本時,你究竟是什麼意思?一種是在點擊時調用一個函數,另一種是基於id調用一些程序。那麼你究竟如何將外部和外部分類爲內部? –

+1

onclick事件是內聯腳本 –

0

這兩個工作方式都是一樣的。但要獲得第一個工作,您需要添加jquery文件引用。

我更喜歡第一個,只是因爲簡單的原因,它的方式太簡單了,因爲它說「jQuery是一個輕量級的,」少寫,多做「的JavaScript庫。」

如果你想在多個div上添加點擊功能,如果你使用onclick函數,你必須在任何地方編寫onclick,並且在html中編寫太多的代碼不是一個好習慣。但是如果你使用點擊函數可以給一個普通的類,並調用一切的點擊功能。

+0

你是什麼意思加jQuery文件引用?不會將它寫入文件末尾的腳本標記中嗎?或者你是否在談論將js放在不同的文件中然後將其鏈接起來? –

+0

@ Izy-只需將它寫入腳本標記是不夠的。您需要將js文件放在項目文件夾中並將其鏈接或使用CDN。 –

相關問題