一、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压缩指定目录下的所有文件和文件夹的代码

    将代码过程较好的代码段备份一下,下边资料是关于java压缩指定目录下的所有文件和文件夹的代码,希望对码农有帮助. String sourceDir="E:\test";int pa ...

  2. SQL Server 事务日志文件已满,收缩日志文件(9002)

    错误如下图: 1.数据库 → 属性 → 选项 → 恢复模式 → 选择‘简单’:如下图: 2.任务 → 收缩 → 文件类型‘文件’ → 收缩模式‘在释放未使用的空间前重新组织页’,将文件收缩到K,大小填 ...

  3. 多态练习题(通过UML建模语言来实现饲养员喂养动物)

    项目需求如下图: package com.Summer_0428.cn; /** * @author Summer * 1.构建一个食物抽象类,Bone和Fish分别为其实现类,通过super传参. ...

  4. CentOS7.x安装MySQL5.7.25

    mysql 5.7下载地址 社区版下载地址:https://dev.mysql.com/downloads/mysql/ 可能会有变动 找到5.7版本, 注:源码安装需要用到下面的包,可以先忽略,我安 ...

  5. 【原创】从Rest到Graphql

    引言 开局两张图,内容全靠编- ok,如图所示,我在去年曾经写过一篇文章<闲侃前后端分离的必要性>.嗯,我知道肯定很多人没看过.所以我做一个总结,其实啰里八嗦了一篇文章,就是想说一下现在的 ...

  6. 特殊需求:EF 6.x如何比较TimeSpan格式的字符串?EF Core实现方式是否和EF 6.x等同?

    前言 我们知道C#中的TimeSpan对应SQL Server数据库中的Time类型,但是如果因为特殊需求数据库存储的不是Time类型,而是作为字符串,那么我们如何在查询数据时对数据库所存储的字符串类 ...

  7. .NET和PHP程序员如何通过技术快速变现

    刚开始写博客不足之处望大家多多指点,少一些质疑多一些帮助,我们就能成为朋友. 上一篇:<.NET程序员我是如何通过一个产品在2年内买车买房>有很多同为程序员的小伙伴们给我留言,从整体的留言 ...

  8. jeecg入门操作—模板配置(录入界面)

    点击online表单的模板配置,进入模板设计列表页面,点击创建模板 点击创建模板 点击激活 设计完成,点击激活(表单模板可以多个,激活状态只能有一个) 激活后,重新加入功能测试,点击添加页面,效果如下 ...

  9. Angular 基本内置服务和筛选器

    AngularJS中的内置服务(共30多个): $http 发送http请求,主要用于进行异步数据请求的功能实现,这个服务主要封装了XMLHttpRequest对象和JSONP数据访问模式来完成远程请 ...

  10. Appium 客户端类库

    Appium 支持以下语言的客户端类库: 语言 Ruby Python Java JavaScript PHP C# Objective-C 锁定注意,一些方法类似 endTestCoverage() ...