Javascript регистрирует обработчики событий извне

Question

Я решил удалить все вызовы события java script из элементов формы html во внешний файл. При этом я зарегистрировал событие для каждого элемента. Однако доступ к атрибутам элементов с использованием «this» больше не может использоваться, я решил использовать event.target.value для атрибута value и event.target.name для атрибута name. Я думаю, что это не лучшая реализация, так как я получаю некоторые неблагоприятные результаты от ее реализации.

Это мой реализованный код и многое другое.

JavaScript Инлайн Event Handler (Перед)

<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, чтобы обратиться к объекту, который произвел имя и имя события.

Answer 1

После рассмотрения моего кода я вскоре понял, я не заметил что-то очень важное. Мои радиокнопки на самом деле имеют другой идентификатор во время выполнения rdb_NewUserstrue и rdb_NewUsersfalse, и я не регистрировал события для этих элементов, поэтому причина продолжала стрелять по любому событию клика, он не нашел элемент с идентификатором 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"); 
} 

Answer 2

Если вы собираетесь не использовать инструмент манипулирования DOM, как JQuery (который я не рекомендую), вы можете сделать следующее:

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

Если вы используете JQuery (рекомендуется) он будет работать, как так :

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

Answer 3

Я не уверен, что метод 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>