Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用:
<input type="button" onclick="alert('Button Click')" />
当上面的button被点击后,会弹出一个框显示“Button Click”.
在javascript中添加事件监听函数有多种方法,比如:
在html元素上
用上述元素对应的js属性
用统一的添加函数
2级事件模型中,可以调用对象的addEventListener()方法为元素设置事件监听函数,也就是说通过2级DOM的这个API注册的函数才有可能在上述事件传播三个阶段中任意一个阶段捕捉到事件的发生(如果用0级DOM的2个方法赋值的事件监听函数不能在capturing阶段捕捉到事件)。
1 .addEventListener第一个参数是String,事件类型名,没有前缀on,比如要注册click事件就传入“click”
,不是“onclick”
2 .第二个参数是监听函数,在调用的时候js会传给他一个Event对象,这个对象放了有关事件的细节,如果调用的这个对象的stopPropagation()方法,则会阻止事件传播进一步传播(比如在第一个阶段捕捉到事件并运行事件监听函数,其中调用了event。stopPropagation则事件就不会再被传播经历第二第三阶段了)
3 .第三个参数是boolean,true表示事件监听函数能够在三个阶段中的任意一个阶段捕捉到事件(符合2级DOM标准),如果是false就表示事件监听函数不能在capturing阶段捕捉到事件(表现同0级DOM)。
2级DOM中监听函数中的this
通过addEventListener添加的函数中的this,标准中并没有规定this必须指向目标元素, 尽管大多数浏览器都是这么实现的,但最终还是取决于浏览器的实现,我们需要用到目标元素的时候请调用event.currentTarget.
2级DOM的Event对象
用addEventListener添加的事件监听函数,在被调用的时候js会传给他一个Event对象,下面就是这个Event对象的常用属性
type:
发生的事件的类型,例如"click", "mouseover"
target:
发生事件的节点,可能与currentTarget不同
currentTarget:
正在处理事件的节点,如果在capturing阶段和冒泡阶段处理事件,这个属性就与target属性不同。在事件监听函数中应该用这个属性而不是this
stopPropagation():
可以阻止事件从当前正在处理他的节点传播
preventDefault():
阻止浏览器执行与事件相关的默认动作,与0级DOM中返回false一样
clientX, clientY:
鼠标相对于浏览器的x坐标y坐标
screenX, screenY:
鼠标相对于显示器左上角的x坐标y坐标
IE事件模型
1.Event对象不是传递给事件监听函数,而是通过Window对象的event属性访问Event对象.
2.IE Event对象常用属性
type:
兼容DOM的type属性
srcElement:
兼容DOM的target属性
clientX, clientY:
兼容DOM的clientX, clientY属性
cancelBubble:
布尔值,设为true同调用stopPropagation()
returnValue:
布尔值,设为false同调用preventDefault()
3.事件监听函数注册
没有addEventListener,只有attachEvent。2个参数,同addEventListener前两个,只是事件名带前缀on。 IE事件模型没有capturing阶段所以调用attachEvent相当于调用addEvetnListener且第三个参数为false:
相当于
4.用attachEvent注册的函数将被作为全局函数调用,而不是作为发生事件的文档元素的方法,也就是说this引用的是Window对象,而不是事件的目标元素。