Annuaire d'articles
le code
// 在网页加载完成后运行代码
document.addEventListener("DOMContentLoaded", () => {
// 监听按键按下事件
document.addEventListener("keydown", (event) => {
// 判断按下的键是否为Ctrl键和P键
if (event.ctrlKey && event.key === "p") {
// 阻止事件默认行为(打印页面)
event.preventDefault();
// 可以选择在这里添加自己的提示或处理逻辑
console.log("ctrl + p 已被阻止");
}
});
});
addEventListener
définition de w3school
addEventListener()
méthode pour attacher un gestionnaire d’événements à un élément.
paramètre décrire taper requis. Le nom de l'évènement.
Veuillez ne pas utiliser le préfixe « on ».
Veuillez utiliser « clic » au lieu de « onclick ».
fonction requis. Fonction à exécuter lorsque l'événement se produit. utiliserCapture facultatif (par défaut = faux).
false
- Les handlers sont exécutés en phase de bouillonnement.true
- Les gestionnaires sont exécutés pendant la phase de capture.
détails techniques
Cette méthode ajoutera la fonction d'écoute d'événement spécifiée à la collection d'écouteurs du nœud actuel pour gérer
type
les événements du type spécifié. SiuseCapture
ouitrue
, l'écouteur est enregistré en tant qu'écouteur d'événement de capture. SiuseCapture
ouifalse
, il est enregistré comme écouteur d'événement normal.
addEventListener()
Peut être appelé plusieurs fois pour enregistrer plusieurs gestionnaires d'événements pour le même type d'événement sur le même nœud. Notez cependant queDOM
l'ordre dans lequel plusieurs gestionnaires d'événements sont appelés ne peut pas être déterminé. Si une fonction d'écoute d'événements est enregistrée deux fois
sur le même nœud avec les mêmes paramètrestype
et , alors le deuxième enregistrement sera ignoré.useCapture
Si un nouvel écouteur d'événement est enregistré sur un nœud alors qu'un événement sur le nœud est en cours de traitement, le nouvel écouteur d'événement ne sera pas appelé pour cet événement. Lors du clonage d'un nœud
avec la méthode Node.cloneNode() ou la méthode Document.importNode()Document
, les écouteurs d'événements enregistrés pour le nœud d'origine ne sont pas copiés.
Cette méthode est également définie sur les objets Document et Window et fonctionne de manière similaire.
DOMContentLoaded
MDN
Événement déclenché lorsque
HTML
le document est entièrement analysé et que tous les scripts de report ( <script defer src="…"> et <script type="module"> ) ont été téléchargés et exécutés .DOMContentLoaded
Il n'attend pas que d'autres contenus tels que des images, des sous-images et des scripts asynchrones terminent leur chargement.
DOMContentLoaded
N'attend pas le chargement des feuilles de style, mais les scripts différés le font, etDOMContentLoaded
les événements sont mis en file d'attente après les scripts différés. De plus, les scripts non retardés ou asynchrones (tels que<script>
) attendront le chargement des feuilles de style analysées.
L'autre événement de chargement ne peut être utilisé que pour détecter une page entièrement chargée. Une erreur courante consisteDOMContentLoaded
à utiliserload
les événements lorsqu’ils sont plus appropriés.
Cet événement ne peut pas être annulé.
prévenirDefault
w3école
Si l'événement est annulable,
preventDefault()
la méthode annule l'événement, ce qui signifie que l'action par défaut appartenant à l'événement n'aura pas lieu.
Utile lorsque, par exemple :
cliquer sur un bouton de soumission l'empêche de soumettre un formulaire.
Cliquer sur un lien empêche le lien de suivreURL
Tous les événements ne peuvent pas être annulés. Veuillez utiliser l'attribut annulable pour déterminer si l'événement est annulable.
preventDefault()
La méthode n’empêche pas l’événement deDOM
se propager plus loin. Veuillez utiliserstopPropagation()
la méthode pour résoudre.
MDN
Une méthode de l' interface Event
preventDefault()
qui indique à l'agent utilisateur que si l'événement n'est pas explicitement géré, ses actions par défaut ne doivent pas être effectuées comme d'habitude. Cet événement continue de se propager, sauf si l'écouteur d'événement appelle stopPropagation() ou stopImmediatePropagation() pour arrêter la propagation.