我看到过可以这样附加事件
<button type="button" id="myButton" onclick="myFunction()">
你能不使用 "onclick="
来执行同样的操作吗,例如:
document.getElementById('myButton'). //and here attach the event on click to myFunction
我正在努力将JavaScript和HTML分开。
我看到过可以这样附加事件
<button type="button" id="myButton" onclick="myFunction()">
你能不使用 "onclick="
来执行同样的操作吗,例如:
document.getElementById('myButton'). //and here attach the event on click to myFunction
这类似于onclick
方法,实际上使用的是同一个事件处理程序,但是该方法被从HTML中移除了:
document.getElementById('myButton').onclick = function(){
// do stuff
myFunction();
}
如果元素上没有 id
属性,您也可以使用以下方式:
var inputs = document.getElementsByTagName('input');
for (var i=0, len=inputs.length; i<len; i++){
if (inputs[i].type == 'text'){
// assuming you want to affect text-inputs in this case
inputs[i].onclick = function(){
// do stuff. In here 'this' refers to inputs[i] element
myFunction();
};
}
}
另一种方法是使用Array.prototype.forEach()
,使用使用Array.prototype.slice()
和document.querySelectorAll()
创建的元素数组:
[].forEach.call(document.querySelector('input[type="text"]', yourFunctionName);
document.querySelectorAll()
返回的type="text"
的<input />
元素,执行yourFunctionName()
函数,并将该<input />
元素作为this
参数传递给函数。addEventListener()
。document.getElementById('myButton').addEventListener('click', myFunction, false);
document.querySelector()
(而不是document.querySelectorAll()
),它会返回与CSS选择器匹配的第一个元素。// gets the element with an 'id' of 'myButton', binding the 'click' event-handler:
document.querySelector('#myButton').addEventListener('click', myFunction, false);
或者:
// gets the first of the <input> elements, binding the 'click' event-handler:
document.querySelector('input').addEventListener('click', myFunction, false);
参考文献:
document.getElementById('myButton').onclick = myFunction;
document.getElementById('myButton').onclick = function(e) {
// your code here
}
或者,不使用内联函数:
document.getElementById('myButton').onclick = myObject.myMethod;
document.getElementById('myButton').onclick = function() {location.href='http://stackoverflow.com';return false;}
document.getElementById('myButton').onclick = function () {
console.log('Inline event attach');
};
document.getElementById('myButton').addEventListener('click', function () {
console.log('Using native addEventListener');
}, false);
document.getElementById('myButton').onclick = function() { myFunction(); }
myFunction()
不返回一个函数,你正在将onclick
赋予myFunction()
的返回值,这是不正确的。 - Andreas Wong()
,参见 Anthony Grist 的回答。 - Andreas Wong