JS整理

E小姐连环coding事件
160 阅读8分钟
数据类型名称类型
String字符串基本数据类型
Boolean布尔值基本数据类型
Number数值基本数据类型
Null空值基本数据类型
Undefined未定义基本数据类型
Object对象引用数据类型
  • 数据类型就是字面量类型，一共有6种数据类型

字面量 —— 都是一些不可改变的值
比如1 2 3 4 5 都是可以直接使用的，但是我们一般都不会直接使用字面量

  • 使用字面量来创建一个对象 var obj = {name:"lena"};//不使用字面量方式：var obj=new object（）； 变量 —— 用来保存字面量，而且变量的值是可以任意改变的，所以在开发中都是通过变量去保存一个字面量，而很少直接使用字面量 (声明变量：在js中使用var关键字来声明一个变量)
    标识符 —— 在JS中所有的可以由我们自主命名的都可以称为是标识符
    例如：变量名、函数名、属性名都属于标识符
命名一个标识符时需要遵守如下的规则：  
1. 标识符中可以含有字母、数字、_、$  
2. 标识符不能以数字开头  
3. 标识符不能是ES中的关键字或保留字  
4. 标识符一般都采用驼峰命名法：首字母小写，每个单词的开头字母大写，其余字母小写  
5. JS底层保存标识符时实际上是采用的Unicode编码，所以理论上讲，所有的utf-8中含有的内容都可以作为标识符  
以下代码是可以运行的，但不要这么用
var 锄禾日当午 = 789；
console.log(锄禾日当午)
  • typeof NAN //number
  • null类型只有一个值，就是null（空值）
  • typeof null //object null这个值专门用来表示一个为空的对象，使用typeof检查一个null值时，会返回object
  • undefined类型的值也只有一个，就是undefined（未定义），当声明一个变量，但是并不给变量赋值时，它的值就是undefined
  • 使用typeof检查一个undefined时也会返回undefined
var b = undifined
console.log(typeof b) //结果也是undifined

强制类型转换

- 转换为string
- `x.toString()` 转换为字符串，该方法不会影响到原变量，它会将转换的结果返回，null和undefined没有toString方法，用了会报错  
- `String(x)`函数，将被转换的数据作为参数传递给函数，对于Number和Boolean实际上就是调用的toString()方法，而null和undefined调用String方法会将null直接转换为“null”，将undefined直接转换为“undefined”

- 转换为number
- `Number()`函数，如果是纯数字则直接将其转换为数字，如果是非数字则转换为NAN，如果字符串为空或全是空格的字符，则全部转换为0，如果是true转为1，false转为0，如果是null则转为0，undefined转为NAN.
- parseInt（x），专门用来对付字符串，把字符串转换为Number，parseInt(“123px”)->123，这种方法可以将一个字符串中的有效整数内容取出来.
- parseFloat（）作用和parseInt（）相似，不同的是他可以获得有效的小数部分.
- 如果对于非String使用parseInt（）和parseFloat（），会将其先转换为字符串再转.
- 可以在parseInt（）中传递第二个参数用来指定数字的进制.

- 转换为boolean
- `Boolean(x)`函数，0、NAN、null、undefined、“”(空字符串)转为false，其余都转为true

运算符

  • 运算符可以对一个值或者多个值进行运算

  • 任何值和字符串做加法运算，都会先转换为字符串，然后再和字符串做拼串操作

  • Number和字符串/undifined做减法运算，会将字符串转换为Number，如果是null则转为0，undefined转为NAN.

  • 对于非布尔值进行与或非运算时，会将其转换为布尔值，再进行运算

  • 5&&6 如果两个值都为true，则返回后边的 0&&2 如果有一个false则返回false，两个false则返回第一个false

  • 6｜｜5 如果两个值都为true，则返回第一个true，两个都是false，返回第二个

  • undefined 衍生自null

  • console.log(undefined == null)//true

  • NaN不等于任何值，包括它本身

