使用纯 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

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

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>

（小提琴）

以下是一些有用的资源：

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

Answer 2

Benjamin的回答涵盖了所有内容。然而，您需要一个委托模型来处理动态添加的元素上的事件，然后

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

步骤

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

6. 调用回调函数，按此方式传递元素并传递事件

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

事件委派基本上就是这样。

将单击事件添加到文档中，以便每当&无论在哪里，您都可以检查单击的元素，看看它是否与您需要的元素匹配。这样它就会一直有效。

演示