1.两种事件流
早期浏览器ie采用冒泡事件流,而Netscape采用事件捕获流。现代浏览器都支持这两种事件流。
冒泡事件流,从触发事件的html元素向上冒泡到Document
捕获流,从Document到触发事件的html元素。
2.Dom0级事件处理程序
var btn = document.getElementById('Btn')
btn.onclick = function () {
alert('Click');
// 移除事件,btn.onclick = null;
}
3.Dom2级事件处理程序
处理指定事件程序:addEventListener()
删除事件处理程序:removeEventListener()
都接受三个参数:处理的事件名,作为事件处理程序,布尔值,最后一个参数若是true,表示捕获阶段调用事件处理程序;如果是false,表示冒泡阶段调用事件处理程序。
var btn = document.getElementById('btn')
btn.addEventListener("click", function(){
alert('dddd')
}, false)
要移除事件,必须向removeEventListener()传入同addEventListener时完全一样的参数。
以下代码无用:
var btn = document.getElementById('btn')
btn.addEventListener("click", function(){
alert(this.id)
}, false)
btn.removeEventListener("click", function(){
alert(this.id)
},false)
因为第二个参数,不是完全相同的
将第二个参数改为以下传入:
handle = function () {
alert(this.id)
}
浏览器支持:IE,Firefox,Safari,Chrome和Opera支持DOM2级事件处理程序。
4.IE事件处理
IE有两个类似的事件处理程序:attachEvent()和detachEvent().接受两个参数:事件处理程序名称和事件处理处理程序。
var btn = document.getElementById("btn")
btn.attachEvent("onclick", function(){
alert("click")
})
detachEvent()事件与removeEventListener()事件类似,移除最好是将相同的函数引用单独拿出来。
支持IE事件的浏览器为:IE和Opera
兼容浏览器
因为冒泡模式大部分主流浏览器都是支持的,因此检测冒泡即可。编写EventUtil方法:
var EventUtil = {
addHandler: function (element, type, handler) {
if (element.addEventListener){
element.addEventistener(type, handler, false)
} else if (element.attachEvent) { // IE
element.attachEvent("on" + type, handler)
} else {
element["on" + type] = handler
}
},
removeHandler: function (element, type, handler) {
if (element.removeEventListener) { // IE9以上,Firefox等
element.removeEventListener()
} else if (element.detachEvent) { // IE9以下的部分版本
element.detachEvent("on" + type, handler)
} else {
element["on" + type] = null
}
}
}
5.事件对象
在触发Dom的某个事件时,会产生一个event,这个对象包含所有与事件有关的信息
举一个vue的例子
<div @click=handleClick(event)>ok</div>
<script>
handleClick (event) {
console.log(e.target) // ok
}
</script>
event中的属性
属性 | 描述 |
---|---|
bubbles | 返回布尔值,指示事件是否是起泡事件类型。 |
cancelable | 返回布尔值,指示事件是否可拥可取消的默认动作。 |
currentTarget | 返回其事件监听器触发该事件的元素。 |
eventPhase | 返回事件传播的当前阶段。 |
target | 返回触发此事件的元素(事件的目标节点)。 |
type | 返回当前 Event 对象表示的事件的名称。 |
点击查看更多属性 |
在事件处理程序内部,对象this始终等于currentTarget的值,而target则只包含事件的实际目标。如果直接将事件处理程序指定给目标元素,则this,currentTarget和target包含相同的值。
要阻止特定事件的默认行为,可以使用preventDefault()方法。如a标签有一个点击跳转的行为,使用该方法可以取消行为。
var link = document.getElementById("myLink")
link.onclick = function (event) {
event.preventDefault() // 取消行为
}
只有在cancelable属性设置为true时,才可以使用preventDefault()取消其默认行为。
stopPropagation()方法用于立即停止事件在DOM层次中的传播,即取消进一步的事件捕获或冒泡。如以下例子:
var btn = document.getElementById('Btn')
btn.onclick = function (event) {
alert('click-0')
stopPropagation()
}
var btn2 = document.getElementById('Btn')
btn2.onclick = function (event) {
alert('click-1')
}
btn1执行后,btn2就不会执行。
♠只有在事件处理程序执行期间,event对象才会存在,一旦程序执行完毕,event对象就会销毁
6.IE中的事件对象
访问IE中的event对象有几种方式,取决于指定事件处理程序的方法
var btn = document.getElementById('btn')
btn.onclick = function () {
var event = window.event
alert(event.type)
}
如果事件处理程序使用attachEvent()添加,event会被作为参数传入事件处理程序。
var btn = document.getElementById('btn')
btn.attachEvent("onclick", function (event) {
alert(event.type)
})
ie的event对象包含下表属性和方法
| 属性/方法 | 类型 | 读/写 | 说明 |
| ------------ | ------------ |
| cancelBubble | Boolean | 读/写 | 默认值false,但将其置为true就可以取消事件冒泡(与Dom中的stopPropagation()方法作用相同) |
| returnValue | Boolean | 读/写 | 默认值true,但将其置为false就可以取消事件的默认行为(与DOM中的preventDefault()方法作用相同) |
| srcElement | Element | 只读 | 事件目标(与target作用相同) |
| type | String |只读 |被触发的事件类型|
因为事件处理程序的作用域是根据指定它的方式来确定,所以不能认为this会始终等于事件目标。
var btn = document.getElementById('btn')
btn.onclick = function () {
alert(window.event.srcElement === this) // true
}
btn.attachEvent("onclick", function (event) {
alert(event.srcElement === this) // false
})
评论列表
已有0条评论