javascript - JavaScript添付イベント

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();
}

要素に onがない場合は、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);

これは、その要素を as として関数に渡すことによって返されるのyourFunctionName()各<input />要素に対して関数を実行します。type="text"document.querySelectorAll()<input />this

addEventListener()この場合も使用できます。

document.getElementById('myButton').addEventListener('click', myFunction, false);

また、この状況では、CSS 表記を使用して、渡されたセレクターに一致する最初の要素を返すdocument.querySelector()( ではなく) を使用します。document.querySelectorAll()

// 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);

参考文献:

• Array.prototype.forEach().
• Array.prototype.slice().
• document.querySelector().
• document.querySelectorAll().
• EventTarget.addEventListener().

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() { myFunction(); }