hinzufügen von Ereignis als parameter innerhalb der Funktion mit addEventListener (funktioniert nicht in FF/IE). Javascript

<html>
<head>
<title>FML</title>

<script type="text/javascript">

function function1(e, div) {
div.innerHTML="this works"
document.getElementById('myspan').innerHTML= 'x-pos on click: ' + e.clientX
div.addEventListener("mousemove", function(){test(event, this)}, true);
}

function test(e, div) {
div.innerHTML+='<br/>so does this'
//This doesn't work. Can't add event as a parameter to function that has to be executed when using addEventListener
document.getElementById('myspan2').innerHTML= 'y-pos on move: ' + e.clientY
}

</script>
</head>
<body>
<span id="myspan">&nbsp;</span>
<span id="myspan2">&nbsp;</span>
<div style="width:100px;height:100px;background-color:blue;overflow:hidden;"  onclick="function1(event, this)">
</body>
</html>

Klicken Sie auf das Blaue div.

Möchte ich hinzufügen, dass das Ereignis "mouseover", haben es ausgeführt, die test()-Funktion enthalten folgende Parameter: dieses Ereignis

Wenn die Funktion test(e, div) wird aufgerufen, ich bekomme immer ein "event" nicht definiert ist" Fehler in firefox und IE, obwohl ironischerweise es funktioniert perfekt in Chrome und Safari.

Möglichkeit, die ich hinzufügen können, die event-parameter durch die Verwendung von addEventListener? Kann ich es auf der Arbeit mit Fenster.event in chrome und safari, aber dies ist das genaue setup, was ich will. Ich habe schon gegoogelt und trial/erroring für eine Weile jetzt, ohne Erfolg... also FML :/Irgendwelche Tipps/Hinweise/... außerdem Schießen mir in den Kopf?

Ich weiß, jquery würde wahrscheinlich lösen, aber ich will mit javascript vertraut, bevor Sie die Migration zu jQuery. Oder sollte ich migrieren überhaupt?

Dank und cheers,
p.

Neben meiner Antwort, Daumen hoch für "ich weiß, jquery würde wahrscheinlich lösen, aber ich will mit javascript vertraut, bevor Sie die Migration von jQuery." Dies ist der richtige Weg um eine Sprache zu lernen. Und es scheint selten in der JS-community. Da habe ich Menschen gesehen, hier in SO, die waren auch nur zu Fragen für ein spezielles Konstrukt in jQuery gemacht werden, zu ersetzen, wenn-dann-sonst... 😀

InformationsquelleAutor Pascalculator | 2011-09-12

  1. 13
    div.addEventListener("mousemove", function(){test(event, this)}, true);

    Gut, natürlich bekommen Sie auch "- Ereignis ist nicht definiert" ! Wenn die mousemove Ereignis-Trigger haben, Ihre event-handler aufgerufen wird:

    function(){test(event, this)}

    Es gibt zwei Möglichkeiten zum erreichen der Veranstaltung Informations-Objekt. Entweder es wird an den event-handler als argument, oder es kann gefunden werden in window.event.

    Angenommen, der zweite Fall hält. Da es keine lokale variable mit dem Namen event in Ihrer Funktion, noch gibt es eine solche variable in function1 aufruft, sucht der browser, ob es eine event definiert das Globale Objekt. In JavaScript ist das Globale Objekt aufgerufen wird window, so dass Ihre Funktion so interpretiert, dass

    function(){test(window.event, this)}

    und es funktioniert.

    Jedoch, wie ich schon gesagt habe, in einigen Browsern, die event-Informationen übergeben wird, in das argument. Damit Ihr event handler wollte wohl so Aussehen:

    function(event){test(event, this)}

    sonst die event übergeben test() wäre nicht definiert. Also, das ist wie eine cross-browser-handler:

    function(event) {
  if (!event) //i.e. the argument is undefined or null
      event = window.event;

  test(event, this);
}

    Das zweite problem ist, dass addEventListener() funktioniert nicht in älteren IEs (es funktioniert im IE9, obwohl). Für ältere IEs haben, müssen Sie auf eine ähnliche Funktion namens attachEvent(). Oder, wenn Sie nur bringen Sie einen handler, tun Sie es der einfache Weg

    div.onmousemove = function() {...};
    Wow, vielen Dank ! Das stört mich viel zu lange, hätte nie gedacht, das jemals gelöst bekommt. Scheint, wie du ein purist bist 🙂 ich habe migriert, um jQuery in der Zwischenzeit, obwohl, aber ich habe noch (zum Glück) verwenden JavaScript für die kleineren Sachen, so dass ich nicht haben so laden Sie eine gesamte (jQuery) - Bibliothek.
    Kann der Ereignis-listener entfernt werden mit diesem Ansatz? Ansonsten, was ist der Punkt, der Verschachtelung eine benannte Funktion innerhalb einer anonymen Funktion, die in dieser Weise?

    InformationsquelleAutor Imp

  2. 2

    In einigen Browsern wie Firefox, die Veranstaltung muss als parameter übergeben werden, so müssen Sie ersetzen Sie diesen code

    div.addEventListener("mousemove", function(){test(event, this)}, true);

    mit diesem

    div.addEventListener("mousemove", function(event){test(event, this)}, true);

    Vergleichen Sie sorgfältig die zwei Zeilen code, und beachten Sie die Veranstaltung Eigentum übergeben als parameter der Funktion Hinzugefügt, in der zweiten Reihe.

    für alte IE ver attachEvent() verwendet werden;

    div.attachEvent("onclick", function(event){test(event, this)});

    Beachten Sie, dass attachEvent wurde ersetzt in modernen standard-js mit addEventListener und jetzt fast alle modernen browser unterstützen.

    Hier
    http://caniuse.com/#feat=addeventlistener
    ist möglich, siehe Kompatibilitäts-Tabelle.

    InformationsquelleAutor willy wonka

Schreibe einen Kommentar