在不使用 jQuery 的情况下在 JavaScript 中单击按钮时执行函数的最佳实践是什么?
我正在寻找一个看起来像这样的解决方案:
var button = document.getElementById('myButton');
function sayHello() {
alert('hello');
}
button.attachFunctionToClick(sayHello);
在不使用 jQuery 的情况下在 JavaScript 中单击按钮时执行函数的最佳实践是什么?
我正在寻找一个看起来像这样的解决方案:
var button = document.getElementById('myButton');
function sayHello() {
alert('hello');
}
button.attachFunctionToClick(sayHello);
附加事件的标准方式是这样的:
var button = document.getElementById("myButton");
button.addEventListener("click", sayHello, false);
旧版本的 ie(小于 9)虽然不支持 addeventlistener ,但您必须回退到 attachEvent 函数。
button.attachEvent('click',sayHello);
当然,您仍然可以onclick
像这样添加到元素的方法中:
button.onclick = sayHello
以上 3 个示例假设您没有将任何参数传递给回调函数,这意味着它们将接收的唯一参数将是事件对象。
var button = document.getElementById('myButton');
function sayHello() {
alert('hello');
}
if(document.addEventListener)
button.addEventListener('click',sayHello,false);
else
button.attachEvent('click',sayHello);
<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>
对于浏览器合规性,这里有一个简单的辅助函数:
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() 但具有不同的事件类型、事件侦听器或捕获参数。