BOM(事件周期&event对象&常用HTML DOM对象)

1、事件周期
解释器在创建一个event对象后,会按照以下过程在html元素间进行传递
-第一阶段:事件捕获,事件对象延DOM树向下传递
-第二阶段:目标触发,调用事件触发函数
-第三阶段:事件冒泡,事件延dom树向上传播

事件冒泡:当处于一个对象模型底部的对象事件发生时,会依次激活祖先对象定义的同类事件处理函数

2、event对象
任何一个事件触发后,都会产生一个event对象,event对象记录事件发生时鼠标的位置、键盘按键的状态和触发对象等信息
获取事件对象:
var e = window.event||arguments[0];
IE浏览器中,可以在js或html代码中直接使用event关键字,有些浏览器可以在html中使用event,但js中不可以

常用属性:
-srcElement或target:事件源对象
-clientX/offsetX/pageX/screenX/x:事件发生的鼠标x坐标
-clientY/offsetY/pageY/screenY/y:事件发生的鼠标y坐标
-which/keyCode/charCode:键盘哪个按键被按下
-cancleBubble:取消冒泡
-returnValue:取消事件的默认行为

3、arguments
该对象表示函数所接收到的所有参数的集合
BOM(事件周期&event对象&常用HTML DOM对象)_第1张图片
一、常用HTML DOM对象
1、image对象
Image对象代表嵌入的图片对象,标记出现一次,就会创建一个Image对象,也可以使用new Image()手动创建一个新图片对象,常用属性有:src/width/height
注意,image对象的width和height属性的值只能设置为数字
2、Table对象
此对象表示 一个HTML表格,

标记代表一个Table对象,常用属性有
-rows:所有行节点对象的集合

常用方法:
-insertRow(下标); 在某位置添加行,返回TableRow对象
-deleteRow(下标); 删除某一行

TableRow对象
表示一行,就表示一个TableRow对象
常用属性:
-rowIndex:表示挡墙行对象所在table行集合的下标
-cells:当前行所有单元格对象的集合

常用方法:
-insertCell(小标):插入单元格,返回TableCell对象
-deleteCell(下标):删除单元格

TableCell对象
表示td对象,标记表示一个TableCell对象
常用的属性:
-cellindex:单元格的下标
-colSpan:跨列
-rowSpan:跨行

BOM(事件周期&event对象&常用HTML DOM对象)_第2张图片

你可能感兴趣的:(BOM)