一、JavaScript的组成

JavaScript基础分为三个部分：

  • ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。

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

  • BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动

二、事件

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

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

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

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

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

 总结如下：

 事件源：引发后续事件的html标签。

 事件：js已经定义好了（见下图）。

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

示例

 <body>

 <div id="box1"></div>

 <script type="text/javascript">

     // 1、获取事件源

     var div = document.getElementById("box1");

     // 2、绑定事件

     div.onclick = function () {

         // 3、书写事件驱动程序

         alert("我是弹出的内容");

     }

 </script>

 </body>

代码举例

1、获取事件源的方式（DOM节点的获取）

 var div1 = document.getElementById("box1");      //方式一：通过id获取单个标签

 var arr1 = document.getElementsByTagName("div1");     //方式二：通过 标签名 获得 标签数组，所以有s

 var arr2 = document.getElementsByClassName("hehe");  //方式三：通过 类名 获得 标签数组，所以有s

2、绑定事件的方式

 <div id="box1" ></div>

 <script type="text/javascript">

     var div1 = document.getElementById("box1");

     //绑定事件的第一种方式

     div1.onclick = function () {

         alert("我是弹出的内容");

     }

 </script>

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

 <div id="box1" ></div>

 <script type="text/javascript">

     var div1 = document.getElementById("box1");

     //绑定事件的第二种方式

     div1.onclick = fn;   //注意，这里是fn，不是fn()。fn()指的是返回值。

     //单独定义函数

     function fn() {

         alert("我是弹出的内容");

     }

 </script>

方式二：先单独定义函数，再绑定

注意：上方代码的注释。绑定的时候，是写fn，不是写fn()。fn代表的是整个函数，而fn()代表的是返回值。

 <!--行内绑定-->

 <div id="box1" onclick="fn()"></div>

 <script type="text/javascript">

     function fn() {

         alert("我是弹出的内容");

     }

 </script>

方式三：行内绑定

注意：第一行代码，绑定时，是写的"fn()"，不是写的"fn"。因为绑定的这段代码不是写在js代码里的，而是被识别成了字符串。

3、事件驱动程序

我们在上面是拿alert举例，不仅如此，我们还可以操作标签的属性和样式。举例如下：

 <style>

         #box {

             width: 100px;

             height: 100px;

             background-color: pink;

             cursor: pointer;

         }

     </style>

 </head>

 <body>

 <div id="box" ></div>

 <script type="text/javascript">

     var oDiv = document.getElementById("box");

     //点击鼠标时，原本粉色的div变大了，背景变红了

     oDiv.onclick = function () {

         oDiv.style.width = "200px";   //属性值要写引号

         oDiv.style.height = "200px";

         oDiv.style.backgroundColor = "red";   //属性名是backgroundColor，不是background-Color

     }

 </script>

示例

onload事件

当页面加载（文本和图片）完毕的时候，触发onload事件。

 <script type="text/javascript">

     window.onload = function () {

         console.log("测试");  //等页面加载完毕时，打印字符串

     }

 </script>

示例

js的加载是和html同步加载的。因此，如果使用元素在定义元素之前，容易报错。这个时候，onload事件就能派上用场了，我们可以把使用元素的代码放在onload里，就能保证这段代码是最后执行。

建议是：整个页面上所有元素加载完毕在执行js内容。所以，window.onload可以预防使用标签在定义标签之前。

关于DOM的事件操作的更多相关文章

  1. 10-JavaScript之DOM的事件操作

    JavaScript之DOM的事件操作 1.介绍 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等 ...

  2. 前端 ----关于DOM的事件操作

    关于DOM的事件操作   一.JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for ...

  3. python 全栈开发，Day51(常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍)

    昨日内容回顾 1.三种引入方式 1.行内js <div onclick = 'add(3,4)'></div> //声明一个函数 function add(a,b){ } 2. ...

  4. 前端JavaScript(2) --常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍

    昨日内容回顾 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 ...

  5. 10-关于DOM的事件操作

    一.JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象 ...

  6. js --- 关于DOM的事件操作

    一.JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象 ...

  7. js中 关于DOM的事件操作

    一.JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象 ...

  8. JavaScript 关于DOM的事件操作

    一.JavaScript的组成 JavaScript基础分为三个部分: ECMAscript:JavaScript的标准语法.包括变量,表达式,运算符,函数,if语句,for语句等. DOM:文档对象 ...

  9. 节点操作,节点属性的操作及DOM event事件

    ##1. 节点操作 createElement(标签名) 创建一个指定名称的元素 someone.appendChild(new_node) 追加一个子节点(作为最后的子节点) someone.ins ...

随机推荐

  1. 你不可不知的Java引用类型之——Reference源码解析

    定义 Reference是所有引用类型的父类,定义了引用的公共行为和操作. reference指代引用对象本身,referent指代reference引用的对象,下文介绍会以reference,ref ...

  2. 使用免费 mongodb数据库 + 免费node.js服务器搭建小程序接口

    由于微信的小程序只支持不带端口的域名接口,不支持IP地址和接口,所以我们需要映射到80端口并绑定备案过的域名才能被微信小程序访问到.简单点就是接口需要 https 协议才行,找了许久的免费的数据库与n ...

  3. MPP-编码示例

    了解MPP的基本功能后,接下来具体分析编码的代码.首先把编码的代码提取出来,方便以后的使用. 完整的编码代码如下,相比较给出的示例代码,做了一些改动,输入的指令全部去除,将函数入口改为利用OpenCV ...

  4. debian9.6修改系统语言

    (中文改英文) 在VM虚拟机中安装debian9.6(查看版本命令 cat /etc/debian_version ),安装时选择语言为中文:在控制台登录操作时,大部分提示信息显示为乱码,修改中文语言 ...

  5. 求出100以内的素数（java实现）

    j package test1; //2018/11/30 //求100以内的所有素数 public class Main10 { public static void main(String[] a ...

  6. CentOS7.x编译安装zabbix4.0

    编译安装zabbix Zabbix简介 Zabbix 是一个企业级的分布式开源监控方案. Zabbix是一款能够监控各种网络参数以及服务器健康性和完整性的软件.Zabbix使用灵活的通知机制,允许用户 ...

  7. Visual Studio 2019 使用 Live Share

    一.前言 Visual Studio 2019 在今天发布(北京时间)了,这次带来了一个比较有趣的 Live Share 功能,使用它可以进行更好的协作开发.主要功能: 更多资料可看官方介绍: Vis ...

  8. 为什么要花钱学 Python，自学不好吗？

    买了这么多课程,有哪一门是你从头到尾听完,并且能将知识点学以致用的?如果你想成为一名相对优秀的程序员,建议你读完这篇文章,如果愿意可以分享给你的朋友. 2018过去的一年,对大多数互联网人来说,201 ...

  9. easyui datagrid 表头固定（垂直滚动条）、列固定（水平滚动条）

    easyui datagrid 表头固定(垂直滚动条).列固定(水平滚动条),每页显示1000行 最近用多了easyui 之后还是觉得它的功能还是很强大的.它原有的功能就已经能够满足90%以上的界面需 ...

  10. spring boot中配置日志log和热部署

    Java的日志有很多 个人强烈不推荐log4j ,推荐log4j2和logback 在高并发,多线程的环境下log4j1 的性能和log4j2相比可以用junk来形容  对就是junk.log4j2的 ...