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

- April_Nara

---

对于那些给问题投反对票的人，请注意目前谷歌搜索 JavaScript click 的前几个结果是来自 w3schools 和 jQuery。我在这里的元讨论中进行了讨论：http://meta.stackexchange.com/questions/177988/how-can-stack-overflow-users-be-encouraged-to-use-jquery-only-when-appropriate/178048#178048。 - Benjamin Gruenbaum

如果我是你，我会撤消你的编辑。它使你的问题变得更加具体化，不太适用于广大观众，而且它包含了很多语法错误，你应该仔细检查，有点破坏了一些东西。 - Benjamin Gruenbaum

每个复选框是否都有与之关联的按钮？ - david

所以它应该像水龙头一样运作... 当复选框被选中并且按钮被启用时，当复选框未被选中并且按钮被禁用时。 - April_Nara

不，checked只是HTML属性。https://developer.mozilla.org/zh-CN/docs/XUL/checkbox - Givi

Answer 1

所有浏览器都支持这个功能(在此处查看示例):

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 在mdn上的文档
• 在DOM规范中关于click事件的说明
• 在MDN JavaScript教程中的点击事件例子

- Benjamin Gruenbaum

---

@AprilRandolph 你写错了，请不要再让我帮你改正变量名中的拼写错误 :) 你可以使用Chrome开发者工具自行查找。 - Benjamin Gruenbaum

@AprilRandolph 再次检查我的代码，这仍然是一个错字。你的事件名称是错误的。再次，你可以使用开发者工具来检查元素所触发的事件。愉快编码！ :) - Benjamin Gruenbaum

addEventListener 中的 false 是什么意思？ - Gherman

如果您不确定“capture”是什么，可以放心地忽略useCapture。 - Benjamin Gruenbaum

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

- Atif

---

分享知识 :-) 我尝试倡导委托，这样人们就不会遇到事件不起作用的噩梦。在我了解委托之前，这个问题曾经发生在我身上。委托有什么不好吗？ - Atif

在 addEventListener 中，您应该将 e.srcElement.id 更改为 e.target.id，而在 attachEvent 中，将 e.srcElement.id 更改为 window.event.srcElement.id。 - Givi

@Givi 谢谢，但它们在所有浏览器中都可以工作。 (最新版本以及 IE10 在 IE7/8 模式下) - Atif

明白了！MDN说event.target是事件发生的原始元素。然而，Internet Explorer称其为event.srcElement。事实上，Chrome和Safari开始同时设置两者。您可以这样做以实现最大兼容性。 - Atif

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. 调用回调函数，将元素作为this和事件一起传递

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

事件委托基本上就是这个意思。

将点击事件添加到文档上，以便无论何时何地都会触发事件，然后检查被点击的元素是否与所需元素匹配。这样它将始终有效。

演示

- iConnor