Question

我见过你可以附上这样的事件

<button type="button" id="myButton" onclick="myFunction()">

你可以在没有"onclick="的情况下做同样的事情，例如：

document.getElementById('myButton'). //and here attach the event on click to myFunction

我正在尝试将JavaScript和HTML分开。

Answer 1

它类似于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);

这将为yourFunctionName()返回的<input />元素执行type="text"函数，document.querySelectorAll()将<input />元素作为this传递给函数addEventListener() 1}}。

在这种情况下你也可以使用document.getElementById('myButton').addEventListener('click', myFunction, false);：

document.querySelector()

在这种情况下，使用document.querySelectorAll()（而不是// gets the element with an 'id' of 'myButton', binding the 'click' event-handler: document.querySelector('#myButton').addEventListener('click', myFunction, false);），使用CSS表示法返回与传入选择器匹配的第一个元素：

// gets the first of the <input> elements, binding the 'click' event-handler:
document.querySelector('input').addEventListener('click', myFunction, false);

或者：

{{1}}

参考文献：

Answer 2

是的，你可以（而且应该！）。

document.getElementById('myButton').onclick = myFunction;

Answer 3

当然，您只需要选择您的项目并将其称为对应的回调函数。体育课：

document.getElementById('myButton').onclick = function(e) {
    // your code here
}

或者，没有内联函数：

document.getElementById('myButton').onclick = myObject.myMethod;

https://developer.mozilla.org/en/DOM/element.onclick

Answer 4

这样的事情：

  document.getElementById('myButton').onclick = function() {location.href='http://stackoverflow.com';return false;}

Answer 5

document.getElementById('myButton').onclick = function () {
        console.log('Inline event attach');
    };

    document.getElementById('myButton').addEventListener('click', function () {
        console.log('Using native addEventListener');
    }, false);

Answer 6

document.getElementById('myButton').onclick = function() { myFunction(); }

javascript附加事件

6 个答案: