使用纯JavaScript处理"onclick"事件

Question

所以这是非常简单的,但我仍然是相当新的JavaScript,只是找到了JSFiddle.我正在尝试使用getElementById()禁用和启用按钮来查找元素.我错过了什么？

<form name="frm" > 
  <div id="chkObj"> 
    <input type="checkbox" name="setChkBx" onclick="basicList.modifyAndEnableButton(this)"></input>        
</div>
<div id="Hello"> 
    <input type="button" name="btn" value="Hello"></input>        
</div>

这是我用来添加复选框的列表,因为会有多个复选框:

 var basicList = {
    'items': {},
    'modifyAndEnableButton': function(obj1) {
        var element = document.getElementsByName("btn");
        if (obj1.checked == true && element.getAttribute('disabled') == false) {
            element.getAttribute('disabled') = true;
            this.addRecord(obj2);
        } else if (element.getAttribute('disabled') == true) {
            if (hasItems == false) {
                element.getAttribute('disabled') = false;
            }
        } 
    }
};

http://jsfiddle.net/Arandolph0/E9zvc/3/

在此先感谢您的帮助.

Answer 1

所有浏览器都支持这一点(见这里的例子):

mySelectedElement.onclick = function(e){
    //your handler here
}

但是,有时候你想要添加一个处理程序(而不是更改同一个处理程序),更addEventListener常见的是在可用时你应该使用(需要shim for IE8-)

mySelectedElement.addEventListener("click",function(e){
   //your handler here
},false);

这是一个工作示例:

var button = document.getElementById("myButton");
button.addEventListener("click",function(e){
    button.disabled = "true";
},false);

和HTML:

<button id='myButton'>Hello</button>

(小提琴)

以下是一些有用的资源:

• addEventListener 在mdn
• DOM规范中的click事件
• 单击 MDN JavaScript教程中的示例

Answer 2

本杰明的回答涵盖了一切。但是，您需要一个委托模型来处理动态添加的元素上的事件

document.addEventListener("click", function (e) {
    if (e.target.id == "abc") {
        alert("Clicked");
    }
});

对于 IE7/IE8

document.attachEvent('onclick', function (e) {
    if (window.event.srcElement == "abc") {
        alert("Clicked");
    }
});