Question

我开始编写一些javascript代码来检测按钮按下。我一直在谷歌上搜索所有不同的方法。当他们中的一些人在我的代码中工作或没有工作时，我感到难过。

这是JS Fiddle，有4个例子。

有人可以解释为什么＃1或＃4不起作用吗？

这是html测试代码。

<input type ='button'  value = "Test Button 1" id="Test_Button1" >
<input type ='button'  value = "Test Button 2" id="Test_Button2" >
<input type ='button'  value = "Test Button 3" id="Test_Button3" >
<input type ='button'  value = "Test Button 4" id="Test_Button4" >

这是javascript代码

$('Test_Button1').click (function() {
    alert("Test Button 1 worked");
});


$(document).on("click","#Test_Button2", function() {
        alert("Test Button 2 worked");
});


document.getElementById('Test_Button3').onclick = function() {
        alert("Test Button 3 worked");
};


$(document).ready (function () {
        $('Test_Button4').click (function() {
            alert("Test Button 4 worked");
    });
});

Answer 1

对于第一个，因为您将其称为元素的id，您必须使用#，所以

$('#Test_Button1').click(function() {
        alert("Test Button 1 worked");
});

对于最后一个，你必须添加#。

http://jsfiddle.net/ez2SP/1/

Answer 2

假设你的$是jQuery，那么你就错过了来自＃1和＃4的＃符号

Answer 3

＃1和＃4查找<Test_Button4>个元素。要按id属性获取元素，您必须使用#：

#Test_Button4

Answer 4

对于＃1，您需要#：

$('#Test_Button1').click (function() {
    alert("Test Button 1 worked");
});

同样的＃4：

$('#Test_Button4').click (function() {
    alert("Test Button 4 worked");
});

jQuery使用CSS样式选择器，这意味着如果您按ID选择项目，请使用#。如果您按班级选择，请使用.。

此处有更多内容：http://www.w3schools.com/jquery/jquery_ref_selectors.asp

Answer 5

正如已经指出的，你的一些代码是错误的，但我认为它只是为了举例。您需要使用$('#Test_Button1')（请注意添加#）才能访问ID为Test_Button1的按钮。

从技术上讲，有几种方法可以对元素事件作出反应，并且有理由使用它们中的大多数。

此代码：

$(document).on("click","#Test_Button2", function() {
        alert("Test Button 2 worked");
});

...正在通过jQuery使用事件委托（read）。基本上，不是将事件侦听器添加到每个单独的元素，而是将其添加到父元素（在本例中为文档本身）。由于事件冒泡（read和read），当您单击按钮时，事件最终会触发委托侦听器。如果您要在页面上添加或更改内容（例如，使用AJAX），这将非常有用。添加到页面的新元素将触发您的事件，而不必单独处理它们，因为侦听器实际上附加到文档。

当DOM准备好[doc]时，将触发document.ready包装器（本身就是事件监听器）中的代码。其他代码将在文档加载时执行。您可以将任何内容包装在document.ready块中，它不代表离散方法。

您展示的几个示例是相同的。您可以使用on()添加委托，也可以使用click() - 后者是前者的别名。您还会在野外代码中找到live()，在更新版本中已被on()替换。

onclick是HTML元素的属性，与将事件直接放入内联相同：<button onclick="alert('do not do this');">Yay!</button>。

请参阅此答案，详细了解添加事件监听器与使用元素属性onclick之间的区别：addEventListener vs onclick

<强>文档

jQuery.click - http://api.jquery.com/click/
jQuery.ready - http://api.jquery.com/ready/
element.onclick - https://developer.mozilla.org/en-US/docs/DOM/element.onclick
David Walsh的JavaScript事件委派如何工作 - http://davidwalsh.name/event-delegate
quirksmode上的高级事件注册模型 http://www.quirksmode.org/js/events_advanced.html
quirksmode上的事件顺序 http://www.quirksmode.org/js/events_order.html

如何使用不同的方法来检测Javascript中的按钮点击？

5 个答案: