处理“点击"使用纯 JavaScript 的事件 [英] Handling "onclick" event with pure JavaScript

问题描述

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

<div id="你好"><输入类型=按钮"名称=btn"值=你好"></input>

</表单>

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

 var basicList = {'项目': {}，'modifyAndEnableButton':函数(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) {如果(hasItems == false){element.getAttribute('disabled') = false;}}}};

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

解决方案

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

mySelectedElement.onclick = function(e){//你的处理程序在这里}

然而，有时您想添加一个处理程序(而不是更改相同的处理程序)，更普遍的是，如果可用，您应该使用 addEventListener(IE8 需要 shim-)

mySelectedElement.addEventListener("click",function(e){//你的处理程序在这里}，错误的);

这是一个工作示例:

var button = document.getElementById("myButton");button.addEventListener("点击",function(e){button.disabled = "true";}，错误的);

和 html:

你好</button>

(小提琴)

以下是一些有用的资源:

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

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
}

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

Here is a working example:

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

And html:

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

(fiddle)

Here are some useful resources:

• addEventListener on mdn
• The click event in the DOM specification
• Click example in the MDN JavaScript tutorial

这篇关于处理“点击"使用纯 JavaScript 的事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！