Question

在不使用jQuery的情况下在JavaScript中单击按钮时执行函数的最佳实践是什么？

我正在寻找一个看起来像这样的解决方案：

var button = document.getElementById('myButton');

function sayHello() {
    alert('hello');
}

button.attachFunctionToClick(sayHello);

Answer 1

附加事件的标准方式如下：

var button = document.getElementById("myButton");
button.addEventListener("click", sayHello, false);

较旧版本的ie（少于9个）不支持addeventlistener，但您必须回退到attachEvent函数。

button.attachEvent('click',sayHello);

当然，你仍然可以像这样添加元素的onclick方法：

button.onclick = sayHello

以上3个示例假设您没有将任何参数传递给回调函数，这意味着它们将接收的唯一参数将是事件对象。

Answer 2

var button = document.getElementById('myButton');
function sayHello() {
    alert('hello');
}

if(document.addEventListener)
    button.addEventListener('click',sayHello,false);
else
    button.attachEvent('click',sayHello);

Answer 3

<script>
    function test() {
        alert('aaa');
    }
</script>

<input type="button" onclick="test()" />

或

<input type="button" id="myButton" />

这是在关闭正文标记之前的页面末尾：

<script>
    function test() {
        alert('aaa');
    }
    var button = document.getElementById('myButton');
    button.onclick = test;
</script>

Answer 4

对于浏览器合规性，这是一个简单的帮助函数：

function setEvent (element, event, handler) {
  if(document.addEventListener){
    element.addEventListener(event, handler);
   }else{
      element.attachEvent("on" + event, handler, false);
   }
};

重要：请注意此处的"on" + event。它用于IE中的事件。查看更多here。

EXAMPLE

或者您可以尝试：

button.onclick = sayHello;

因为它基本上是DOM 0的一部分，所以这种方法非常广泛支持并且不需要特殊的跨浏览器代码;因此它是通常用于动态注册事件侦听器，除非额外的需要addEventListener（）的功能。

EXAMPLE

attachEvent - 用于IE＆lt; 9：

将指定的函数绑定到事件，以便函数获取每当事件触发对象时调用。

addEventListener：

addEventListener（）在单个事件上注册单个事件侦听器   目标。事件目标可以是文档中的单个元素，   文档本身，窗口或XMLHttpRequest。

要为目标注册多个事件侦听器，请调用   addEventListener（）用于同一目标但具有不同的事件类型，   事件监听器或捕获参数。

单击按钮时如何执行功能？

4 个答案: