web-dev-qa-db-fra.com

Gérer l'événement "onclick" avec JavaScript pur

C'est donc très simple, mais je suis encore relativement nouveau sur JavaScript et je viens de trouver JSFiddle. J'essaie de trouver l'élément avec la getElementById() pour désactiver et activer un bouton. Qu'est-ce que je rate?

<form name="frm" > 
  <div id="chkObj"> 
    <input type="checkbox" name="setChkBx" onclick="basicList.modifyAndEnableButton(this)"></input>        
</div>
<div id="Hello"> 
    <input type="button" name="btn" value="Hello"></input>        
</div>


Voici une liste que j'utilise pour ajouter des cases à cocher car il y en aura plusieurs:

 var basicList = {
    'items': {},
    'modifyAndEnableButton': function(obj1) {
        var element = document.getElementsByName("btn");
        if (obj1.checked == true && element.getAttribute('disabled') == false) {
            element.getAttribute('disabled') = true;
            this.addRecord(obj2);
        } else if (element.getAttribute('disabled') == true) {
            if (hasItems == false) {
                element.getAttribute('disabled') = false;
            }
        } 
    }
};

http://jsfiddle.net/Arandolph0/E9zvc/3/

Merci d'avance pour votre aide.

javascripthtmleventsjavascript-eventsevent-handling
25
April_Nara

Tous les navigateurs le supportent ( voir l'exemple ici) :

mySelectedElement.onclick = function(e){
    //your handler here
}

Cependant, parfois vous voulez ajouter un gestionnaire (et ne pas changer le même), et plus généralement, quand il est disponible, vous devez utiliser addEventListener (nécessite shim pour IE8-)

mySelectedElement.addEventListener("click",function(e){
   //your handler here
},false);

Voici un exemple de travail:

var button = document.getElementById("myButton");
button.addEventListener("click",function(e){
    button.disabled = "true";
},false);

Et html:

<button id='myButton'>Hello</button>

(violon)

Voici quelques ressources utiles:

54
Benjamin Gruenbaum

La réponse de Benjamin couvre à peu près tout. Cependant, vous avez besoin d'un modèle de délégation pour gérer les événements sur les éléments qui ont été ajoutés dynamiquement puis

document.addEventListener("click", function (e) {
    if (e.target.id == "abc") {
        alert("Clicked");
    }
});

Pour IE7/IE8

document.attachEvent('onclick', function (e) {
    if (window.event.srcElement == "abc") {
        alert("Clicked");
    }
});
4
Atif Mohammed Ameenuddin

Vous avez un Error ici

btnRush doit être Rushbtn

Ceci est un exemple d'événement multi-navigateur que je viens de créer (non testé))

var addEvent = function( element, type, callback, bubble ) { // 1
    if(document.addEventListener) { // 2
        return element.addEventListener( type, callback, bubble || false ); // 3
    }
    return element.attachEvent('on' + type, callback ); // 4
};



var onEvent = function( element, type, callback, bubble) { // 1
    if(document.addEventListener) { // 2
        document.addEventListener( type, function( event ){ // 3
            if(event.target === element || event.target.id === element) { // 5
                callback.apply(event.target, [event]); // 6
            }
        }, bubble || false);
    } else {
        document.attachEvent( 'on' + type, function( event ){ // 4 
            if(event.srcElement === element || event.srcElement.id === element) { // 5
                callback.apply(event.target, [event]); // 6
            }
        });
    }

};

Pas

  1. Créer une fonction qui accepte 4 valeurs (auto-explicative)
  2. Vérifiez si le navigateur prend en charge addEventListener
  3. Ajouter un événement sur l'élément
  4. sinon ajouter un événement sur l'élément pour les anciens IE
  5. Vérifiez que l'élément (cliqué) est = à l'élément passé

  6. appeler la fonction de rappel passer l'élément comme ceci et passer l'événement

    onEvent est utilisé pour la délégation d'événement. addEvent est pour votre événement standard.

    voici comment les utiliser

Les 2 premiers sont pour les éléments ajoutés dynamiquement

onEvent('rushBtn', 'click', function(){
    alert('click')
});

var Rush = document.getElementById('rushBtn');

onEvent(Rush, 'click', function(){
    alert('click');
});

// Standard Event
addEvent(Rush, 'click', function(){
    alert('click');
});

La délégation d'événement est essentiellement cela.

Ajoutez un événement de clic au document afin que l'événement se déclenche à chaque fois et n'importe où, puis vous vérifiez l'élément sur lequel vous avez cliqué pour voir s'il correspond à l'élément dont vous avez besoin. de cette façon, cela fonctionnera toujours.

Démo

2
iConnor