Maison > Article > interface Web > Il existe plusieurs façons d'ajouter des événements aux éléments en javascript
Javascript propose trois façons d'ajouter des événements aux éléments, à savoir : 1. Liaison directement dans la balise html ; 2. Liaison après avoir obtenu l'élément dom correspondant dans js ; 3. Utilisation de addEventListener dans js pour implémenter la liaison Certainement.
L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.
1. Lier directement dans la balise html ;
2. Lier après avoir obtenu l'élément dom correspondant dans js
3. Utilisez addEventListener dans js () pour implémenter la liaison ;
Les exemples de code spécifiques sont les suivants :
<!-- 以下为给dom元素绑定js事件的三种方法 --> <!-- 1--html内直接绑定 --> <input type="button" id="btn0" onclick="alert('执行了html绑定的方法')" value="html中绑定"></input> <!-- 2--使用js绑定 --> <input type="button" id="btn1" value="js绑定"> <!-- 3--使用addEventListener绑定 --> <input type="button" id="btn2" value="addEventListener绑定"></input> <script> //********js绑定事件的js代码********* let button1 = document.getElementById("btn1") button1.onclick = function() { console.log("执行了js绑定的事件") } //将覆盖之前绑定的onclick事件 button1.onclick = function() { console.log("执行了js绑定的第二个事件") } //*********addEventListener绑定的js代码********* let button2 = document.getElementById("btn2") //使用addEventListener()可为一个元素绑定多个事件 button2.addEventListener("mouseover", func1, false) button2.addEventListener("click", func2, false) button2.addEventListener("click", func3, false) function func1() { console.log(button2) } function func2() { console.log(Date()) } function func3() { console.log("---------------") } //使用removeEventListener(event,function)移除事件 // button2.removeEventListener("mouseover", func1) </script>
[Apprentissage recommandé : Tutoriel avancé 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!