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)的更多相关文章

  1. [Effective JavaScript 笔记] 第4条：原始类型优于封闭对象

    js有5种原始值类型:布尔值.数字.字符串.null和undefined. 用typeof检测一下: typeof true; //"boolean" typeof 2; //&q ...

  2. [Effective JavaScript 笔记] 第5条：避免对混合类型使用==运算符

    “1.0e0”=={valueOf:function(){return true;}} 是值是多少? 这两个完全不同的值使用==运算符是相等的.为什么呢?请看<[Effective JavaSc ...

  3. [Effective JavaScript 笔记]第3章：使用函数--个人总结

    前言 这一章把平时会用到,但不会深究的知识点,分开细化地讲解了.里面很多内容在高3等基础内容里,也有很多讲到.但由于本身书籍的篇幅较大,很容易忽视对应的小知识点.这章里的许多小提示都很有帮助,特别是在 ...

  4. [Effective JavaScript 笔记]第27条：使用闭包而不是字符串来封装代码

    函数是一种将代码作为数据结构存储的便利方式,代码之后可以被执行.这使得富有表现力的高阶函数抽象如map和forEach成为可能.它也是js异步I/O方法的核心.与此同时,也可以将代码表示为字符串的形式 ...

  5. [Effective JavaScript 笔记]第28条：不要信赖函数对象的toString方法

    js函数有一个非凡的特性,即将其源代码重现为字符串的能力. (function(x){ return x+1 }).toString();//"function (x){ return x+ ...

  6. 从头开始学JavaScript 笔记(一)——基础中的基础

    原文:从头开始学JavaScript 笔记(一)--基础中的基础 概要:javascript的组成. 各个组成部分的作用 . 一.javascript的组成   javascript   ECMASc ...

  7. 【原】javascript笔记之Array方法forEach&map&filter&some&every&reduce&reduceRight

    做前端有多年了,看过不少技术文章,学了新的技术,但更新迭代快的大前端,庞大的知识库,很多学过就忘记了,特别在项目紧急的条件下,哪怕心中隐隐约约有学过一个方法,但会下意识的使用旧的方法去解决,多年前ES ...

  8. JavaScript笔记目录

    JavaScript笔记目录 一.JavaScript简介 二.在HTML中使用JavaScript ...持续更新中,敬请期待

  9. 蛋糕仙人的javascript笔记

    蛋糕仙人的javascript笔记:https://www.w3cschool.cn/kesyi/kesyi-nqej24rv.html

  10. JavaScript笔记（第一章，第二章）

    JavaScript笔记(第一章,第二章) 第一章: <meta http-equiv="Content-Type" content="text/html; cha ...

随机推荐

  1. Restful 风格

    大家在做Web开发的过程中,method常用的值是get和post. 可事实上,method值还可以是put和delete等等其他值.既然method值如此丰富,那么就可以考虑使用同一个url,但是约 ...

  2. Python3.x运行Python2.x代码报错 syntax error "Missing parentheses in call to 'print'

    #另外一种错误 SyntaxError: Missing parentheses in call to 'print'. Did you mean print( 查看代码,格式如下: print &q ...

  3. innodb 隔离等级

    前一段时间参加了一个国内知名公司的面试,被问及对数据库的了解,自感还不错,可谁知在隔离等级这种基本概念的点翻个船,也不是因为完全不懂,而是本来这里就比较晦涩,加之具体上次看这里的东西时候已经过了一年多 ...

  4. JAVA 基础编程练习题15 【程序 15 排序】

    15 [程序 15 排序] 题目:输入三个整数 x,y,z,请把这三个数由小到大输出. 程序分析:我们想办法把最小的数放到 x 上,先将 x 与 y 进行比较,如果 x>y 则将 x 与 y 的 ...

  5. Python 线程----线程方法,线程事件,线程队列,线程池,GIL锁,协程,Greenlet

    主要内容: 线程的一些其他方法 线程事件 线程队列 线程池 GIL锁 协程 Greenlet Gevent 一. 线程(threading)的一些其他方法 from threading import ...

  6. 小程序接入云通信IM

    小程序接入云通信IM--插件 小程序微信后台搜索AI情报官组件即可获得小程序云通信IM的即时通信能力

  7. 深入理解C语言-深入理解void

    void的字面意思是"无类型",void *则为"无类型指针",void *可以指向任何类型的数据 void含义 void几乎只有注释和限制程序的作用,定义一个 ...

  8. 前端CSS实现图片自适应背景大小

    <body> <div> <!--背景图片--> <div id="web_bg" style="background-imag ...

  9. AD域环境取消密码复杂度和密码使用期限

    本地组策略功能中设置密码永不过期的时候发现功能置灰了,不能设置: 这是因为创建域后默认本地组策略功能会被转移到域组策略管理里面,所以我们可以去组策略管理器里去更改组策略,因为一般本地策略的优先级别最低 ...

  10. VirtualBox本地虚拟机常见问题

    SSH连接本地虚拟机配置 https://www.jianshu.com/p/d59ed9f226d1 开启双向复制https://blog.csdn.net/wcx1293296315/articl ...