的步骤

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

所有浏览器都支持此功能（see example here)：

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

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

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 on mdn
The click event
Click example

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

Answer 3

这里有Error

btnRush应为Rushbtn

这是我刚刚制作（未经测试）的跨浏览器事件的示例

var addEvent = function( element, type, callback, bubble ) { // 1
    if(document.addEventListener) { // 2
        return element.addEventListener( type, callback, bubble || false ); // 3
    }
    return element.attachEvent('on' + type, callback ); // 4
};



var onEvent = function( element, type, callback, bubble) { // 1
    if(document.addEventListener) { // 2
        document.addEventListener( type, function( event ){ // 3
            if(event.target === element || event.target.id === element) { // 5
                callback.apply(event.target, [event]); // 6
            }
        }, bubble || false);
    } else {
        document.attachEvent( 'on' + type, function( event ){ // 4 
            if(event.srcElement === element || event.srcElement.id === element) { // 5
                callback.apply(event.target, [event]); // 6
            }
        });
    }

};

的步骤

创建一个接受4个值的函数（自我解释）
检查浏览器是否支持addEventListener
在元素上添加事件
在旧IE的元素上添加事件
检查（单击的）元素是否为传递的元素
调用回调函数传递元素，并传递事件

onEvent用于事件委派。 addEvent适用于您的标准活动。

这是你如何使用它们

前两个用于动态添加元素

onEvent('rushBtn', 'click', function(){
    alert('click')
});

var rush = document.getElementById('rushBtn');

onEvent(rush, 'click', function(){
    alert('click');
});

// Standard Event
addEvent(rush, 'click', function(){
    alert('click');
});

事件代表团基本上就是这样。

向文档添加点击事件，以便每当＆amp;然后检查单击的元素以查看它是否与您需要的元素匹配。这样它就会一直有效。

使用纯JavaScript处理“onclick”事件

3 个答案:

(fiddle)

的步骤

Demo