JavaScript中的事件
Posted liyangfei
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript中的事件相关的知识，希望对你有一定的参考价值。
事件（Events）:事件时浏览器发生的动作，例如点击按钮，加载页面或播放视频，我们可以调用代码来响应。
事件分为两个部分：
1.事件监听器：侦听事件是否发生的构造方法。
2.事件处理器：响应事件触发而运行的代码。
实例：
点击按钮，盒子的背景颜色换为绿色，添加内容
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 .bgc{ 10 height: 200px; 11 width: 200px; 12 border: 1px solid #000; 13 } 14 </style> 15 </head> 16 <body> 17 <div class="bgc"></div> 18 <button id="change">change color</button> 19 <!-- 下面的JS代码可以称为一个事件 --> 20 <script> 21 // 事件处理器，处理这个事件 22 function changeColor() { 23 var color = document.querySelector(‘.bgc‘); 24 color.textContent = ‘hello‘; 25 color.style.backgroundColor = ‘green‘; 26 } 27 // 事件监听器，监听这个事件是否被触发 28 change.addEventListener(‘click‘, changeColor); 29 </script> 30 </body> 31 </html>
监听事件的类型（在本例中为“点击”），和当事件发生时我们想要执行的代码（在本例中为changeColor()函数）。注意，当函数作为事件监听方法的参数时，函数名后不应带括号。
以上是关于JavaScript中的事件的主要内容，如果未能解决你的问题，请参考以下文章