Maison > Article > interface Web > Une brève discussion sur le principe de l'événement jQuery Binding_jquery
Une brève discussion sur le principe de l'événement jQuery Binding_jquery
- WBOYoriginal
- 2016-05-16 16:22:35956parcourir
Il existe une méthode data dans jq, qui lie les données pertinentes aux éléments DOM. Lorsqu'un événement est lié au dom à l'aide de la méthode jq, une liste de temps correspondante sera générée
Vous pouvez voir l'exemple suivant (veuillez le consulter dans Firefox car les objets dans Firefox prennent en charge toSource())
data est utilisé pour lier des données à des éléments
La source de données est l'objet cache
Lorsque l'élément est lié aux données, un attribut jQueryxxx sera ajouté à l'élément xxx qui est l'horodatage de l'exécution de jq
. Je m'explique ici, il y a un uuid qui est cumulatif
La valeur de jQueryxxx est cet uuid
La clé de cache est cet uuid
la valeur est les données à sauvegarder
Les données sont très importantes pour la liaison d'événements........................
fonction maintenant(){
renvoyer une nouvelle date ;
} ;
var gagne = ceci,
expando = "jQuery" maintenant(),
uuid = 0,
cache = {};
win.data = function(elem, nom, données){
var id = elem[expando];
si(!id)
id = elem[expando] = uuid;
if(nom&&!cache[id])
cache[id] = {};
if(data !== non défini)
cache[id][nom] = données ;
renvoyer le nom
? cache[id][nom]
: identifiant;
>
win.removeData = function(elem, nom){
var id = elem[expando];
si (nom){
if (cache[id]) {
supprimer le cache[id][nom] ;
nom = "" ;
pour ( nom dans le cache[ id ] )
casser;
si ( !name )
supprimer les données (elem);
}
}autre{
essayez {
supprimer l'élément[expando] ;
} attraper(e){
if ( elem.removeAttribute )
elem.removeAttribute( expansion );
}
supprimer le cache[id] ;
}
>
win.each = function( objet, rappel, args ) {
nom du var, i = 0, longueur = objet.longueur ;
si ( arguments ) {
if ( longueur === non défini ) {
pour (nom dans l'objet)
if ( callback.apply( object[ name ], args ) === false )
casser;
} autre
pour ( ; i < longueur; )
if ( callback.apply( object[ i ], args ) === false )
casser;
} autre {
if ( longueur === non défini ) {
pour (nom dans l'objet)
if ( callback.call( object[ name ], name, object[ name ] ) === false )
casser;
} autre
pour ( var valeur = objet[0];
je &Lt ; longueur && callback.call( valeur, i, valeur ) !== false; valeur = objet[ i] ){}
}
renvoyer l'objet ;
>
Ensuite, implémentez l'ajout d'événements
Dans jq se trouve la méthode add dans jQuery.event
Certaines fonctions sont implémentées dans la méthode add
Récupérez les événements de l'élément et gérez les données liées à ces deux données
events stocke une liste d’événements
Le format est le suivant
{
cliquez : [{handler:function(){},type :"click",guid:'xx'}.....],
souris : [...]
>
handle est la fonction exécutée
(Toutes les fonctions d'exécution sont les mêmes. Elles parcourent la liste des événements et exécutent l'événement correspondant)
Parcourez ensuite les types car plusieurs événements peuvent être liés
La fonction de rappel donnera également plusieurs attributs
Supposons que la fonction de rappel soit handler
handler.guid = gevent.guid
handler.type = nom
le nom doit être considéré comme un nom spécial pour une suppression facile
Par exemple
$('#xx')
.bind('clic',function(){})
.bind('click.d',handler)
Le nom est d
Lors de la suppression, vous ne pouvez supprimer que l'événement d sans supprimer l'événement click ci-dessus
Finalement, l'événement est lié à l'élément, mais les fonctions exécutées le sont toutes
fonction(){
gevent.handle.apply(arguments.callee.elem, arguments);
});
win.gevent = {
guide : 1,
Ajouter : fonction (élément, types, gestionnaire){
Si (elem.nodeType == 3 || elem.nodeType == 8)
revenir ;
if ( elem.setInterval && elem != window )
elem = window;
//Donne à la fonction un index unique pour faciliter la suppression ultérieure de l'événement
if ( !handler.guid )
handler.guid = this.guid;
//Récupère les données sous le handle d'événements de l'élément
var événements = data(elem, "events") || data(elem, "events", {}),
handle =data(elem, "handle") || data(elem, "handle", function(){
//gevent.handle est la fonction qui sera exécutée après le déclenchement de divers comportements
gevent.handle.apply(arguments.callee.elem, arguments);
});
handle.elem = elem;
//Nom de l'événement Traverse car il peut être cliqué sur la souris
Chaque(types.split(/s/), fonction(index, type) {
var namespaces = type.split(".");
//Obtenir le nom de l'événement
type = namespaces.shift();
//Supprimez l'objet après le point. C'est un nom spécial lors de la suppression, vous pouvez spécifier de le supprimer, comme click.d
. //Utilisez le type d'événement pour enregistrer ce nom spécial
handler.type = namespaces.slice().sort().join(".");
//Obtenir si l'événement existe déjà dans l'objet événements
var handlers = events[type];
//Si l'événement n'existe pas, lie l'événement à l'élément if (!handlers) {
handlers = events[type] = {};
Si (elem.addEventListener)
elem.addEventListener(type, handle, false);
else if (elem.attachEvent)
elem.attachEvent(type "on", handle); }
//Mettez la fonction dans la liste d'événements de l'élément
handlers[handler.guid] = handler; });
elem = nul ; >
>
gevent.hander est la fonction réellement exécutée par l'événement lié
Il y a aussi une place pour un nom spécial dans gevent.hander, mais je ne sais pas à quoi il sert
L'événement est d'abord empaqueté dans le gestionnaire
Pour l'emballage, voir gevent.fix et setEvent
L'essentiel est de faire une copie d'un événement natif puis de combiner les méthodes incompatibles en écriture compatible
Récupérez ensuite les événements (liste des événements) de l'élément
Parcourez ensuite la liste d'événements pour déterminer si le type est la clé de la liste d'événements. Si tel est le cas, exécutez l'événement
. La valeur de retour sera jugée lors de l'exécution de la fonction de liste
Si vous retournez false, vous pouvez également organiser le bouillonnement d'événements et le comportement par défaut
win.gevent = {
handle : fonction (événement) {
var tous, gestionnaires ;
//Événement packaging
event = arguments[0] = gevent.fix( event || window.event );
event.currentTarget = this;
//Ici...
var namespaces = event.type.split(".");
event.type = namespaces.shift();
all = !namespaces.length;
var namespace = RegExp("(^|\.)" namespaces.slice().sort().join(".*\.") "(\.|$)");
//Récupère la liste des événements du comportement de cet élément
handlers = (data(this, "events") || {} )(event.type]; //Parcourez cette liste d'événements et exécutez les choses à exécuter
pour ( var j dans les gestionnaires ) {
var handler = handlers[j];
Si ( all || namespace.test(handler.type) ) {
// Transmettre une référence à la fonction de gestionnaire elle-même
// Afin que nous puissions le supprimer ultérieurement
// Le commentaire sur jq est écrit comme ceci : Faites référence au gestionnaire d'événements à cet événement pour plus de commodité et supprimez-le plus tard
. // Mais dans la suppression, le gestionnaire d'événements n'est pas utilisé. Je ne sais pas à quoi il sert ici. Et lorsqu'il y a plusieurs événements, cet événement est remplacé
. event.handler = handler;
//Exécute l'événement et c'est un événement appelé avec un élément Vous pouvez exécuter cet élément dans l'événement et ret est la valeur de retour de la fonction
. var ret = handler.apply(this, arguments);
//S'il y a une valeur de retour et que la valeur de retour est fausse, l'exécution empêche l'événement de bouillonner et le comportement par défaut de l'événement d'exécution est bloqué Si( ret !== non défini ){
event.result = ret;
Si ( ret === false ) {
event.preventDefault();
event.stopPropagation();
}
>
},
props : "altKey attrChange attrName bulles bouton annulable charCode clientX clientY ctrlKey currentTarget données détail eventPhase fromElement handler keyCode metaKey newValue originalTarget pageX pageY prevValue RelatedNode RelatedTarget screenX screenY shiftKey srcElement target toElement view wheelDelta which".split(" "), Correctif : fonction (événement) {
//new setEvent donnera à l'événement un attribut expando. S'il existe l'un des attributs, cela signifie que l'événement a été généré et qu'il n'est pas nécessaire de l'envelopper à nouveau
if ( événement[expando] )
événement de retour ;
//Garder un événement original
// new Un nouvel événement Ceci est différent de l'événement original
var originalEvent = événement;
event = new setEvent(originalEvent);
//Obtenir la valeur d'attribut de l'événement d'origine. Pour connaître les valeurs d'attribut disponibles, voir this.props
pour ( var i = this.props.length, prop; i; ){
prop = this.props[ --i ];
event[ prop ] = originalEvent[ prop ];
>
//Unifiez les éléments cibles dans event.target
Si ( !event.target )
event.target = event.srcElement || // Corrige #1925 où srcElement pouvait ne pas être défini non plus
//S'il s'agit d'un nœud de texte, récupérez son nœud parent
Si ( event.target.nodeType == 3 )
event.target = event.target.parentNode;
Si ( !event.ratedTarget && event.fromElement )
event.ratedTarget = event.fromElement == event.target event.toElement : event.fromElement; événement de retour ;
>
win.setEvent = fonction(src){
// Autoriser l'instanciation sans le mot-clé 'new'
// Objet événement
Si( src && src.type ){
This.originalEvent = src;
This.type = src.type;
// Type d'événement
}ailleur
This.type = src;
// timeStamp est buggé pour certains événements sur Firefox(#3843)
// On ne se fiera donc pas à la valeur native
This.timeStamp = maintenant();
// Marquez-le comme corrigé
Ceci[expando] = true;
>
fonction returnFalse(){
Renvoie faux ;
>
fonction returnTrue(){
renvoie vrai ;
>
setEvent.prototype = {
prévenirDefault : function() {
var e = this.originalEvent;
Si( !e )
revenir ;
// si PreventDefault existe, exécutez-le sur l'événement d'origine
Si (e.preventDefault)
e.preventDefault();
// sinon, définissez la propriété returnValue de l'événement d'origine sur false (IE)
e.returnValue = false;
},
stopPropagation : function() {
var e = this.originalEvent;
Si( !e )
revenir ;
// si stopPropagation existe, exécutez-le sur l'événement d'origine
Si (e.stopPropagation)
e.stopPropagation();
// sinon, définissez la propriété CancelBubble de l'événement d'origine sur true (IE)
e.cancelBubble = true;
},
stopImmediatePropagation:function(){
This.isImmediatePropagationStopped = returnTrue;
This.stopPropagation();
},
isImmediatePropagationStopped : returnFalse
};
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">
以上内容只是自己的一些理解,水平有限,难免有错,望指正...
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript