事件对象

事件对象

1. 事件对象特点：

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

2. 事件对象的分类：

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

click me

捕获.PNG

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

捕获.PNG

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

    click me
    

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

    click me
    

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

跨浏览器的事件对象

阻止事件冒泡

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

常见的事件对象

    //鼠标事件
    click:点击事件
    this.classList.add('hover')
    this.classList.remove('hover')
    mouseover(子元素会触发)
    mouseout(子元素会触发)
    mouseleave(子元素不会触发)
    mouseenter(子元素不会触发)



    //input事件
    //输入框只有获取焦点的时候才可以输入
    input.addEventListener('click',function(e){
        console.log(e)
    })
    focus:获取焦点
    blur：失去焦点
    input.addEventListener('focus'function(){
        console.log(1)
    })
    input.addEventListener('blur',function(){
        console.log(2)
    })
    keyup：键盘松开事件
    input.addEventListener('keyup',function(e){
        console.log(this.value)
        console.log(e)//输入的内容,可以进行判断，当输入的内容===xxx，进行oooo操作
        this.value = this.value.toUpperCase()
    })
    change:当输入框里面的内容发生改变时触发的事件
    input.addEventListener('change',function(e){
        console.log(1)
        console.log(e)
    })


    //form表单提交事件
    //submit:form表单提交验证事件
    

        
        
    
 
    function $(id){
        return document.querySelector(id)
    }
    function $$(cls){
        return document.querySelectorAll(cls)
    }
    $('#form').addEventListener('submit',function(e){
        e.preventDefault();//阻止默认事件
        //进项验证，验证用户名
        if(/^\w{6,12}$/.test($('#username').value)){
            $('#form').submit();
        }else{
            console.log('no submit...')
        }
    })



    //其他事件
    scroll:滚动事件(注意：滚动一格，会执行很多次)
    window.addEventListener('scroll',function(){

    })
    load：图片加载完成事件