DOM 事件

事件冒泡与捕获

**dom2 级事件 的  **addEventListener 第三个参数控制 事件冒泡或捕获

• true 表示捕获，从上往下， 就是只触发当前事件，不会触发外层事件 catch
• false (默认) 表示冒泡，从下往上。 触发了子事件，还要把父事件上级事件一起触发了。bind

–

**  自定义属性  **

data -任意名= ‘ ‘  类似  **title（但 title 没有设置默认就是 0,不精准。） **就是方便选择查找的一个属性参数。

可以配合循环，设置为对应角标值，通过  this  调用   配合使用

**    获取元素的大小**

**    **** **   节点对象的系统属性

clienWidth  宽度，返回的是数字   ， 不包括 border,包括 padding

clienHeight  高度  ，返回的是数字 ，  不包括 border,包括 padding

offsetWidth  宽度，返回的是数字，包含 border,包含 padding

offsetHeight  高度 ，返回的是数字，包含 border，包含 padding

body  的 margin  默认 8px

**offsetLeft  **

包括外边距 距离浏览器窗口左边的距离。返回数字

如果祖先元素有定位，值就相对祖先元素的偏移量。值等于最近一级有定位的元素的左边偏移量

**offsetTop  **

包括外边距   距离浏览器窗口上边的距离。返回数字

如果祖先元素有定位，值就相对祖先元素的偏移量。值等于最近一级有定位的元素的上边偏移量

可视窗口的宽高，兼容性写法。

window.innerHeight ||
  document.documentElement.clientHeight ||
  document.body.clientHeight;

window.innerWidht ||
  document.documentElement.clientWidth ||
  document.body.clientWidth;

overflow: auto  //     若果内容比容器大出现滚动条

节点.scrollHeight    内容比容器大时,获取滚动条的高度即是内容的高度。

document.body.scrollTop

document.documentElemnet.scrollTop  滚动条离顶部的距离。用页面元素来获取的

---

=============事件===============

事件流的处理方式

**    **

事件冒泡

事件捕获

**    chorme**

1.捕获- 从上往下找

2.找到事件源

3.冒泡- 从下往上冒泡

事件的分类

–

鼠标事件

• 点击     click
• 双击     dblclick    两次单击事件
• 鼠标按下   mousedown
• 鼠标弹起  mouseup
• 鼠标移动  mousemove
• 鼠标悬停-移入 mouseover
• 鼠标移出 mouseout
• 鼠标右键  contextmenu

**     **

键盘事件

• keydown  键盘按下   -回退键是 keydown
• keypress  键盘按着
• keyup  键盘弹起

一次按键 keydown keypress keyup

按着不放 keydown keypress keypress keypress… keyup

回退键（back）：

按一次：keydown keyup

按着不放：keydown keydown keydown…  keyup

html 相关事件

**   ** window.onload  页面内容

xx.onerror  xx 出错时。

input.onfocus  -获得聚焦 -用 this 设置属性

input.onblur  -失去聚焦  -用 this 设置属性

change  -失去聚焦,内容有改变才触发

submit -表单提交会触发的事件 ，写在表单中

reset -表单重置会触发的事件

scroll -滚动事件

consolo.error  控制台打印错误信息

**dom0 级事件  **

添加事件

** ** ** ** 节点.on 事件名字 = function（）{

**        事件发生时要做的事情**

}

缺点：同类事件的实现只能赋值一种，以最后一个为准

优点：没有兼容性的限制

删除事件

**   ** 节点.on 事件名称 = null

dom2 级事件（没有 1 级）

添加事件

**   ** -匿名- 

Event–事件

Listener–监听器

节点.addEventListener(‘事件名字’，匿名函数，是否捕获<true,false>);

-有名字-

节点.addEventListener(‘事件名字’，函数名字，是否捕获<true,false>);

function  函数名称(){   }

事件冒泡与捕获

//最后一个参数表示是否捕获。

//true 表示捕获，从上往下；

// false 表示冒泡，从下往上。 点

删除事件

只能删除函数名引用的函数的事件

匿名函数的事件没法删除

怎么加就怎么删，参数要和添加一样。必须一模一样

header.addEventListener(‘click’,fun,true)  ;添加

header.removeEventListener(‘click’,fun,true)  ;删除

优点：同类事件的实现可以有多种

缺点：兼容性问题

iE 浏览器

添加事件

节点.attachEvent(‘on 事件名称’,function(){  })

---

节点.attachEvent(‘on 事件名称’,函数名)；

function  函数名（）{

……

}

删除事件

节点.detachEvent(‘on 事件名’,函数名)

怎么添加就怎么删除,参数和添加时的参数一样。

---

事件对象

代表一个状态，事件发生时,目标元素，键盘，鼠标的状态

事件对象从哪里来？事件发生的时候,在执行函数的内部产生事件对象。

默认 arguments[0]  就是事件对象。

获取事件对象

var e= window.event || arguments[0]  –写到函数内部

e.clientX  鼠标事件发生时,鼠标离窗口左上角的水平位置

e.clientY  鼠标事件发生时,鼠标离窗口顶部的竖直位置

e.offsetX  鼠标事件发生时,鼠标相对被点击元素的水平的位置

e.offsetY 鼠标事件发生时,鼠标相对被点击元素的竖值的位置

**  键盘码兼容性写法**

e.keyCode(chrome，ie)  || e.charCode(firefix)

获取事件源 -返回节点对象（标签名称）-被点击的节点

e.target(chrome) || e.srcElement (ie)

================

e.pageX

e.scrennX

e.type  事件的名字

---

//阻止冒泡 阻止那个冒泡 就在那个上面写。

e.stopPropagation(); //chrome

e.cancelable = true; //id 写法