JavaScript: écouteur d'Événement pour plusieurs boutons avec le même nom de classe

Je suis en train de construire un arbre de décision en JavaScript. Je n'ai pas de jQuery qui s'offrent à moi pour ce projet.

Je voudrais être en mesure d'avoir des boutons, placés n'importe où dans l'arbre de décision (Cachés ou affichés sur la page), avec le même nom de classe. L'écouteur sur le JS côté puis d'exécuter une fonction.

Voici ce que j'utilise pour et basé sur l'identification de l'auditeur. Il fonctionne bien mais j'ai besoin d'être en mesure d'avoir de multiples boutons de la même catégorie ou nom. Bien que j'ai vu des exemples de cela, je ne peux pas l'obtenir pour fonctionner correctement.

function q1a1() {
var q1a1button = document.getElementById("q1answer1");
        if(q1a1button.addEventListener){
q1a1button.addEventListener("click", function() { q1answer1();}, false);
        } else if(q1a1button.attachEvent){
q1a1button.attachEvent("onclick", function() { q1answer1();});
}
};

if(window.addEventListener){
    window.addEventListener("load", q1a1, false);
        } else if(window.attachEvent){
    window.attachEvent("onload", q1a1);
        } else{
    document.addEventListener("load", q1a1, false);                
}

function q1answer1() {          

//DO SOME STUFF
                                            }

Ce doit également travailler en autant de versions d'IE que possible. Pour la seule gestion de classe, je suis en utilisant querySelectorAll.

utilisez simplement querySelectorAll() pour itérer sur les éléments avec cette classe, plus ou moins enveloppant que la boucle autour du code que vous avez déjà. vous pouvez également joindre un événement unique pour le corps, et de regarder (e.cible||e.srcElement).className pour décider de comment gérer l'événement lors de l'invocation de temps.
querySelectorAll travaille dans ie8. Si vous avez besoin de soutien rien dessous, je suis désolé pour vous. Juste parcourir le tableau des éléments, ajouter un écouteur d'événement pour chaque.

InformationsquelleAutor user3460707 | 2014-05-23

javascript listener

6

Ce que vous êtes vraiment la recherche est D'Événements JavaScript Délégation. Dans votre cas, vous avez le BOUTON éléments que je vais assumer sont <button> balises. Maintenant, vous voulez savoir quand l'un de ces boutons a été cliqué, puis exécutez une fonction:
```
if (document.addEventListener) {
    document.addEventListener("click", handleClick, false);
}
else if (document.attachEvent) {
    document.attachEvent("onclick", handleClick);
}

function handleClick(event) {
    event = event || window.event;
    event.target = event.target || event.srcElement;

    var element = event.target;

    //Climb up the document tree from the target of the event
    while (element) {
        if (element.nodeName === "BUTTON" && /foo/.test(element.className)) {
            //The user clicked on a <button> or clicked on an element inside a <button>
            //with a class name called "foo"
            doSomething(element);
            break;
        }

        element = element.parentNode;
    }
}

function doSomething(button) {
    //do something with button
}
```
N'importe où sur la page d'un <button class="foo">...</button> élément s'affiche, en cliquant sur n'importe quelle balise HTML à l'intérieur d'elle, exécutera la doSomething fonction.

Mise à jour: Depuis l'Événement Délégation est utilisé, un seul gestionnaire de clic est enregistré sur l'objet document. Si plus <button>s sont créés suite à un appel AJAX, vous n'avez pas à vous inscrire cliquez sur gestionnaires sur ces nouveaux <button>s depuis, nous profitons de l'événement click surgissent de l'élément de l'utilisateur a cliqué sur l'objet document lui-même.
- +1 pour l'utilisation du fait des événements de la bulle
- jQuery on méthode est très pratique, mais pour ceux d'entre nous sans jQuery ou ne souhaitez pas l'utiliser, j'ai écrit Oxydizr, qui utilise HTML5 de données* les attributs. Il permet de dissocier le comportement, de balisage et de style.
- Cela fonctionne très bien. Merci beaucoup!
- Burghardt si vous souhaitez que le bouton est cliqué, les changements de couleur comment nous pouvons réaliser que sans id unique ou un nom de classe?
InformationsquelleAutor Greg Burghardt

