一、事件

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.绑定事件的第三种方式

首页上一页 1 2 3 下一页尾页 1/3/3
【大中小】【打印】【繁体】【投稿】【收藏】【推荐】【举报】【评论】【关闭】【返回顶部】

上一篇：python学习-62 类属性的增删该 ..	下一篇：08-函数