<!-- 关于dom 详细总结 -->
<!--
一,dom操作获取节点
1,document.getEementById();
2, document.getElementByTagName();
3, document.getElementByClassName();
4, document.querySelector();
5, document.querySelectorAll();
6, Node节点来获取
-->
<!--
二 dom 的增删改查
1 , 增加
appendChild()
insertBefore()
2 , 创建
document.write();
innerHTML
creatElement
3, 删除
removeChild()
4, 改
属性来改 src href title
内容 innerHTML innerText
表单 value type disable
样式 style classname
-->
<!--
三 事件
1 注册事件
传统:element.on事件
监听的方法:element.addEventListener('事件',fn , true/false)
ie678 : element.attchEvent;
2 销毁事件
传统 : element.事件 = null;
方法监听:element.removeEventListener('事件',fn)
ie678 :element.datachEvent('事件',fn);
3 事件类型
mouseEvent
onclick
onmouseover 会有事件冒泡行为 鼠标经过子元素是会再触发一次事件
onmouseout
onmouseenter
onmouseleave 不会有事件冒泡行为
onfocus
onblur
onmousemove
onmouseup
onmousedown
contextmenu
KeyboardEvent
keyup
keypress 不识别功能键 识别大小写
keydown 是被功能键 不区分大小写
滚动事件
scroll
change事件
change
4 事件对象
mouseEvent object
event.target 触发事件的元素 (this返回绑定事件的元素)
event.type 得到事件
event.preventdefault() 阻止事件默认行为 可与contextmenu事件组合使用静止修改文档内容
event.stopPropagation() 阻止冒泡
event.clientX 鼠标距离可视区X轴距离
event.clientY 鼠标举了可视区Y轴距离
event.pageX 鼠标距离页面文档X轴距离
event.pageY 鼠标距离页面文档Y轴距离
event.screenX 鼠标距离屏幕x轴距离
event.screenY 鼠标距离屏幕Y轴距离
KeyboardEvent object
keyCode 可获取某个按键的ASCII编码
5 事件冒泡与事件捕获及事件委托
冒泡: 通过事件对象的stopPropagation方法来阻止;
捕获:
事件委托:将事件侦听器绑定父元素,通过事件冒泡机制来实现子元素对事件的触发
6 三种事件注册对于捕获与冒泡的兼容性
1 element.addEventListener('事件',fn,true/false) 第三个参数为true为捕获阶段执行,为false在冒泡阶段执行
2 element.on'事件' 与 element.attachEvent('事件',fn) 只有冒泡行为
-->