10-关于DOM的事件操作

一、JavaScript的组成

JavaScript基础分为三个部分：

ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。
BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。

二、事件

JS是以事件驱动为核心的一门语言。

事件的三要素

事件的三要素：事件源、事件、事件驱动程序。

比如，我用手去按开关，灯亮了。这件事情里，事件源是：手。事件是：按开关。事件驱动程序是：灯的开和关。

再比如，网页上弹出一个广告，我点击右上角的X，广告就关闭了。这件事情里，事件源是：X。事件是：onclick。事件驱动程序是：广告关闭了。

于是我们可以总结出：谁引发的后续事件，谁就是事件源。

总结如下：

事件源：引发后续事件的html标签。
事件：js已经定义好了（见下图）。
事件驱动程序：对样式和html的操作。也就是DOM。

代码书写步骤如下：（重要）

（1）获取事件源：document.getElementById(“box”); //类似与ios语言的 UIButton *adBtn = [UIButton buttonWithType:UIButtonTypeCustom];
（2）绑定事件：事件源box.事件onclick = function(){ 事件驱动程序 };
（3）书写事件驱动程序：关于DOM的操作

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         #active{
 8             background-color: greenyellow;
 9             width: 100px;
10             height:100px;
11         }
12     </style>
13 </head>
14 <body>
15     <div id='active'></div>
16     <script type="text/javascript">
17         // 获取dom
18         var odiv = document.getElementById('active');
19         //绑定事件
20         var isgreen = true;  //本次目的是点击变色且变宽然后隐藏掉，再单击变回来，故需要一个判断条件
21         odiv.onclick = function(){
22             // 驱动程序放在匿名函数里面,执行操作，要实现的效果
23             // 所有的带-的，改变标签的样式在js里都用驼峰体写，如background-color就为backgroundColor
24             if (isgreen) {
25                 odiv.style.backgroundColor = 'red';
26                 odiv.style.width = '200px';
27                 odiv.style.display = 'none';
28                 isgreen = false;    //记得变量有提升 var isgreen；
29             }else {
30                 odiv.style.backgroundColor = 'greenyellow';
31                 isgreen = true;
32             }
33         };
34     </script>
35 </body>
36 </html>

代码演练

一、JavaScript的组成

JavaScript基础分为三个部分：

ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。
BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。

二、事件

JS是以事件驱动为核心的一门语言。

事件的三要素

事件的三要素：事件源、事件、事件驱动程序。

比如，我用手去按开关，灯亮了。这件事情里，事件源是：手。事件是：按开关。事件驱动程序是：灯的开和关。

再比如，网页上弹出一个广告，我点击右上角的X，广告就关闭了。这件事情里，事件源是：X。事件是：onclick。事件驱动程序是：广告关闭了。

于是我们可以总结出：谁引发的后续事件，谁就是事件源。

总结如下：

事件源：引发后续事件的html标签。
事件：js已经定义好了（见下图）。
事件驱动程序：对样式和html的操作。也就是DOM。

代码书写步骤如下：（重要）

（1）获取事件源：document.getElementById(“box”); //类似与ios语言的 UIButton *adBtn = [UIButton buttonWithType:UIButtonTypeCustom];
（2）绑定事件：事件源box.事件onclick = function(){ 事件驱动程序 };
（3）书写事件驱动程序：关于DOM的操作

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         #active{
 8             background-color: greenyellow;
 9             width: 100px;
10             height:100px;
11         }
12     </style>
13 </head>
14 <body>
15     <div id='active'></div>
16     <script type="text/javascript">
17         // 获取dom
18         var odiv = document.getElementById('active');
19         //绑定事件
20         var isgreen = true;  //本次目的是点击变色且变宽然后隐藏掉，再单击变回来，故需要一个判断条件
21         odiv.onclick = function(){
22             // 驱动程序放在匿名函数里面,执行操作，要实现的效果
23             // 所有的带-的，改变标签的样式在js里都用驼峰体写，如background-color就为backgroundColor
24             if (isgreen) {
25                 odiv.style.backgroundColor = 'red';
26                 odiv.style.width = '200px';
27                 odiv.style.display = 'none';
28                 isgreen = false;    //记得变量有提升 var isgreen；
29             }else {
30                 odiv.style.backgroundColor = 'greenyellow';
31                 isgreen = true;
32             }
33         };
34     </script>
35 </body>
36 </html>

代码演练

前端-js基础语法-DOM 10-关于DOM的事件操作

10-关于DOM的事件操作

一、JavaScript的组成

二、事件

事件的三要素

一、JavaScript的组成

二、事件

事件的三要素

猜你喜欢