Javascript註冊外部事件處理程序

我已決定從html表單元素中將所有對java腳本事件的調用移除到外部文件。在這樣做的時候，我爲每個項目註冊了一個事件。然而，使用'this'訪問元素屬性不能再用於我已經決定使用的event.target.value值屬性和event.target.name作爲名稱屬性。我認爲這不是最好的實施，因爲我得到了一些不利的實施結果。Javascript註冊外部事件處理程序

下是我實施的代碼和更多的問題。

JavaScript的內聯事件處理程序（之前）

<input type="radio" name="rdb_NewUsers" value="1" list="#{'true':'Yes','false':'No'}" onclick="configureItemsForRadioButton(this.value, this.name)"

的JavaScript註冊的外部事件處理程序（後）

var configureRadioButtons = {   
      onClick:function(evt){ 
       evt.stopPropagation(); 
       console.log(evt.target.value + '||'+evt.target.name); 
       configureItemsForRadioButton(evt.target.value, evt.target.name); 

      } 
    }; 
    dojo.connect(dojo.byId("rdbNewUser"), "onclick", configureRadioButtons, "onClick");

我面臨的問題是，當我上的任何按鈕點擊它實際上它執行的是console.log(evt.target.value + '||'+evt.target.name);，即使它不是該按鈕的註冊事件。我認爲使用event.target是指在頁面上執行的任何事件。還有什麼可以用來代替evt.target.value來引用觸發事件值和名稱的對象。

來源

2014-11-25 devdar

審查我的代碼後，我很快就意識到我忽略了很重要的東西。我的單選按鈕實際上在運行時帶有一個不同的ID rdb_NewUserstrue和rdb_NewUsersfalse，我沒有註冊這些元素的事件，因此事件在任何點擊事件中保持觸發的原因，它沒有找到具有ID rdb_NewUsers的元素。我的解決辦法是在：

我查詢所有單選按鈕的DOM，並得到了他們的Ids和基於事件/單選按鈕，單擊我連着功能（所有單選按鈕被一個功能處理）。通過這種方式，我不需要對單選按鈕的id進行硬編碼。

var configureRadioButtons = {   
      onClick:function(evt){ 
       evt.stopPropagation(); 
       //console.log(evt.target.value + '||'+evt.target.name+ '||'+evt.keyCode); 
       configureItemsForRadioButton(evt.target.value, evt.target.name); 


      } 
    };  


var radios = document.querySelectorAll('input[type=radio]'); 

for (var i = 0 ; i < radios.length ; i++){ 
    //console.log(radios[i].id);   
    dojo.connect(document.getElementById(radios[i].id), "onclick",configureRadioButtons, "onClick"); 
}

來源

2014-11-26 15:04:38 devdar

如果你要避免使用如jQuery（我不推薦）一個DOM操作工具，你可以做到以下幾點：

var myButton = document.getElementById("myButton"); 
myButton.addEventListener('click', function(){alert('Hello world');}, false);

如果您使用jQuery（推薦），它的工作像這樣：

$('#myButton').on('click', function() {alert('Hello world');});

來源

2014-11-25 14:45:22

我不確定dojo.connect方法是幹什麼的，但這是通常將事件附加到頁面元素上的方式。從你的代碼中，很難理解你是如何將你的事件與函數綁定的。

var configureRadioButtons = { 
 
    onClick: function(e) { 
 
    e.stopPropagation(); 
 
    console.log(e) 
 

 
    } 
 
}; 
 

 
document.getElementById("someID").addEventListener('click', configureRadioButtons.onClick, false);

<button id="someID">Click me</button>

來源

2014-11-26 11:01:15

Javascript註冊外部事件處理程序

回答

相關問題