Ajouter un gestionnaire d'événement à l'élément HTML à l'aide de javascript

Je veux ajouter un gestionnaire d'événements pour un paragraphe pour chaque fois qu'un utilisateur clique sur elle. Par exemple, j'ai un paragraphe qui permettrait d'afficher un message d'alerte lorsqu'un utilisateur clique dessus, mais sans l'aide de "onclick" sur le code HTML.

 <p id="p1">This is paragraph Click here..</p>
 <a href="http://www.google.com" id="link1" >test</a>
 document.getElementById('p1').onmouseover  = paragraphHTML;

source d'informationauteur adilahmed

  1. 24

    Vous pouvez ajouter un écouteur d'événement.

    Qch. comme ceci: 

     var el = document.getElementById("p1");
if (el.addEventListener) {
        el.addEventListener("click", yourFunction, false);
    } else {
        el.attachEvent('onclick', yourFunction);
    }

    (merci @Reorx)

    Explication Ici

    Code complet (testé dans Chrome&IE7): 

    <html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1255">
        <script type="text/javascript">
            window.onload =function (){
            var el = document.getElementById("p1");
            if (el.addEventListener) {
                el.addEventListener("click", yourFunction, false);
            } else {
                el.attachEvent('onclick', yourFunction);
            }
            };
            function yourFunction(){
                alert("test");
            }
        </script>
    </head>
    <body>
        <p id="p1">test</p>

    </body>
</html>
  2. 6

    Pour convenir à la plupart des situations, vous pouvez écrire une fonction pour gérer cela:

    var bindEvent = function(element, type, handler) {
    if (element.addEventListener) {
        element.addEventListener(type, handler, false);
    } else {
        element.attachEvent('on'+type, handler);
    }
}
  3. 1

    Ajouter un tabIndex attribut à votre p élément, vous pouvez utiliser le onfocus fonction.

    démo: http://jsfiddle.net/9y7CL/