事件处理程序

JavaScript 2020-07-13 817

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  
})  

 

标签:JavaScript

文章评论

评论列表

已有0条评论