Maison > interface Web > js tutoriel > Explication détaillée des éléments et événements du DOM

Explication détaillée des éléments et événements du DOM

王林
Libérer: 2020-05-25 17:55:07
avant
2740 Les gens l'ont consulté

Explication détaillée des éléments et événements du DOM

Qu'est-ce qu'un événement ?

Les événements font référence aux actions de l'utilisateur ou à l'état d'un élément. L'élément spécifié écoute les événements pertinents et lie les gestionnaires d'événements.

Qu'est-ce qu'un gestionnaire d'événements ? L'élément

écoute les événements et effectue automatiquement des opérations lorsque l'événement se produit.

1. Classification des fonctions d'événement

1. Événement de souris

onclick //单击
ondblclick //双击
onmouseover //鼠标移入
onmouseout //鼠标移出
onmousemove //鼠标移动
Copier après la connexion

2. Document ou élément chargé :

onload //元素或文档加载完毕
Copier après la connexion

3. Surveillance de l'état du contrôle du formulaire :

onfocus //文本框获取焦点
onblur //文本框失去焦点
oninput //实时监听输入
onchange //两次输入内容发生变化时触发,或元素状态改变时触发
onsubmit //form元素监听,点击提交按钮后触发,通过返回值控制数据是否可以发送给服务器
Copier après la connexion

2. Obtenez les nœuds d'élément

1 Obtenez la liste des nœuds d'élément en fonction du nom de l'étiquette

var elems = document.getElementsByTagName("");
/*参数 : 标签名
返回值 : 节点列表,需要从节点列表中获取具体的元素节点对象,添加相应下标。
*/
Copier après la connexion
<🎜. >2 , Obtenez la liste des nœuds d'éléments en fonction de la valeur de l'attribut de classe

Explication détaillée des éléments et événements du DOM

3 Obtenez la liste des nœuds d'éléments en fonction de la valeur de l'attribut id

<🎜. >

Explication détaillée des éléments et événements du DOM4. Obtenez la liste des éléments en fonction de la valeur de l'attribut name

Explication détaillée des éléments et événements du DOM

3. Méthode de liaison d'événement


1. Méthode en ligne : le nom de l'événement est lié à l'élément en tant qu'attribut d'étiquette

Exemple :

<button onclick="alert()">点击</button>
Copier après la connexion

2. Liaison dynamique : obtenez le nœud de l'élément et ajoutez dynamiquement l'événement

Exemple :

btn.onclick = function (){
};
Copier après la connexion

Tutoriel recommandé :

Tutoriel d'introduction à js

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!

Étiquettes associées:
source:cnblogs.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal