javascript - 使用纯 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>
</form>

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

 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

所有浏览器都支持这个 ( see example here) :

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

但是，有时您想要添加一个处理程序(而不是更改同一个处理程序)，更普遍的情况是在可用时您应该使用 addEventListener (需要 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>

(fiddle)

这里有一些有用的资源:

• addEventListener在 mdn 上
• The click event在 DOM 规范中
• Click example 在 MDN JavaScript 教程中