与用户交互的 3 个浏览器的特定函数：

  • alert

    显示信息。

  • prompt

    显示信息要求用户输入文本。点击确定返回文本，点击取消或按下 Esc 键返回 null。

  • confirm

    显示信息等待用户点击确定或取消。点击确定返回 true，点击取消或按下 Esc 键返回 false。

  • 使用new关键字调用的函数，是构造函数constructor

  • 构造函数是专门用来创建对象的 var obj = new Object()

  • in运算符 可以检查一个对象中是否含有指定的属性 console.log(x in obj)

  • 构造函数的执行流程： 1.立刻创建一个新的对象 2.将新建的对象设置为函数中的this 3.逐行执行函数中的代码 4.将新建的对象作为返回值返回

  • 构造函数也成为类，把通过构造函数创建的对象叫做类的实例

  • 使用instanceof可以检查一个对象是不是一个类的实例，如果是返回true，不是返回false per instanceof Person

  • 所有对象都是Object的后代，所以任何对象和Object做instanceof都会返回true

  • 原型对象相当于一个公共区域，所有同一个类的实例都可以访问到这个原型对象，我们可以将对象中共有的内容，统一设置到原型对象中。

image.png

  • 使用in检查对象是否含有某个属性时，如果对象没有但是原型有也会返回true

  • 使用对象的hasOwnProperty（）来检查对象自身中是否含有该属性

  • 原型对象寻找属性时，会现在自身中寻找，如果没有则去自己的原型对象中找，直到找到Object对象的原型，Object对象的原型没有原型，会返回null

  • 当我们在页面中直接打印一个对象时，实际上是输出对象的toString()方法的返回值

  • 当一个对象没有任何的变量或属性对它进行引用，此时我们永远无法操作该对象，这就是一个垃圾，这种垃圾多了会占用大量的内存空间，导致程序运行变量应该进行垃圾回收。

  • js有自动垃圾回收机制，会自动将这些垃圾从内存中销毁，我们需要做的就是将不需要使用的对象赋值为null。

  • 数组

  • 创建数组

var arr = new Array();
var arr = [];//使用字面量来创建数组
  • 数组中的元素可以是任意的数据类型，可以放数组（二维数组），也可以是对象也可以放函数（函数也是对象）
  • 数组的方法
  1. push("孙悟空","猪八戒","唐僧")向数组的末尾添加一个或多个元素，并返回数组的新的长度
  2. pop()该方法删除数组最后一个元素，并返回该元素
  3. unshift()向数组开头添加一个或多个元素，并返回新的数组长度
  4. shift()该方法删除数组第一个元素，并返回该元素
  • forEach()遍历数组
  • 需要一个函数作为参数
arr.forEach(function(value，index, obj){
    //会自动调用执行接下来的代码
    //这种由我们创建但是不由我们调用的函数，我们称为回调函数
    //arr有几个，函数就会执行几次
    //浏览器会在回调函数中传递三个参数
    //第一个参数，就是当前正在遍历的元素
    //第二个参数是索引
    //第三个参数是数组对象
    console.log(“hello”+ value)
})
  • slice()
  • 可以用来从数组提取指定元素并返回，不会改变原数组
  • 第一个参数截取开始的位置的索引,包括开始索引
  • 第二个参数截取结束的位置的索引，不包含结束索引
  • 左闭右开
  • 可以省略第二个参数，此时会截取从开始索引往后的所有元素
  • 索引可以传递一个负值，会从后往前计算，-1代表倒数第一个，-2代表倒数第二个
var arr = [1,2,3,4,5,6]
var result = arr.slice(0,2)
var result1 = arr.slice(2)
var result2 = arr.slice(0，-1)
console.log(arr)//[1,2,3,4,5,6]
console.log(result)//[1,2]
console.log(result1)//[3，4，5，6]
console.log(result2)//[1,2,3,4,5]
  • splice（）
  • 用于删除数组中的指定元素，原数组会被改变，并将被删除的元素返回
  • 第一个参数截取开始的位置的索引
  • 第二个参数表示删除的数量
  • 第三个参数及以后 可以添加新的元素，这些元素会插入到开始位置索引的前面
var arr = [1,2,3,4,5,6]
var result = arr.splice(0,2)
console.log(arr)//[3，4，5，6]
console.log(result)//[1，2]

var arr = [1,2,3,4,5,6]
var result1 = arr.slice(1,2,"7")
console.log(arr)//[1, 7，4，5，6]
console.log(result)//[2, 3]
  • 数组去重
