Maison > Article > interface Web > Quels sont les événements en javascript
Quels sont les événements en javascript
- 醉折花枝作酒筹original
- 2021-06-11 11:16:434587parcourir
Javascript comprend : 1. Événements d'interface utilisateur ; 2. Événements de focus ; 3. Événements de souris et de roue ; 4. Événements de clavier et de texte ; 6. Événements de modification ; Événements de l'appareil ; 9. Événements tactiles et gestuels.
L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.
Types d'événements JavaScript
Il existe de nombreux types d'événements qui peuvent se produire dans un navigateur Web. Ici, je me concentrerai principalement sur les types d'événements couramment utilisés suivants :
Événement UI
Événement Focus
-
Événements de souris et de roue
Événements de clavier et de texte
Événements composites
Changement Événements
Événements HTML5
Événements sur les appareils
Événements tactiles et gestuels
Première partie : événements d'interface utilisateur
L'interface utilisateur dans l'événement UI est (interface utilisateur, interface utilisateur), qui est déclenchée lorsque l'utilisateur interagit avec les éléments du sauna de la page.
Les événements de l'interface utilisateur incluent principalement les événements de chargement, de déchargement, d'abandon, d'erreur, de sélection, de redimensionnement et de défilement.
Événement 1.load
Cet événement se produit lorsque la page est complètement chargée (y compris toutes les images, fichiers js, fichiers css et autres ressources externes), l'événement de chargement sur la fenêtre sera déclenché .
Cet événement est l'événement le plus couramment utilisé en JavaScript. Par exemple, nous utilisons souvent window.onload=function(){};, qui consiste à exécuter la fonction une fois la page complètement chargée.
De plus, je n'ai jamais su que cet événement pouvait également être utilisé sur d'autres éléments, tels que des éléments d'image, comme indiqué ci-dessous :
<img src="smile.png" onload="alert('loaded')">
Autrement dit, il y aura une fenêtre pop-up une fois l'image complètement chargée. Bien sûr, il peut également être implémenté en utilisant JS, comme indiqué ci-dessous :
var img=document.getElementById("img");
EventUtil.addHandler(img,"load",function(){
event=EventUtil.getEvent(event);
alert(EventUtil.getTarget(event).src);
}); 2 événement de déchargement
Évidemment, cet événement est relatif à l'événement de chargement. Lancé après que le document ait été complètement déchargé. Le temps de déchargement se déclenche lorsque l'utilisateur passe d'une page à une autre. L'utilisation la plus courante de cet événement consiste à effacer les références afin d'éviter les fuites de mémoire.
Cet événement a également deux façons de le préciser. L'une est la méthode JavaScript, utilisant EventUtil.addHandler(); l'autre consiste à ajouter une fonctionnalité à l'élément body.
Il convient de noter que vous devez être prudent lorsque vous écrivez le code dans l'événement onload, car il est déclenché après le déchargement de la page, donc les objets qui existent après le chargement de la page peuvent ne pas nécessairement exister après le chargement. est déclenché !
<body onload="alert('changed')">
3.événement resize
Lorsque la fenêtre du navigateur est ajustée à une nouvelle largeur ou hauteur, l'événement de redimensionnement sera déclenché. Cet événement est déclenché sur la fenêtre. Par conséquent, le gestionnaire peut également être spécifié via JS ou l'attribut onresize dans l'élément body.
<body onresize="alert('changed')">
Si vous écrivez ce code, une fenêtre apparaîtra lorsque la taille du navigateur changera.
Événement 4.scroll
Cet événement sera déclenché à plusieurs reprises pendant le défilement du document, le code du gestionnaire d'événement doit donc rester aussi simple que possible.
Partie 2 : Événements de focus
Les événements de focus sont déclenchés lorsqu'un élément de page gagne ou perd le focus. Il existe principalement les types suivants :
le flou se déclenche lorsque l'élément perd le focus. Cet événement ne fait pas de bulles et est pris en charge par tous les navigateurs.
le focus est déclenché lorsqu'un élément obtient le focus. Cet événement ne fait pas de bulles et est pris en charge par tous les navigateurs.
focusin est déclenché lorsqu'un élément obtient le focus. Cet événement bouillonne et n'est pas pris en charge par certains navigateurs.
focusout est déclenché lorsqu'un élément perd le focus. Cet événement bouillonne et n'est pas pris en charge par certains navigateurs.
Remarque : Même si le flou et la mise au point ne bouillonnent pas, ils peuvent toujours être entendus pendant la phase de capture.
Partie 3 : Événements de souris et de molette
Les événements de souris sont les événements les plus couramment utilisés dans le développement Web, car la souris est le principal dispositif de positionnement.
clic---L'utilisateur clique sur le bouton gauche de la souris ou appuie sur la touche Entrée pour déclencher
dbclick---L'utilisateur double- clique sur la gâchette du bouton gauche de la souris.
mousedown---Déclenché lorsque l'utilisateur appuie sur n'importe quel bouton de la souris.
mouseenter---Déclenché lorsque le curseur de la souris se déplace de l'extérieur de l'élément vers la portée de l'élément pour la première fois. Cet événement ne bouillonne pas.
mouseleave---Déclenché lorsque le curseur au-dessus de l'élément se déplace en dehors de la portée de l'élément. Pas de bulles.
mousemove---déclenché lorsque le curseur se déplace continuellement à l'intérieur de l'élément.
mouseover---Déclenché lorsque le pointeur de la souris se trouve à l'extérieur d'un élément, puis que l'utilisateur se déplace dans les limites d'un autre élément pour la première fois.
mouseout---Déclenché lorsque l'utilisateur déplace le curseur d'un élément à un autre.
mouseup---déclenché lorsque l'utilisateur relâche le bouton de la souris.
Remarque : tous les événements ci-dessus sont à bulles, à l'exception de mouseenter et mouseleave.
Important : L'événement click ne sera déclenché que si les événements mousedown et mouseup sont déclenchés successivement sur le même élément. De même, l'événement dbclick ne sera déclenché que si l'événement click est déclenché deux fois sur le même élément.
dbclick事件的产生过程如下：
mousedown
mouseup
click
mousedown
mouseup
click
dbclick
上面介绍了有关鼠标的事件，下面介绍一些对于鼠标光标的位置：客户区坐标位置、页面坐标位置、屏幕坐标位置
一、客户区坐标位置
通过客户区坐标可以知道鼠标是在视口中什么位置发生的。
clientX和clientY分别表示鼠标点击的位置。以body的左上角为原点，向右为X的正方向，向下为Y的正方向。这两个都是event的属性。举例如下：
<button id="clickMe">点我</button>
<script>
var button=document.getElementById("clickMe");
button.onclick=function(event){
alert(event.clientY+""+event.clientX);
};
</script>当我点击按钮的左上角时，显示为00。效果如下：
二.页面坐标位置
和客户区坐标位置不同，页面坐标位置表示鼠标光标在页面而非视口中的位置。因此坐标是从页面本身而非视口的左边和顶边计算的。如果前面的话不能很好的理解，接着看这里：在页面没有滚动的情况下，页面坐标位置和客户区坐标位置是相同的。
页面坐标
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面坐标位置</title>
<style>
*{
margin:0;
padding:0;
}
div{
width: 800px;
height: 1200px;
/*我的电脑的视口高度为960px；*/
background: #ccc;
}
</style>
</head>
<body>
<div></div>
<button id="button"> 点击我</button>
<script>
var button=document.getElementById("button");
button.onclick=function(){
alert("pageX为"+event.pageX+"pageY为"+event.pageY);
};
</script>
</body>
</html>在上面的例子中，我把p的高设置为了1200px；而我的浏览器视口高度为960px；所以一定需要滚动我们才能点击按钮，最终得到的结果是：pageX为13pageY为1210。
然而IE8及更早的浏览器是不支持事件对象上的页面坐标的，即不能通过pageX和pageY来获得页面坐标，这时需要使用客户区坐标和滚动信息来计算了。而滚动信息需要使用document.body(混杂模式)、document.documentElement(标准模式)中的scrollLeft和scrollTop属性。举例如下：
<button id="button"> 点击我</button>
<script>
var button=document.getElementById("button");
button.onclick=function(){
var pageX=event.clientX+(document.body.scrollLeft||document.documentElement.scrollLeft);
var pageY=event.clientY+(document.body.scrollRight||document.documentElement.scrollRight);
alert("pageX为"+pageX+"pageY为"+pageY);
};
</script>此例子在IE浏览器下可得到同样结果。
三.屏幕坐标位置
与前两者又有所不同，鼠标事件发生时，还有一个光标相对于整个电脑屏幕的位置。通过screenX和screenY属性就可以确定鼠标事件发生时鼠标指针相对于整个屏幕的位置。举例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面坐标位置</title>
<style>
*{
margin:0;
padding:0;
}
</style>
</head>
<body>
<button id="button"> 点击我</button>
<script>
var button=document.getElementById("button");
button.onclick=function(){
alert("X为："+event.screenX+"Y为："+event.screenY);
};
</script>
</body>
</html>最终的结果如下：
显然screenX和screenY是相对于屏幕的左方和上方的。
四.修改键
当点击某个元素时，如果我们同时按下了ctrl键，那么事件对象的ctrlKey属性值将为true，否则为false，对于alt、shift、meta（windows键盘的windows键、苹果机的Cmd键）的事件属性altKey、shiftKey、metaKey同样如此。下面举例如下：
<button id="button"> 点击我</button>
<script>
var button=document.getElementById("button");
button.onclick=function(){
var array=new Array();
if(event.shiftKey){
array.push("shift");
}
if(event.ctrlKey){
array.push("ctrl");
}
if(event.altKey){
array.push("alt");
}
if(event.metaKey){
array.push("meta");
}
alert(array.join(","));
};
</script>这个例子中，我首先创建了一个array数组，接着如果我按下了那几个键，就会存入相应的名称。这里我同时按下了四个键，结果如下：
即最终将数组中的四个值拼接成了字符串显示出来。
五、相关元素
<button id="button"> 点击我</button>
<script>
var button=document.getElementById("button");
button.onmouseup=function(){
alert(event.button);
};
</script>当我是用左键产生mousedown事件时，弹出窗口为0，中间键为1，右键为2。
七、鼠标滚轮事件
<script>
document.onmousewheel=function(){
alert(event.wheelDelta);
};
</script>当我向下滚动滚轮时，效果如下：
第四部分：键盘和文本事件
该部分主要有下面几种事件：
keydown：当用户按下键盘上的任意键时触发。按住不放，会重复触发。
keypress:当用户按下键盘上的字符键时触发。按住不放，会重复触发。
keyup:当用户释放键盘上的键时触发。
textInput:这是唯一的文本事件，用意是将文本显示给用户之前更容易拦截文本。
这几个事件在用户通过文本框输入文本时才最常用到。
键盘事件：
document.addEventListener("keydown",handleKeyDownClick,false);
function handleKeyDownClick(event) {
var e = event||window.event||arguments.callee.caller.arguments[0];
if (e&&e.keyCode == 13) {
alert("keydown");
}
}【推荐学习：javascript高级教程】
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!