<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <style> Button {background-Color: # 0f0;} </ style> </-head> <body> <Button id = "Button"> Button </futton> <entrée Type = "Text"> <Script> var Button = Document.getementyId ("Button"); Button. {alert (this.id); // Bouton contextuel}; // dans le contexte peut être considéré comme le bouton </cript> </ body> </html>Rejoignez Bind
La copie de code est la suivante:
var text = document.getElementById ("text");
var bouton = document.getElementById ("bouton");
Button.OnClick = function () {
alerte (this.id); // bouton contextuel
} .bind (texte);
// dans le contexte peut être considéré comme un bouton
Pour le moment, vous constaterez que cela a changé en texte
Il est également applicable dans les littéraux de la fonction, dans le but de garder la direction de haut en bas (ceci) inchangé.
var obj = {couleur: "#ccc", élément: document.getElementById ('text'), événements: function () {document.getElementyId ("bouton"). AddeventListener ("cliquez", fonction (e) {console.log (this); this.element.style.color = this.color;}. {this.events ();}}; obj.init ();À l'heure actuelle, cliquer sur le texte du bouton changera la couleur. On peut voir que ce n'est pas un bouton mais OBJ.
La méthode de bind () n'est pas applicable dans IE, 6, 7, 8. Il est nécessaire d'étendre cette méthode en étendant le prototype de fonction.
if (! function.prototype.bind) {function.prototype.bind = function (obj) {var slice = [] .slice, args = slice.call (arguments, 1), self = this, nop = function () {}, bend = function () {return self.apply (this instance nop? this: (obj || {}), args.concat (slice.call (arguments)));}; nop.prototype = self.prototype; bend.prototype = new nop (); return bound;};}Pour le moment, vous pouvez voir que Bind () est également pris en charge dans IE6, 7 et 8.
La copie de code est la suivante:
Slice = array.prototype.slice,
ou
array = array.prototype.slice.call (array, 0);
Convertir un tableau comme un tableau