var arr = [1,2,3,2,1,3,4,2,5]
for(var i = 0; i < arr.length; i++){
    for(var j = i+1; j<arr.length;j++){
        while(arr[i] == arr[j]){//删除j后后面的元素会补位，若果后面的元素也重复，此时j++,这就是一个漏网之鱼
            arr.splice(j,1);
        }
}
console.log(arr)//[1,2,3,4,5]
  • concat()可以连接两个或者多个数组，并将新的数组返回，不会对原数组产生影响
  • join()可以讲数组转换为一个字符串（默认用逗号连接，可以传入参数）不会对原数组产生影响，join("")代表不使用连接符号
  • reverse()用来反转数组，会直接改变原数组
  • sort()可以对数组元素进行排序，默认unicode编码由小到大排序，所以可能会得到错误的结果（11排在2前面），此时我们可以自己制定排序规则，可以在sort中添加回调函数，有两个参数a,b，浏览器会分别使用数组中的元素作为实参去调用回调函数，a一定在b前边。
  • 浏览器会根据回调元素的返回值来决定元素的排序
  • 如果返回一个大于0的值则元素会交换位置
arr.sort(function(a,b){
    if(a>b){
         return 1;//a大于b则交换位置，递增排序
    } else if(a<b){
          return -1；//不交换
    } else {
          return 0；
    }
})

arr.sort(function(a,b){
         return a-b;//a大于b时返回值大于0，交换位置，递增排序，升序
         return b-a;//b大于a时返回值大于0，交换位置，递减排序，降序
})

call()和apply()

  • 这两个方法都是函数对象的方法需要通过函数对象来调用
  • 通过两个方法可以直接调用函数，并且可以通过第一个实参来指定函数中this
  • 不同的是call是直接传递函数的实参而apply需要将实参封装到一个数组中传递

arguments

  • arguments和this类似，都是函数中的隐含的参数
  • arguments是一个类数组元素，它用来封装函数执行过程中的实参，所以即使不定义形参，也可以通过arguments来使用实参
  • arguments.length用来获取实参的长度
  • 可以不添加形参，用arguments[0]也可以访问参数
  • arguments中有一个属性callee表示当前执行的函数对象

this

  • this是函数的上下文对象，根据函数的调用方式不同会执向不同的对象 1.以函数的形式调用时，this是window 2.以方法的形式调用时，this是调用方法的对象 3.以构造函数的形式调用时，this是新建的那个对象 4.使用call和apply调用时，this是指定的那个对象 5.在全局作用域中this代表window

包装类

  • 在JS中为我们提供了三个包装类：String() Boolean() Number()
  • 通过这三个包装类可以创建基本数据类型的对象
  • 例子：
var num = new Number(2);
var str = new String("hello");
var bool = new Boolean(true);
- 但是在实际应用中千万不要这么干。
- 当我们去操作一个基本数据类型的属性和方法时，
- 解析器会临时将其转换为对应的包装类(会自动转换为对象)
- 然后再去操作属性和方法
- 操作完成以后再将这个临时对象进行销毁（会转为基本数据类型）。

字符串的相关的方法 字符串底层是以字符数组的形式保存的，所以会有一些数组的方法 length 获取字符串的长度
charAt() 根据索引获取指定的字符
charCodeAt() 根据索引获取指定的字符编码
String.fromCharCode() 根据字符编码获取字符
concat（“niihao”） 跟+号一个作用，连接字符串 indexOf() lastIndexOf()

  • 从一个字符串中检索指定内容
  • 需要一个字符串作为参数，这个字符串就是要检索的内容，
  • 如果找到该内容，则会返回其第一次出现的索引，如果没有找到则返回-1。
  • 可以指定一个第二个参数，来表示开始查找的位置
  • indexOf()是从前向后找
  • lastIndexOf()是从后向前找 slice()
  • 可以从一个字符串中截取指定的内容，并将截取到内容返回，不会影响原变量
  • 参数： 第一个：截取开始的位置（包括开始） 第二个：截取结束的位置（不包括结束）
  • 可以省略第二个参数，如果省略则一直截取到最后
  • 可以传负数，如果是负数则从后往前数 substr()
  • 和slice()基本一致，不同的是它第二个参数不是索引，而是截取的数量 substring()
  • 和slice()基本一致，不同的是它不能接受负值作为参数
  • 如果设置一个负值，则会自动修正为0
  • substring()中如果第二个参数小于第一个，自动调整位置 toLowerCase()
  • 将字符串转换为小写并返回，不会影响原字符串 toUpperCase()
  • 将字符串转换为大写并返回，不会影响原字符串 split()
  • 可以根据指定内容将一个字符串拆分为一个数组
  • 参数：
  • 需要一个字符串作为参数，将会根据字符串去拆分数组
  • 可以接收一个正则表达式，此时会根据正则表达式去拆分数组 match()
  • 可以将字符串中和正则表达式匹配的内容提取出来
  • 参数：
  • 正则表达式，可以根据该正则表达式将字符串中符合要求的内容提取出来,并且封装到一个数组中返回 replace()
  • 可以将字符串中指定内容替换为新的内容
  • 参数：
  • 第一个：被替换的内容，可以是一个正则表达式
  • 第二个：替换的新内容 search()
  • 可以根据正则表达式去字符串中查找指定的内容
  • 参数： -正则表达式，将会根据该表达式查询内容，并且将第一个匹配到的内容的索引返回，如果没有匹配到任何内容，则返回-1。 正则表达式
  • 正则用来定义一些字符串的规则，程序可以根据这些规则来判断一个字符串是否符合规则，也可以将一个字符串中符合规则的内容提取出来。
  • 创建正则表达式
  • var reg = new RegExp("正则表达式","匹配模式");
  • var reg = /正则表达式/匹配模式
  • 语法：
  • 匹配模式：i（ignore）:忽略大小写,g:全局匹配模式
  • 设置匹配模式时，可以都不设置，也可以设置1个，也可以全设置，设置时没有顺序要求
		正则语法		
			| 或
			[] 或
			[^ ] 除了
			[a-z] 小写字母
			[A-Z] 大写字母
			[A-z] 任意字母
			[0-9] 任意数字

- 方法：
	test()
		- 可以用来检查一个字符串是否符合正则表达式
		- 如果符合返回true，否则返回false

Date

  • 日期的对象，在JS中通过Date对象来表示一个时间
  • 创建对象
  • 创建一个当前的时间对象,不传参数默认为当前代码执行的时间
var d = new Date();
  • 创建一个指定的时间对象，传递一个字符串
var d = new Date("月/日/年 时:分:秒");
var d = new Date("12/03/2022");
var d = new Date("12/03/2022 11:12:32");
  • 方法：
		getDate()
			- 当前日期对象是几日（1-31）
			
		getDay() 
			- 返回当前日期对象时周几（0-6）
				- 0 周日
				- 1 周一 。。。
				
		getMonth()
			- 返回当前日期对象的月份（0-11）
			- 0 一月 1 二月 。。。
		getFullYear() 从 Date 对象以四位数字返回年份。 
		
		getHours() 返回 Date 对象的小时 (0 ~ 23)。 
		getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。 
		getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。 
		getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。 
		
		getTime()
			- 返回当前日期对象的时间戳
			- 时间戳，指的是从1970年月1日 0时0分0秒，到现在时间的**毫秒数**,计算机底层保存时间都是以时间戳的形式保存的。
				
		Date.now()
			- 可以获取当前代码执行时的时间戳

Math

  • Math不是一个构造函数，它属于一个工具类，它不需要我们创建对象，它里边封装了属性运算相关的常量和方法,我们可以直接使用它来进行数学运算相关的操作

  • 方法：

		Math.PI
			- 常量，圆周率
		Math.abs()
			- 绝对值运算
		Math.ceil()
			- 向上取整
		Math.floor()
			- 向下取整
		Math.round()
			- 四舍五入取整
		Math.random()	
			- 生成一个0-1之间的随机数
			- 生成一个x-y之间的随机数
				Math.round(Math.random()*(y-x)+x);
		Math.pow(x,y)
			- 求x的y次幂
		Math.sqrt()
			- 对一个数进行开方
		Math.max()
			- 求多个数中最大值
		Math.min()
			- 求多个数中的最小值

1.正则表达式 - 语法： - 量词 {n} 正好n次 {m,n} m-n次 {m,} 至少m次 + 至少1次 {1,} ? 0次或1次 {0,1} * 0次或多次 {0,}

	- 转义字符
		\ 在正则表达式中使用\作为转义字符
		\. 表示.
		\\ 表示\
		. 表示任意字符
		\w
			- 相当于[A-z0-9_]
		\W
			- 相当于[^A-z0-9_]
		\d
			- 任意数字
		\D
			- 除了数字
		\s
			- 空格
		\S
			- 除了空格
		\b
			- 单词边界
		\B
			- 除了单词边界
	^ 表示开始
	$ 表示结束

DOM

  • Document Object Model
  • 文档对象模型，通过DOM可以来任意来修改网页中各个内容
  • 文档
  • 文档指的是网页，一个网页就是一个文档
  • 对象
  • 对象指将网页中的每一个节点都转换为对象,转换完对象以后，就可以以一种纯面向对象的形式来操作网页了
  • 模型
  • 模型用来表示节点和节点之间的关系，方便操作页面
  • 节点（Node）
  • 节点是构成网页的最基本的单元，网页中的每一个部分都可以称为是一个节点
  • 虽然都是节点，但是节点的类型却是不同的
  • 常用的节点
- 文档节点 （Document），代表整个网页
- 元素节点（Element），代表网页中的标签
- 属性节点（Attribute），代表标签中的属性
- 文本节点（Text），代表网页中的文本内容
  • DOM操作
  • DOM查询
  • 在网页中浏览器已经为我们提供了document对象,它代表的是整个网页，它是window对象的属性，可以在页面中直接使用。
  • document查询方法：
  • 根据元素的id属性查询一个元素节点对象：
document.getElementById("id属性值");
  • 根据元素的name属性值查询一组元素节点对象:
document.getElementsByName("name属性值");
  • 根据标签名来查询一组元素节点对象：
document.getElementsByTagName("标签名");
  • 元素的属性：
  • 读取元素的属性：语法：元素.属性名
例子：ele.name  
  ele.id  
  ele.value 
  ele.className（不能直接用class）
  • 修改元素的属性： 语法：元素.属性名 = 属性值
  • innerHTML
  • 使用该属性可以获取或设置元素内部的HTML代码
  • 事件（Event）
  • 事件指的是用户和浏览器之间的交互行为。比如：点击按钮、关闭窗口、鼠标移动。。。
  • 我们可以为事件来绑定回调函数来响应事件。
  • 绑定事件的方式： 1.可以在标签的事件属性中设置相应的JS代码 例子：按钮 2.可以通过为对象的指定事件属性设置回调函数的形式来处理事件 例子：按钮
  • 文档的加载
  • 浏览器在加载一个页面时，是按照自上向下的顺序加载的，加载一行执行一行。
  • 如果将js代码编写到页面的上边，当代码执行时，页面中的DOM对象还没有加载， 此时将会无法正常获取到DOM对象，导致DOM操作失败。
  • 解决方式一：
  • 可以将js代码编写到body的下边
<body>
	<button id="btn">按钮</button>
	<script>
	var btn = document.getElementById("btn");
	btn.onclick = function(){};
	</script>
</body>

解决方式二：

  • 将js代码编写到window.onload = function(){}中
  • window.onload 对应的回调函数会在整个页面加载完毕以后才执行，所以可以确保代码执行时，DOM对象已经加载完毕了
<script>
window.onload = function(){
    var btn = document.getElementById("btn");
    btn.onclick = function(){};
};			
</script>

DOM查询

    - 通过具体的元素节点来查询
	- 元素.getElementsByTagName()
		- 通过标签名查询当前元素的指定后代元素
		
	- 元素.childNodes
		- 获取当前元素的所有子节点
		- 会获取到空白的文本子节点
	
	- 元素.children
		- 获取当前元素的所有子元素
	
	- 元素.firstChild
		- 获取当前元素的第一个子节点
	
	- 元素.lastChild
		- 获取当前元素的最后一个子节点
	
	- 元素.parentNode
		- 获取当前元素的父元素
	
	- 元素.previousSibling
		- 获取当前元素的前一个兄弟节点
	
	- 元素.nextSibling
		- 获取当前元素的后一个兄弟节点
		
innerHTML和innerText
	- 这两个属性并没有在DOM标准定义，但是大部分浏览器都支持这两个属性
	- 两个属性作用类似，都可以获取到标签内部的内容，不同是innerHTML会获取到html标签，而innerText会自动去除标签
	- 如果使用这两个属性来设置标签内部的内容时，没有任何区别的	
	
读取标签内部的文本内容
	<h1>h1中的文本内容</h1>
	元素.firstChild.nodeValue
	
- document对象的其他的属性和方法
	document.all
		- 获取页面中的所有元素，相当于document.getElementsByTagName("*");
		
	document.documentElement
		- 获取页面中html根元素
		
	document.body
		- 获取页面中的body元素
		
	document.getElementsByClassName()
		- 根据元素的class属性值查询一组元素节点对象
		- 这个方法不支持IE8及以下的浏览器
		
	document.querySelector()
		- 根据CSS选择器去页面中查询一个元素
		- 如果匹配到的元素有多个，则它会返回查询到的第一个元素	
		
	document.querySelectorAll()	
		- 根据CSS选择器去页面中查询一组元素
		- 会将匹配到所有元素封装到一个数组中返回，即使只匹配到一个

DOM修改

document.createElement()
	- 可以根据标签名创建一个元素节点对象
	
document.createTextNode()
	- 可以根据文本内容创建一个文本节点对象
	
父节点.appendChild(子节点)
	- 向父节点中添加指定的子节点
	
父节点.insertBefore(新节点,旧节点)
	- 将一个新的节点插入到旧节点的前边
	
父节点.replaceChild(新节点,旧节点)
	- 使用一个新的节点去替换旧节点
	
父节点.removeChild(子节点)
	- 删除指定的子节点
	- 推荐方式：子节点.parentNode.removeChild(子节点)

1.DOM对CSS的操作

    - 读取和修改内联样式
    - 使用style属性来操作元素的内联样式
    - 读取内联样式：
    语法：元素.style.样式名
    - 例子：
    元素.style.width
    元素.style.height
    - 注意：如果样式名中带有-，则需要将样式名修改为驼峰命名法
            将-去掉，然后-后的字母改大写
    - 比如：background-color --> backgroundColor
                    border-width ---> borderWidth
					
    - 修改内联样式：
            语法：元素.style.样式名 = 样式值
            - 通过style修改的样式都是内联样式，由于内联样式的优先级比较高，所以我们通过JS来修改的样式，往往会立即生效，但是如果样式中设置了!important，则内联样式将不会生效。
			
    - 读取元素的当前样式
            - 正常浏览器
                - 使用getComputedStyle()
                - 这个方法是window对象的方法，可以返回一个对象，这个对象中保存着当前元素生效样式
                - 参数：
                        1.要获取样式的元素
                        2.可以传递一个伪元素，一般传null
                - 例子：
                        获取元素的宽度
                                getComputedStyle(box , null)["width"];
                - 通过该方法读取到样式都是只读的不能修改

        - IE8
                - 使用currentStyle
                - 语法：
                        元素.currentStyle.样式名
                - 例子：
                        box.currentStyle["width"]
                - 通过这个属性读取到的样式是只读的不能修改

- 其他的样式相关的属性
        注意：以下样式都是只读的

    clientHeight
            - 元素的可见高度，指元素的内容区和内边距的高度
    clientWidth
            - 元素的可见宽度，指元素的内容区和内边距的宽度
    offsetHeight
            - 整个元素的高度，包括内容区、内边距、边框
    offfsetWidth
            - 整个元素的宽度，包括内容区、内边距、边框
    offsetParent
            - 当前元素的定位父元素
            - 离他最近的开启了定位的祖先元素，如果所有的元素都没有开启定位，则返回body
            - 当前元素和定位父元素之间的偏移量
            - offsetLeft水平偏移量  offsetTop垂直偏移量

    scrollHeight
    scrollWidth
            - 获取元素滚动区域的高度和宽度

    scrollTop
    scrollLeft
            - 获取元素垂直和水平滚动条滚动的距离

    判断滚动条是否滚动到底
            - 垂直滚动条
                    scrollHeight - scrollTop = clientHeight

            - 水平滚动	
                    scrollWidth - scrollLeft = clientWidth

2.事件（Event）

  • 事件对象

  • 当响应函数被调用时，浏览器每次都会将一个事件对象作为实参传递进响应函数中，这个事件对象中封装了当前事件的相关信息，比如：鼠标的坐标，键盘的按键，鼠标的按键，滚轮的方向。。

  • 可以在响应函数中定义一个形参，来使用事件对象，但是在IE8以下浏览器中事件对象没有做完实参传递，而是作为window对象的属性保存

  • 例子：

      元素.事件 = function(event){
          event = event || window.event;

  };

  元素.事件 = function(e){
          e = e || event;

  };

  • 事件的冒泡（Bubble）

  • 事件的冒泡指的是事件向上传导，当后代元素上的事件被触发时，将会导致其祖先元素上的同类事件也会触发。

  • 事件的冒泡大部分情况下都是有益的，如果需要取消冒泡，则需要使用事件对象来取消

  • 可以将事件对象的cancelBubble设置为true，即可取消冒泡

  • 例子：

      元素.事件 = function(event){
  			event = event || window.event;
  			event.cancelBubble = true;
  		};
avatar
文章
阅读
粉丝