javascript attacher les évènements

Il est semblable à la onclick approche, et, en fait, utilise le gestionnaire d'événements, mais il est retiré de l'HTML:

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

Si vous n'avez pas de id sur l'élément, vous pouvez également utiliser:

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

Une approche alternative, à l'aide de Array.prototype.forEach(), avec un tableau d'éléments créés à l'aide de Array.prototype.slice() et document.querySelectorAll():

[].forEach.call(document.querySelector('input[type="text"]', yourFunctionName);

Exécute le yourFunctionName() fonction pour chaque <input /> élément, de type="text", retourné par document.querySelectorAll() passage que <input /> élément dans la fonction que this.

Vous pouvez également utiliser addEventListener() dans ce cas:

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

Et aussi dans cette situation, à l'aide de document.querySelector() (par opposition à document.querySelectorAll()), qui retourne le premier élément qui correspond le passé-dans le sélecteur, à l'aide de la notation CSS:

//gets the element with an 'id' of 'myButton', binding the 'click' event-handler:
document.querySelector('#myButton').addEventListener('click', myFunction, false);

Ou:

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

Références:

• Array.le prototype.forEach().
• Array.le prototype.slice().
• document.querySelector().
• document.querySelectorAll().
• EventTarget.la méthode addEventListener().

OriginalL'auteur David Thomas

Sûr, il vous suffit de sélectionner votre article et de l'appeler le correspondant fonction de rappel. p.e:

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

Ou sans la fonction inline:

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

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

OriginalL'auteur elboletaire

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

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

OriginalL'auteur Jags