js中的DOM事件

DOM 事件

1、Js中的事件

行为,结构,样式分离的页面

一般事件 onclick 鼠标点击时触发此事件

ondblclick 鼠标双击时触发此事件
onmousedown 按下鼠标时触发此事件
onmouseup 鼠标按下后松开鼠标时触发此事件
onmouseover 当鼠标移动到某对象范围的上方时触发此事件
onmousemove 鼠标移动时触发此事件
onmouseout 当鼠标离开某对象范围时触发此事件
onkeypress 当键盘上的某个键被按下并且释放时触发此事件.
onkeydown 当键盘上某个按键被按下时触发此事件
onkeyup 当键盘上某个按键被按放开时触发此事件

①、绑定事件的3种方式

1: 直接写在html标签内声明

<div id="school" onclick="t();">

这种写法最古老,兼容性最强.属于DOM的lev0级的标准.这个效果,等同于在点击div的时候,执行"t();"这一语句,

在全局范围内执行,因此,t函数内部的this指代全局对象-->window 想操作被点击的DOM对象,用this就不行了.

 第2种绑定方式:

DOM对象.onclick = function () {}

这种绑定是把一个DOM对象onclick属性赋值为一个函数,

因此,函数内部的this直接指向该DOM对象.

在这种绑定方式中,只能给一个事件,绑定一个处理函数

即 .onclick = fn1;  .onclick = fn2;

最终的效果, 是.onclick = fn2;

如果用函数来调用其他函数的形式

例.onclick = function () {fn1(),fn2()}

那么此时，　fn1,fn2中的this又指向window．

如何绑定多个函数，　并令this指向DOM对象

第三种绑定事件的方法:

DOM lev3的事件绑定标准

添加和去除监听事件.

addEventListener('事件',函数);  // 第一个参数事件参数, 没有前缀"on", w3c的标准,IE不支持

注意点1: 如果添加了多个事件处理函数, 按"添加时的先后顺序来执行"

注意占2: 事件处理函数中的this 指代 DOM节点自身 (w3c标准)

注意点3: 第一个事件参数,一律把事件名称的'on'去掉 (w3c标准)

 

去除绑定

removeEventListener('事件',函数)

IE下绑定事件与解除事件的方法

attachEvent('事件',函数)   // 注意: 事件 要加on

detachEvent('事件',函数) // 事件依然要加on

总结一下:

W3c addEventListener 与IE的attachEvent()的不同

1: 函数名不同

2: 事件名不同, IE下要加on,w3c不加on

3: 加事件后的执行顺序不同, w3c按绑定事件的顺序来执行, 而IE6,7,8,是后绑定的事件先发生.

4: this的指向, w3c中,绑定函数中的this指向 DOM对象, 而IE6,7,8中,指向window对象