-2

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

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

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

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

button.attachFunctionToClick(sayHello);
4

4 回答 4

1

附加事件的标准方式是这样的:

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

阅读更多

旧版本的 ie(小于 9)虽然不支持 addeventlistener ,但您必须回退到 attachEvent 函数。

button.attachEvent('click',sayHello);

当然,您仍然可以onclick像这样添加到元素的方法中:

button.onclick = sayHello

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

于 2013-04-11T00:30:20.023 回答
0
var button = document.getElementById('myButton');
function sayHello() {
    alert('hello');
}

if(document.addEventListener)
    button.addEventListener('click',sayHello,false);
else
    button.attachEvent('click',sayHello);
于 2013-04-11T00:31:11.177 回答
0
<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>
于 2013-04-11T00:31:19.380 回答
0

对于浏览器合规性,这里有一个简单的辅助函数:

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

重要提示:请注意"on" + event此处。它用于 IE 中的事件。在这里查看更多。

例子

或者您可以尝试:

button.onclick = sayHello;

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

例子

attachEvent - 用于 IE < 9:

将指定的函数绑定到一个事件,以便每当事件在对象上触发时调用该函数。

添加事件监听器

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

要为目标注册多个事件侦听器,请为同一目标调用 addEventListener() 但具有不同的事件类型、事件侦听器或捕获参数。

于 2013-04-11T00:34:57.100 回答