Question

我已经决定从html表单元素中删除对java脚本事件的所有调用到外部文件。在这样做时，我为每个项目注册了一个活动。但是，使用“this”访问元素属性不再可用，我决定使用event.target.value表示值属性，event.target.name表示name属性。我认为这不是最好的实施，因为我从实施它得到了一些不利的结果。

Under是我实现的代码，更多关于这个问题。

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来引用触发事件的值和名称的对象。

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方法的作用，但这是您通常将事件附加到页面上的元素的方式。从您的代码中，很难理解您是如何使用该函数绑定事件的。

＆＃13;

var configureRadioButtons = {
  onClick: function(e) {
    e.stopPropagation();
    console.log(e)

  }
};

document.getElementById("someID").addEventListener('click', configureRadioButtons.onClick, false);

＆＃13;

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

＆＃13;

Answer 3

在查看我的代码后，我很快发现我忽略了一些非常重要的东西。我的单选按钮在运行时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");
}

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

3 个答案: