处理“onclick"纯 JavaScript 事件

2022-01-15 00:00:00 events event-handling javascript html dom-events

这真的很简单，但我对 JavaScript 还是很陌生，只是发现了 JSFiddle.我正在尝试使用 getElementById() 查找元素以禁用和启用按钮.我错过了什么?

This is really straight forward but I'm still fairly new to JavaScript and just found JSFiddle. I'm trying to find the element with the getElementById() to disable and enable a button. What am I missing?

<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>

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

This is a list that I am using to add checkboxes because there is going to be more than one:

 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/

推荐答案

所有浏览器都支持这个(参见此处的示例):

All browsers support this (see example here):

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

但是，有时您想添加一个处理程序(而不是更改同一个处理程序)，更一般地说，如果可用，您应该使用 addEventListener(IE8 需要 shim-)

However, sometimes you want to add a handler (and not change the same one), and more generally when available you should use addEventListener (needs 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>

(小提琴)

这里有一些有用的资源:

(fiddle)

Here are some useful resources:

  • addEventListener on mdn
  • DOM 规范中的点击事件
  • 点击示例在MDN JavaScript教程中
  • addEventListener on mdn
  • The click event in the DOM specification
  • Click example in the MDN JavaScript tutorial

相关文章