DOM对象(三) ——DOM总结和 事件高级、事件对象、DOM事件流、常用鼠标事件及常用键盘事件

DOM的总结

文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。
W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

• 文档：一个页面就是一个文档，DOM中使用document表示
• 节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示
• 标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示

创建

1. document.write
2. innerHTML
3. createElement

增加

1. appendChild
2. insertBefore

删

1. removeChild

改

主要修改dom的元素属性，dom元素的内容、属性、表单的值等

1. 修改元素属性：src、href、title等
2. 修改普通元素内容： innerHTML。innerText
3. 修改表单元素：value 、 type、disabled等
4. 修改元素样式： style、className

查

主要获取查询dom的元素

1. DOM提供的API方法： getElementById、setElementByTagName 古老用法不推荐
2. H5提供的新方法：querySelector、querySelectorAll 提倡
3. 利用节点操作获取元素的方法：父（parentNode）、 子（children）、兄（previousElementSibling。nextElementSibling） 提倡

属性操作

主要针对自定义属性

1. setAttribute： 设置dom的属性值
2. getAttribute： 等到dom属性值
3. removeAttribute： 移除属性

事件操作（重点）

接下来我们来整理事件操作。

事件高级 注册事件（2种方式）

1. 传统注册方式

利用on开头事件onclick

特点

• 注册时间的唯一性
• 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数会覆盖前面注册的处理函数

2. 方法监听注册方式

   w3c标准。推荐方式
   addEvementiListener（） 他是一个方法
   支持ie9之后版本

特点

• 同一个元素同一个事件可以注册多个监听器
• 按注册顺序依次执行

事件监听

.addEvementiListener（type，listener[，useCapture]）

该方法的三个参数

1. type
   事件类型字符串 比如：click，mouseover。注意这里不要带on

2. listener
   事件处理函数，事件发生时，会调用监听*函数

3. useCapture
   可选参数，是一个布尔值，默认是false。

删除事件（解绑事件）

方法监听注册方式

1. eventTarget.removeEventListener( type, listener[, useCapture]);
2. eventTarget. detachEvent (eventNamewi thon, callback) ;

DOM事件流

html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。
当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。

那么是先执行父元素的单击事件，还是先执行div的单击事件 ？？？

事件流
描述的是从页面中接受事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程就是DOM事件流

DOM 事件流会经历3个阶段：
1. 捕获阶段
Netscape（网景公司）提出从最外层开始，然后一层一层向内接收事件并响应，也就是捕获型事件流。

2. 当前目标阶段

3. 冒泡阶段
IE 提出从目标元素开始，然后一层一层向外接收事件并响应，也就是冒泡型事件流。

注意

• Js代码中只能执行捕获或者冒泡其中的一个阶段。

• onclick和attachEvent只能得到冒泡阶段

• addEventListener (type, listener[, useCapture] )第三个参数如果是 true ,表示在事件捕获阶段调用事件处理程序;如果是false (不写默认就是false) ,表示在事件冒泡阶段调用事件处理程序。

• 有些事件是没有冒泡的,比如onblur、onfocus. onmouseenter. onmouseleave

  我们向水里面扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后会产生泡泡，会在最低点（ 最具体元素）之后漂浮到水面上，这个过程相当于事件冒泡。
  
  事件冒泡

 

        
son盒子
    
    

事件捕获

        
son盒子
    
    

事件对象 什么是事件对象

事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象。

比如：

1. 谁绑定了这个事件。

2. 鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。

3. 键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。

event

1. 就是一个事件对象写到我们侦听函数的小括号里面当形参来看
2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
3. 事件对象是我们事件的一系列相关数据的集合跟事件相关的比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息比如判断用户按下了那个键
4. 这个事件对象我们可以自己命名比如event、evt、e
5. 事件对象也有兼容性问题ie678通过window. event兼容性的写法e=e||window . event;

事件对象的使用

事件触发发生时就会产生事件对象，并且系统会以实参的形式传给事件处理函数。

所以，在事件处理函数中声明1个形参用来接收事件对象。

事件对象的属性和方法

事件对象属性方法	说明
e.target	返回触发事件的对象 标准
e.srcElement	返回触发事件的对象 非标准ie6-8使用
e.type	返回事件的类型比如click mouseover 不带on
e.returnValue	该属性阻止默认事件(默认行为)非标准ie6-8使用比如不让链接跳转
e.preventDefault()	该方法阻止默认事件(默认行为)标准比如不让链接跳转
e.stopPropagation()	阻止冒泡标准
e.cancelBubble	该属性阻止冒泡非标准ie6-8使用

e.target与this的区别

• e.target返回的是触发事件的对象（元素）
• this返回的是绑定事件的对象（元素）

常情况下terget 和
this是一致的，但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行），
这时候this指向的是父元素，因为它是绑定事件的元素对象， 而target指向的是子元素，因为他是触发事件的那个具体元素对象。

还可以利用return false 也能阻止 默认行为，没有兼容性问题，但是return后面的代码也不执行，只限于传统的注册方式

事件委托（也称为事件代理，事件委派）

原理

不是给每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响 设置每个子节点

作用

只操作了一次DOM，提高了程序的性能

   

        
知否知否，点我应有弹框在手！
        
知否知否，点我应有弹框在手！
        
知否知否，点我应有弹框在手！
        
知否知否，点我应有弹框在手！
        
知否知否，点我应有弹框在手！
    
    	

常用鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

禁止选中文字和禁止右键菜单

1. 禁止鼠标右键菜单
   contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

document. addEventLi stener ('contextmenu', function(e) {
e. preventDefault() ;
}

2. 禁止鼠标选中(selectstart 开始选中)

document. addEventListener ('selectstart', function(e) {
e.preventDefault() ;
})

鼠标事件对象

鼠标事件对象（MouseEvent）

鼠标事件对象	说明
e.clientX	返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY	返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX	返回鼠标相对于文档页面的X坐标IE9+支持
e.pageY	返回鼠标相对于文档页面的Y坐标1E9+支持
e.screenX	返回鼠标相对于电脑屏幕的X坐标
e.screenY	返回鼠标相对于电脑屏幕的Y坐标

案例：跟随鼠标的天使

1. 鼠标不断的移动，使用鼠标移动事件: mousemove
2. 在页面中移动，给document注册事件
3. 图片要移动距离，而且不占位置，我们使用绝对定位即可
4. 核心原理:每次鼠标移动， 我们都会获得最新的鼠标坐标，把这个和y坐标做为图片的
5. top和left值就可以移动图片

常用的键盘事件

键盘事件对象（KeyboardEvent）

键盘事件对象	说明
onkeyup	某个键盘按键被松开时触发
onkeydown	某个键盘按键被按下时触发
onkeypress	某个键盘按键被按下时触发 （但是他不能识别功能键，比如 ctrl、shift箭头等）

执行顺序

keydown > keypress > keyup

keycode(键盘事件对象属性)

返回改键的ASCII码

注意

• onkeydown 和onkeyup 不区分大小写，onkeypress区分字母大小写
• keypress不能识别功能键

案例：快递单号查询

BOM知识总结到此结束了

暑期编程PK赛 得CSDN机械键盘等精美礼品！