亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

onclick=“VS事件處理程序

onclick=“VS事件處理程序

LEATH 2019-06-17 16:13:03
onclick=“VS事件處理程序如果我希望執行一個函數,我更喜歡執行內聯js:<p id="element" onclick="doSomething();">Click me</p>因為它更容易調試。但是,我聽到人們說不要使用內聯js,并這樣做:document.getElementById('element').onclick = doSomething;為什么推薦js事件偵聽器?
查看完整描述

3 回答

?
神不在的星期二

TA貢獻1963條經驗 獲得超6個贊

避免內聯JavaScript有很多原因,其中最重要的可能是代碼可維護性。

一個簡單的例子(我只是為了演示目的使用jQuery)。

<p class="element" onclick="doSomething();">Click me</p><p class="element" onclick="doSomething();">Click me</p>
<p class="element" onclick="doSomething();">Click me</p><p class="element" onclick="doSomething();">Click me</p>
<p class="element" onclick="doSomething();">Click me</p><p class="element" onclick="doSomething();">Click me</p>

如果突然收到一個請求,要求更改所有段落以執行另一項功能,該怎么辦?在您的示例中,您必須手動更改HTML代碼中的所有內容。但是,如果您選擇將HTML與JavaScript分離,您可以這樣做。

<p class="element">Click me</p><p class="element">Click me</p><p class="element">Click me</p><p class="element">Click me</p>
<p class="element">Click me</p><p class="element">Click me</p>$('.element').bind('click', doSomethingElse);

HTML代碼也更干凈,這使得設計者可以完全專注于設計,而不必擔心他們在做一個也涉及到其他人的項目時可能會破壞一些東西。

編輯:為我的評論舉個例子。

Project = {
    // All the variables/constants/objects that need to be globally accessible inside the Project object.

    init : function(){
        // Main entry point...
        this.MainMenu.init();

        // Rest of the code which should execute the moment Project is initiated.
    }}Project.MainMenu = {
    // All the variables/constants/objects that need to be accessible only to MainMenu.

    init : function(){ // Is run immediatelly by Project.init()
        // Event handlers relevant to the main menu are bound here

        // Rest of the initialization code
    }}Project.SlideShow = {
    // All the variables/constants/objects that need to be accessible only to SlideShow.

    init : function(){ // Is run only on pages that really require it.
        // Event handlers for the slideshow.
    }}


查看完整回答
反對 回復 2019-06-17
  • 3 回答
  • 0 關注
  • 453 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號