JavaScript 在外部注册事件处理程序

Question

我决定删除所有对 JavaScript 事件的调用，从 html 表单元素到外部文件。在此过程中，我为每个项目注册了一个事件。但是，使用' this '访问元素属性不能再使用我决定使用的event.target.value值属性和event.target.name名称属性。我认为这不是最好的实现，因为我从实现它中获得了一些不利的结果。

下面是我实现的代码以及有关该问题的更多信息：

JavaScript Inline Event Handler （Before）

<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

如果你要避免使用像jQuery这样的DOM操作工具（我不推荐），你可以执行以下操作：

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

如果你使用jQuery（推荐），它将像这样工作：

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

Answer 2

我不确定 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>

Answer 3

在查看了我的代码后，我很快意识到我忽略了一些非常重要的东西。我的单选按钮实际上在运行时rdb_NewUserstrue和rdb_NewUsersfalse带有不同的 id，我没有为这些元素注册事件，因此事件在任何点击事件上不断触发的原因，它没有找到 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");
}