设为首页 加入收藏

TOP

10-关于DOM的事件操作(一)
2019-09-06 00:28:34 】 浏览:47
Tags:10- 关于 DOM 事件 操作

DOM:文档对象模型,操作网页上元素的API。比如让盒子移动、变色、轮播图等。

一、事件                                                  

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

事件的三要素                                                               

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

事件源:引发后续事件的HTML标签。

事件:JS已经定义好了。

事件驱动程序:对样式和HTML的操作。也就是DOM。

书写步骤:

  1.获取事件源:document.getElementById(“box”);

  2.绑定事件:事件源box.事件onclick = function(){事件驱动程序};

  3.书写事件驱动程序:关于DOM的操作。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 <div id="box">点我</div>
10 
11 <script>
12     //1.获取事件源
13     var div = document.getElementById('box');
14     //2.绑定事件
15     div.onclick = function () {
16         //3.书写事件驱动程序
17         alert('我是弹出的内容'); 
18     }
19 </script>
20     
21 </body>
22 </html>

常见事件如下:

 二、事件三步走详细介绍                         

1.获取事件源的方式(DOM节点的获取)                      

方式一:通过id获取单个标签

var div1 = document.getElementById('box');

 

方式二:通过标签名获取所有标签数组

var arr = document.getElementsByTagName('div');

 

方式三:通过类名获取所有标签数组

var arr = document.getElementsByClassName('haha');

 

2.绑定事件的方式                                                          

方式一:直接绑定匿名函数

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 <div id="box">点我</div>
10 
11 <script>
12     //1.获取事件源
13     var div = document.getElementById('box');
14     //2.绑定事件的第一种方式
15     div.onclick = function () {
16         //3.书写事件驱动程序
17         alert('我是弹出的内容'); 
18     }
19 </script>
20     
21 </body>
22 </html>

 

方式二:先单独定义函数,再绑定

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 <div id="box">点我</div>
10 
11 <script>
12     //1.获取事件源
13     var div = document.getElementById('box');
14     //2.绑定事件的第二种方式
15     div.onclick = fn;
16     function fn() {
17         //3.书写事件驱动程序
18         alert('我是弹出的内容'); 
19     }
20 </script>
21     
22 </body>
23 </html>

 

注意:绑定事件的时候,写的是fn,而不是fn(),fn代表的是整个函数,而fn()代表的是返回值。

方式三:行内绑定

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6 
 7 </head>
 8 <body>
 9 <div id="box" onclick="fn()">点我</div>
10 
11 <script>
12     //1.获取事件源
13     var div = document.getElementById('box');
14     //2.绑定事件的第三种方式
  
		
10-关于DOM的事件操作(一) https://www.cppentry.com/bencandy.php?fid=77&id=250278

首页 上一页 1 2 3 下一页 尾页 1/3/3
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇python学习-62 类属性的增 删 该 .. 下一篇08-函数