Wie wird es in Chrome angezeigt?

Question

Ich bin der Neue und komme aus China. Mein Englisch ist nicht gut. Ich werde mein Bestes versuchen, um meine Frage zu erklären. Danke für das Lesen. Hier sind zwei Elemente:

<input type="button" value="Click1"/> 
<input type="button" value="Click2"/> 

ich die „Onclick“ Ereignisse von denen, die überwacht werden sollen. Also habe ich versucht, mit diesem Code:

function EventUtil(){} 

EventUtil.prototype = { 
constructor:EventUtil, 

addHandler: function (element, type, handler) { 
    if (element.addEventListener) { //DOM2 
     element.addEventListener(type, handler, false); 
    } else if (element.attachEvent) { //IE 
     element.attachEvent("on" + type, handler); 
    } else {  //DOM0 
     element["on" + type] = handler; 
    } 

}}; 

var eventUtil = new EventUtil(); 
var buttons = document.getElementsByTagName("input"); 
for(var i = 0;i<buttons.length;++i) { 

    var func = function() { 
     alert(this.value); 
    }; 
    eventUtil.addHandler(buttons[i], "click", func); 
} 

In Chrome, ich kann die "Click1" erhalten und "click2". Aber im IE8 gibt es mir beide "undefiniert". Wie sieht es in Chrome aus?

Answer 1

Im alten Ereignismodell IE (die attachEvent-Funktion), die this Schlüsselwort innerhalb des Handlers Rückruf ist nicht die Element, das das Ereignis gebunden hat, ist das Objekt window. So ist der Code:

var func = function() { 
    alert(this.value); 
}; 

Wird nicht in IE funktionieren, da this ist das Fensterobjekt hier, nicht das Element.

Sie benötigen, wie etwas zu tun ist:

var func = (function(elem) { 
    return function() { 
     alert(elem.value); 
    }; 
}(buttons[i])); 

On a side note - i zweite ist die Verwendung eines Frameworks wie jQuery, wenn Sie im Internet Explorer-Version unterstützt niedrig gehen müssen, macht es viel Event-Handling viel einfacher (unter anderem).

Answer 2

Wenn es möglich ist, empfehle ich Ihnen, eine JS-Bibliothek wie jQuery zu verwenden. Wenn Sie die jQuery-Bibliothek in Ihre HTML-Datei enthalten können Sie Ihr Ziel erreichen einfach mit:

$("input").click(function(){ 
    alert($(this).val()); 
}