首页 > 代码库 > js one
js one
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 - 使用通用属性来获取文本。
js one