Événements jQuery et objets d'événement
Tout d'abord, examinons les méthodes que nous utilisons souvent pour ajouter des événements :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>javascript中的事件</title>
<script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script>
<script type="text/javascript">
$(function()
{
document.getElementById("testDiv2").onclick = showMsg;
}) function showMsg(event)
{
alert("!!!");
}
</script></head><body>
<div id="testDiv1" onclick="showMsg();">单击事件 1</div>
<div id="testDiv2">单击事件 2</div>
</body>
</html>Nous ajoutons le plus souvent des événements en ajoutant des attributs d'élément onclick aux éléments.
Ajouter des événements onclick pour testDiv2 La méthode consiste à modifier l'attribut Dom.
Dans le chapitre précédent, nous avons expliqué ce que sont les attributs d'élément et les attributs Dom. L'effet de ces deux méthodes est le même Lorsqu'un div est cliqué, une boîte de dialogue apparaît. sera affiché.
Veuillez noter que bien que l'effet soit le même, il n'est pas équivalent.
document.getElementById("testDiv2").onclick = showMsg;est équivalent à :
<div id="testDiv1" onclick="alert("!!!");">单击事件 1</div>Avez-vous remarqué la différence entre le deux ? Nous utilisons couramment l'ajout d'attributs d'élément modifiés. La méthode événementielle crée en fait une fonction anonyme :
document.getElementById("testDiv1").onclick = function(event)
{
alert("!!!");
};La signature de cette fonction anonyme est la même que notre signature manuscrite showMsg, donc showMsg peut être directement attribué à onclick .
Les inconvénients de cette méthode sont :
1. Une seule fonction de gestion d'événement peut être liée à un événement. L'utilisation de l'affectation "=" éliminera toutes les fonctions de gestion d'événement précédemment liées à cet événement. time.
2. La manière d'obtenir l'objet événement dans la fonction événement (qu'il s'agisse d'une fonction anonyme ou d'une fonction liée) nécessite un traitement spécial dans différents navigateurs :
Dans IE, le L'objet événement est un attribut de l'objet fenêtre. Le gestionnaire d'événement doit accéder à l'objet événement comme ceci :
obj.onclick=function()
{ var oEvent = window.event;
}Dans le standard DOM, l'objet événement doit être passé comme seul paramètre au gestionnaire d'événement :
obj.onclick=function()
{ var oEvent = arguments[0];
}En plus d'utiliser l'argument[0] pour accéder à ce paramètre, nous pouvons également spécifier le nom du paramètre. Le code ci-dessus est équivalent à :
obj.onclick=function(oEvent)
{
}Actuellement, les navigateurs compatibles DOM incluent Firefox, Safari, Opera, IE7, etc.
3. Ajouter une délégation de multidiffusion Les fonctions sont différentes selon les navigateurs
Voici la méthode d'ajout de multidiffusion compatible avec plusieurs navigateurs fournie dans l'article "Javascript Public. Série de bibliothèques de scripts (2) : Méthodes pour ajouter un délégué de multidiffusion d'événements" Méthode déléguée :
//统一的为对象添加多播事件委托的方法 /* 参数说明: oTarget : 要添加事件的对象.比如"document". sEventType : 事件类型.比如单击事件"click". fnHandler : 发生事件时调用的方法. 比如一个静态函数"hideCalendar"
Exemple d'utilisation :
//单击页面的任何元素,只要没有取消冒泡,都可以关闭日历控件
var cf = document.getElementById("CalFrame");
if( cf != null && hideCalendar != null )
{
ScriptHelper.addEventListener( document, "click", hideCalendar );
}
*/
scriptHelper.prototype.addEventListener = function(oTarget, sEventType, fnHandler)
{
if( oTarget.addEventListener )//for dom
{
oTarget.addEventListener( sEventType, fnHandler, false )
}
else if( oTarget.attachEvent )//for ie
{
oTarget.attachEvent( "on" + sEventType, fnHandler);
}
}
Nous devrions donc d'abord abandonner la modification de <div onclick= "..."></div> Comment ajouter des événements aux attributs d'un élément. Essayez d'utiliser la méthode d'ajout de délégués d'événements de multidiffusion pour lier plusieurs fonctions de traitement d'événements à un seul événement. Par exemple, ajoutez une méthode pour fermer la fenêtre contextuelle. -up pour l'événement click de l'objet document. L'utilisation de la multidiffusion n'affectera pas la fonction de gestion des événements d'origine de l'objet document.
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
