码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript中的事件

时间:2018-09-25 23:27:46      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:color   event   head   view   添加内容   dev   initial   处理   javascrip   

事件(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中的事件

标签:color   event   head   view   添加内容   dev   initial   处理   javascrip   

原文地址:https://www.cnblogs.com/liyangfei/p/9704171.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!