事件对象

事件对象

1. 事件对象特点：

• 只有在事件处理程序执行期间，event对象才存在，一旦事件处理程序执行完成，event对象就会被撤销；
• event对象包含所有与事件有关的信息，包括导致事件的元素、时间的类型以及其他与特定事件相关的信息；
• event对象的属性和方法会因事件类型的不同而不同。

2. 事件对象的分类：

• DOM中的事件对象
  a: 兼容DOM的浏览器会将一个event对象传入到事件处理程序中。（DOM0级、DOM2级）

<button id = 'btn'>click me</button>
<script>
var btn = document.getElementById('btn')
btn.onclick = function(event){
    console.log(event.type) //clcik
}
btn.addEventListener('click',function(event){
    console.log(event.type) // click
},false)
</script>

捕获.PNG
b: 在通过HTML特性指定事件处理程序时，变量event中保存着event对象。

<input type = "button" value = "Click Me" onclick = "console.log(event.type)"/>  <!--click-->

捕获.PNG

• IE中的事件对象
• • 在使用DOM0级方法添加事件处理程序时，event对象作为window对象的一个属性存在。

    <button id = 'btn'>click me</button>
    <script>
    var btn = document.getElementById('btn')
    btn.onclick = function(){
        var event = window.event // window对象的属性
        console.log(event.type) // click
    }
    </script>

捕获.PNG

• • 如果事件处理程序时使用attachEvent()添加的，那么event作为参数被传入到事件处理程序中。

    <button id = 'btn'>click me</button>
    <script>
    var btn = document.getElementById('btn')
    btn.attachEvent('onclick',function(event){
        console.log(event.type) // click
    })
    </script>

• • 如果是通过HTML特性指定事件处理程序，便可以通过event变量访问event对象。

<input type = "button" value = "Click Me" onclick = "console.log(event.type)"/>  <!--click-->

跨浏览器的事件对象

    <script>
    var EventUtil = {
        addHandler:function(element,type,handler){
            //代码省略
        },
        getEvent: function(event){
            return event ? event : window.event
//返回对event对象的引用，在兼容DOM的浏览器中，
//event变量只是简单的传入和返回，
//而在IE中，event对象是未定义的，因此就会返回window.event。
        },
        getTarget: function(event){
            return event.target || event.srcElement
//返回事件的实际目标，如果存在target属性，则返回event,target，
//否则返回srcElement属性的值。
        },
        preventDefault: function(event){
            if(event.preventDefault){
                event.preventDefault()
            }else{
                event.returnValue = false
            }
        //取消事件的默认行为
        },
        stopPropagation: function(event){
            if(event.stopPropagation){
                event.stopPropagation()
            }else if {
                event.canceBubble = true
            }
            //阻止事件冒泡，stopPropagation既可以阻止冒泡也可以阻止捕获，
            //由于IE只有冒泡，所以此时只阻止冒泡。
        }
    }
    // 调用方式
    EventUtil.getTarget(event);
    </script>

阻止事件冒泡

• DOM中的事件对象阻止事件冒泡：

var btn = document.getElementById('btn')
btn.addEventListener('click',function(e){
  e.stopPropagation()
},false)
//既可以阻止冒泡也可以阻止捕获

• IE中的事件对象阻止事件冒泡

var btn = document.getElementById('btn')
btn.onclick = function(){
    window.event.canaelBubble  = true
}
//只能阻止事件冒泡

阻止事件默认行为

• DOM中的事件对象阻止事件默认行为：

var link = document.querySelector('#link')
link.addEventListener('click',function(e){
    e.preventDefault()
})

• IE中的事件对象阻止事件冒泡

var link = document.querySelector('#link')
link.onclick = function(){
  window.event.returnValue = false
}