JavaScript笔记(4)
3.JavaScript事件
定义
1.事件是JavaScript事先定义好的
2.JavaScript中事件大多都是以“on……”开头的
3.事件由三要素组成：事件源、事件名、事件响应程序
JavaScript组成
1.ECMAScript：基本语法规则，六种基础数据类型
2.BOM：浏览器对象模型
BOM对象组成:
window(顶级对象):
document(文档对象)——>DOM
history(历史对象)
location(地址栏对象)
navigator(浏览器对象)
screen(屏幕对象)
……
3.DOM：文档对象模型(DOM树/节点树)
当页面被加载时，浏览器会创建一个树形的文档对象模型
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>文档标题</title>
</head>
<body>
<a href="#">我的链接</a>
<h1>我的标题</h1>
</body>
</html>
元素：所有的html标记
节点：
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
1.节点树中的节点彼此拥有层级关系。
2.父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。
3.父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
- 在节点树中，顶端节点被称为根（root）
- 每个节点都有父节点、除了根（它没有父节点）
- 一个节点可拥有任意数量的子
- 同胞是拥有相同父节点的节点
事件组成三要素
事件源：DOM元素(HTML标签)
事件名：JavaScript中事先定义好的
事件响应程序：函数
事件的注册
1.行内注册(一般不用)
2.动态注册
注意：
- 1.事件响应程序要放在事件源之后
- 2.动态注册时，事件响应程序不要带"()"
3.在onload事件中注册：onload 事件会在页面或图像加载完成后立即执行
window.onload = function(){
//注册事件代码
}
JavaScript在Web应用中的3大作用
1.DOM操作
2.控制样式
3.动画效果
JavaScript笔记(4)的更多相关文章
- [Effective JavaScript 笔记] 第4条：原始类型优于封闭对象
js有5种原始值类型:布尔值.数字.字符串.null和undefined. 用typeof检测一下: typeof true; //"boolean" typeof 2; //&q ...
- [Effective JavaScript 笔记] 第5条：避免对混合类型使用==运算符
“1.0e0”=={valueOf:function(){return true;}} 是值是多少? 这两个完全不同的值使用==运算符是相等的.为什么呢?请看<[Effective JavaSc ...
- [Effective JavaScript 笔记]第3章：使用函数--个人总结
前言 这一章把平时会用到,但不会深究的知识点,分开细化地讲解了.里面很多内容在高3等基础内容里,也有很多讲到.但由于本身书籍的篇幅较大,很容易忽视对应的小知识点.这章里的许多小提示都很有帮助,特别是在 ...
- [Effective JavaScript 笔记]第27条：使用闭包而不是字符串来封装代码
函数是一种将代码作为数据结构存储的便利方式,代码之后可以被执行.这使得富有表现力的高阶函数抽象如map和forEach成为可能.它也是js异步I/O方法的核心.与此同时,也可以将代码表示为字符串的形式 ...
- [Effective JavaScript 笔记]第28条：不要信赖函数对象的toString方法
js函数有一个非凡的特性,即将其源代码重现为字符串的能力. (function(x){ return x+1 }).toString();//"function (x){ return x+ ...
- 从头开始学JavaScript 笔记(一)——基础中的基础
原文:从头开始学JavaScript 笔记(一)--基础中的基础 概要:javascript的组成. 各个组成部分的作用 . 一.javascript的组成 javascript ECMASc ...
- 【原】javascript笔记之Array方法forEach&map&filter&some&every&reduce&reduceRight
做前端有多年了,看过不少技术文章,学了新的技术,但更新迭代快的大前端,庞大的知识库,很多学过就忘记了,特别在项目紧急的条件下,哪怕心中隐隐约约有学过一个方法,但会下意识的使用旧的方法去解决,多年前ES ...
- JavaScript笔记目录
JavaScript笔记目录 一.JavaScript简介 二.在HTML中使用JavaScript ...持续更新中,敬请期待
- 蛋糕仙人的javascript笔记
蛋糕仙人的javascript笔记:https://www.w3cschool.cn/kesyi/kesyi-nqej24rv.html
- JavaScript笔记（第一章，第二章）
JavaScript笔记(第一章,第二章) 第一章: <meta http-equiv="Content-Type" content="text/html; cha ...
随机推荐
- 记录一个微信网页授权中不小心踩到的坑（Curl请求返回false）
原文章地址在这里 这个问题是file_get_contents不能获取https的内容引起的.这样的情况下,我们一般会采用curl拓展来模拟请求. 代码demo(当然这是错误的示范): functio ...
- [go]socket编程
socket特性 总是成对出现 是全双工的(同时支持收发)(两个channel绑在一起) 应用程序 - cs模式(客户端开发) - bs模式(web开发) net包api基础 都是客户端主动发数据(c ...
- 升级到Android Studio3.x遇到的问题及解决方案
升级到Android Studio3.x遇到的问题及解决方案 转 https://www.2cto.com/kf/201711/695736.html 升级到Android Studio3.0遇到的问 ...
- [Java复习] 集合框架 Collection
Q1 Collection java的集合以及集合之间的继承关系? 数组和链表的区别? 固定长度,连续内存,不能扩展,随机访问快,插入删除慢.链表相反 List, Set, Map的区别? List, ...
- 如何修改Zend Studio代码字体和大小
Zend Studio的默认字体非常小,看起来很费神,这里教大家怎么修改它的字体和大小. 工具/原料 Zend Studio 方法/步骤 Window-->preferences ...
- 阿里云轻应用服务器配置Ubuntu的JDK、Tmocat、Mysql和Redis
1.与服务器建立连接(达到效果:XShell和Xftp均可连接到服务器) 阿里云管理控制台提供的三种建立服务器连接方式: 使用浏览器发起安全连接(推荐) 客户端使用密钥进行连接 客户端使用账号密码 ...
- LeetCode.1170-比较字符串中最小字符的出现频率(Compare Strings by Frequency of the Smallest Char)
这是小川的第412次更新,第444篇原创 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第263题(顺位题号是1170).在一个非空字符串s上定义一个函数f(s),该函数计算s中最小字 ...
- python 安装第三方模块的各种方法
whl包的安装:pip install **.whl(要有pip 和 下载好的whl文件) tar.gz包的安装:python setup.py install (先将tar.gz解压到指定文件夹,在 ...
- ThinkPHP 使用 SwaggerUi 自动生成 api 文档
1.下载swagger-ui GitHub地址:https://github.com/swagger-api/swagger-ui 2.修改 ThinkPHP 的 build.php ,执行命令生成需 ...
- Angular中ngx-image-cropper图片裁剪的使用
GitHub示例源码地址:https://github.com/luoruiemail/ngx-image-cropper 下载下来之后,执行yarn install安装相关node_modules包 ...