JavaScript 事件

[xiaochengzi6]

事件

事件的定义

事件是一种触发响应的机制

事件分为事件源、事件处理程序和事件类型

通常有三种做法：1.普通事件、2.事件绑定和3.事件监听

1.普通事件： 通常给HTML元素添加一个特定的属性 (HTML事件处理程序)

<input onclick= "console.log('yes')">

2.事件绑定 就是将函数赋值给一个事件的处理程序 --->DOM0级处理程序

优点：简单，具有跨浏览器的优势

document.onclick = function (){
    console.log("yes")
}

3.事件监听 --->DOM2级事件

优点： 可以添加多个事件处理程序

//处理指定和删除事件处理程序
//addEvementListener() and removeElementListener()
document.addEvementListener("click",function(){},false)

两者参数相同，但往addEvementListener()传入 的匿名函数无法被移除，必须给给函数指定名称后才可以检索到方能删除事件处理程序

传入三个参数 1，事件类型 . 2，事件处理程序 3，传播方向

注意:传播方向false表示在冒泡阶段，反之在捕获阶段这样 将事件处理程序添加到事件的冒泡阶段可以更大程度上兼容各种浏览器

DOM0级和DOM2级区别：

dom0级中 事件处理程序的属性就是事件的类型只不过前面添加”on“

dom2级中事件类型不用加”on"

IE的事件处理程序

attachEvent() 和 detachEvent()

这两个方法接受相同的2个参数1.事件类型 2.事件的处理程序

document.attachEvent("onclick",timer)
function timer (){
    alert("YES")
}
document.detachEvent("onclick",timer);

这里传入的是“onclick”

attachEvent()和DOM0级的区别是DOM0级事件处理程序在元素的作用域执行，而使用attchEvent()会在全局作用域内运行，其中的this 等于window 使用attchEvent()也可以为一个元素添加多个事件处理程序

使用attchEvent()添加的事件处理程序可以通过detachEvent()来移除

事件对象

只有在事件处理程序执行期间才会有事件对象event存在，一旦事件处理程序执行完就会销毁event对象

1.DOM事件对象

名	值
event.target	获取事件目标
event.preventDefault()	取消事件的默认行为
event.stopPropagation()	取消事件的进一步捕获或者冒泡
event.type	被触发的事件类型

2.IE事件对象

名	值
event.srcElement	获取事件目标
event.cancelBubble	取消事件冒泡
event.returnvalue	默认为true，设置为false取消事件默认行为 但没有办法检测事件是否可以被取消
event.type	被触发的事件类型

事件处理程序的作用域根据指定它的方式来确定所以并不能认为this始终等于事件目标 ，在这里有两种指定方式

第一种：

var btn = document.getElementById('btn');
btn.onclick = function (){
    var event = window.event;
    alert(event.type);
    alert(window.event.srcElement === this);这里就是this指向这个函数的作用域
}

第二种：

var btn = document.getElementById('btn');
btn.attachEvent("click",function (event){
    alert(event.type);
    alert(event.srcElement === this);//window
})
//也可以通过window对象来访问event对象，不过为了方便的做法同一个对象作为参数传递