Si vous n'avez pas de jquery:

if (document.body.addEventListener){
    document.body.addEventListener('click',yourHandler,false);
}
else{
    document.body.attachEvent('onclick',yourHandler);//for IE
}

function yourHandler(e){
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (target.className.match(/keyword/))
    {
        //an element with the keyword Class was clicked
    }
}

Si vous utilisez un navigateur de la bibliothèque comme jquery:

HTML:

<div class="myClass">sample</div>
<div class="myClass">sample 2</div>

JS:

function theFuncToCall(event){
  //func code
}

$(document).on('click', '.myClass', theFuncToCall);

jQuery n'est pas disponible à partir de l'intérieur de cette organisation. (Je ne peux pas l'utiliser) d'où la frustration et la nouvelle courbe d'apprentissage. 🙂
Obligatoire lien vers Vous ne Pourriez Pas Besoin de jQuery 🙂

InformationsquelleAutor carter

var buttons = document.querySelectorAll(".MyClassName");
var i = 0, length = buttons.length;
for (i; i < length; i++) {
    if (document.addEventListener) {
        buttons[i].addEventListener("click", function() {
            //use keyword this to target clicked button
        });
    } else {
        buttons[i].attachEvent("onclick", function() {
            //use buttons[i] to target clicked button
        });
    };
};

InformationsquelleAutor ndugger

Cette réponse est un peu exagéré, mais il devrait vous montrer des moyens de la structure de votre code dans un "moderne", même si vous êtes encore en ciblant les anciens navigateurs

Écrire du code pour ajouter des écouteurs d'événement, ce qui minimise la différence entre les nouveaux et les anciens navigateurs

var listen = (function () { //will return the handler for use in unlisten
    if (window.addEventHandler) {
        return function (node, type, handler) {
            node.addEventListener(type, handler);
            return handler;
        };
    } else if (window.attachEvent) {
        return function (node, type, handler) {
            var fn = function (e) {
                if (!e) {
                    e = window.event;
                }
                if (!e.target && e.srcElement) {
                    e.target = e.srcElement;
                }
                return handler.call(this, e);
            };
            node.attachEvent('on' + type, fn);
            return fn;
        };
    } else {
        throw new Error('Events not supported in this environment');
        //or
     //return function ... node['on' + type] = function () { ... };
    }
}());

et si vous souhaitez l'inverse, trop

var unlisten = (function () { //use handler given by listen
    if (window.removeEventListener) {
        return function (node, type, handler) {
            node.removeEventListener(type, handler);
        };
    } else if (window.detachEvent) {
        return function (node, type, handler) {
            node.detachEvent('on' + type, handler);
        };
    } else {
        throw new Error('Events not supported in this environment');
        //or
     //return function ... node['on' + type] = null;
    }
}());

Écrire votre gestionnaire de clic

function clickHandler(e) {
    //do stuff
}

Envelopper votre gestionnaire de clic dans une fonction pour choisir uniquement les clics sur les boutons avec le droit de la classe

function wrappedClickHandler(e) {
    var tokens, i;
    if (e.target.tagName !== 'INPUT' && e.target.tagName !== 'BUTTON') {
        return;
    }
    tokens = (e.target.className || '').split(' ');
    for (i = 0; i < tokens.length; ++i) {
        if (tokens[i] === 'theClassTokenWeWant') {
            return clickHandler.call(this, e);
            //or
         //return clickHandler.call(e.target, e);
        }
    }
}

Ajouter un écouteur à un ancêtre commun nœud

var h = listen(document, 'click', wrappedClickHandler);
//.. later, if desired
unlisten(document, 'click', h);

InformationsquelleAutor Paul S.

Vous devez vous connecter pour publier un commentaire.