js one

Posted 2020-08-13

JS 事件模型：
事件流
事件流意味着页面不止一个元素可以响应相同的事件。
事件冒泡
事件冒泡是从里到外，且 IE 低版本和标准浏览器（Dom 浏览器中）不一样：
低版本 IE：div ——> body ——> document
标准浏览器：div ——> body ——>html ——> document ——> window
事件捕获
仅 DOM 浏览器支持!
触发顺序从外层对象 （document 对象） 到最里层的对象。 事件捕获也可以 window 级事件， 但是需要开发者显式指定。
1.3DOM 事件流
DOM 同时支持事件捕获和事件冒泡。事件捕获先发生。IE 低版本浏览器只有冒泡
两个事件流可以遍历 DOM 中的所有对象！ 
事件处理程序、监听器
事件绑定（每个事件指派多个事件处理程序）
A.IE 浏览器（DOM0）
绑定一个事件：[obj].attachEvent(‘事件处理程序名称’，函数名)
解除一个事件：[obj].detachEvent(‘事件处理程序名称’，函数名)
B.DOM 浏览器（DOM2）
绑定一个事件：[obj].addEventListener(‘事件名称’，函数名，是否冒泡或捕获)
绑定多个事件：
var fnClick1 = function(){
alert("。。。")
}
var fnClick2 = function(){
alert("。。。")
}
var oDiv = document.getElementById(‘div1‘);
oDiv.addEventListener(‘click‘,fnClick1,false); //绑定fn1与fn2
oDiv.addEventListener(‘click‘,fnClick2,false); //移除和IE低版本同理
//但是要注意 IE 低版本只有两个参数。只有冒泡。没有捕获

Event对象
创建事件时，都会生成一个Event对象，事件执行完成后，Event对象就被销毁。
解决IE和DOM的Event兼容性
event = event || window.event;
事件类型
鼠标事件
包括: click，dblclick，mousedown，mouseout，mouseover，mouseup，mousemove
键盘事件
包括: keydown，keyup，keypress
HTML事件
包括: locd,select,change,scroll,focus,blur

 

表格操作：

--新增
tableElement.insertRow(position) - 新增一行，返回值为一个 tr 节点即一个 rowElement ， position 位置从 0 开始计数。
rowElement.insertCell(position) - 新增一个单元格，返回值为一个 td 节点即一个 cellElement ， position 位置从 0 开始计数。
--删除
tableElement.deleteRow(position) - 删除某行， position 从 0 开始计数。
rowElement.deleteCell(position) - 删除某行， position 从 0 开始计数。
--访问
tableElement.rows - 获取表格所包含的的所有 tr 元素节点所组成的集合数组。
rowElement.cells - 获取行元素节点所包含的所有 td 元素节点所组成的集合数组。

表单控件操作：

--表单控件通用属性
通用属性包括 value 和 text ，即对于所有的 input 节点或 select 节点以及 select 下的 option 节点都是通用的。
value - 值。
text - 文本内容。
--select 下拉框
1. 访问 option 节点
selectElement.options - 返回该 select 节点内子节点 option 节点所组成的数组。
2. 删除 option 节点
selectElement.remove(position) - 基于 select 节点的 remove 方法，删除指定位置的 option 节点，从 0 开始计数。
3.select 节点直接取值
value - 使用通用属性 value 来取值，来获取选中的值。
selectedIndex - 获取被选中的 option 节点的位置。
4.option 节点取值
value - 使用通用属性来获取值。
text - 使用通用属性来获取文本。
selected - 是否被选中。
defaultSelected - 是否默认被选中。
--radio 单选框和 checkbox 复选框
value - 使用通用属性获取值。
checked - 是否被选中。
--input 输入框
value - 使用通用的属性来取值。
text - 使用通用属性来获取文本。