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注册外部事件处理程序

回答

相关问题