37

这真的很简单，但我对 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/

4

3 回答 3

80

所有浏览器都支持此功能（请参见此处的示例）：

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>

（小提琴）

以下是一些有用的资源：

于 2013-07-13T18:43:35.287 回答
5

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

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");
    }
});
于 2013-07-13T18:52:48.293 回答
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
            }
        });
    }

};

脚步

  1. 创建一个接受 4 个值的函数（自我解释）
  2. 检查浏览器是否支持addEventListener
  3. 在元素上添加事件
  4. 否则在旧 IE 的元素上添加事件
  5. 检查（单击的）元素是否 = 传递的元素

  6. 调用回调函数将元素作为this传递并传递事件

    onEvent用于事件委托。这addEvent是您的标准事件。

    这是您可以使用它们的方法

前 2 个用于动态添加的元素

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

事件委托基本上是这样的。

向文档添加一个点击事件，以便无论何时何地都会触发该事件，然后您检查被点击的元素以查看它是否与您需要的元素匹配。这样它就会一直工作。

演示

于 2013-07-13T19:05:11.497 回答