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

How to use different methods to detect button clicks in Javascript?

本文关键字：Javascript 按钮 检测 何使用 方法      更新时间：2023-09-26

我开始编写一些javascript代码来检测按钮按下。我一直在谷歌上搜索各种不同的方法。当其中一些在我的代码中工作或不工作时，我感到困惑。

这是一个JS提琴，有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");
    });
});

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

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

最后一个也是一样，你必须添加#。

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

假设您的$是jQuery，那么您将从#1和#4中丢失#符号

#1和#4查找<Test_Button4>元素。要通过id属性获取元素，必须使用#:

#Test_Button4

对于#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

正如所指出的，您的一些代码是错误的，但我认为这只是为了示例。您需要使用$('#Test_Button1')(注意添加了#)来访问id为Test_Button1的按钮。

从技术上讲，有几种方法来响应元素事件，并且有理由使用它们中的大多数。

这个代码:

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

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

当DOM准备好时，document.ready包装器(本身是一个事件侦听器)中的代码将被触发[doc]。其他代码将在文档加载时执行。你可以在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 on MDN - https://developer.mozilla.org/en-US/docs/DOM/element.onclick
  • JavaScript事件委托如何工作 - http://davidwalsh.name/event-delegate
  • quirksmode上的高级事件注册模型 http://www.quirksmode.org/js/events_advanced.html
  • quirksmode事件顺序 http://www.quirksmode.org/js/events_order.html
相关文章：