事件的兼容性

事件：网页中的操作行为

事件对象属性

• clientX/clientY:获取当前鼠标位置，相对于浏览器而言，等价于X,Y
• pageX/pageY：获取当前鼠标位置，相对于页面而言，等价于layerX/layerY
• offsetX/offsetY：获取当前鼠标位置，相对于事件标签而言

事件绑定与取消

事件绑定与取消需要进行浏览器兼容处理

标准浏览器

          事件绑定： 元素.addEventListener(事件（不加on）,事件处理函数，是否捕获（true/false）)

          事件取消：元素.removeEventListener(事件（不加on）,事件处理函数，是否捕获（true/false）)

ie浏览器

         事件绑定： 元素.attachEvent(事件（加on）,事件函数)

          事件取消：元素.detachEvent(事件（加on）,事件函数)

事件绑定与取消

           标准浏览器： 

var btn = document.querySelector("button") 

// 2、标准事件绑定方式 
function fn() { 
    alert("事件被触发了") 
}
function fn2() { 
    alert("事件再次被触发了......") 
}
function fn3(){
    alert("这是新增功能，没有修改原来功能的函数") 
}
if(btn.addEventListener) { 
    btn.addEventListener("click", fn, false) // 标准浏览器 
    btn.addEventListener("click", fn2, false)
    btn.addEventListener("click", fn3, false) // 新增代码，没 有修改原有代码 
} else {
       btn.attachEvent("onclick", fn) // IE低版本浏览器 
       btn.attachEvent("onclick", fn2) 
       btn.attachEvent("onclick", fn3) // 新增代码，没有修改原有代码 
}

阻止事件冒泡

标准浏览器：事件.stopPropagation()

IE浏览器：事件.cancelBubble()

if(event.stopPropagation){
                event.stopPropagation
            }
            else{
                event.cancelBubble = true
            }

事件默认行为

标准浏览器：元素.preventDefault（）

IE浏览器：元素.returnValue()

 // 阻止默认行为
        a.onclick = function(){
            var event = window.event||e
            if(event.preventDefault){
                event.preventDefault()
            }else{
                event.returnValue = false
            }

            alert("用户点击了超链接按钮...")
        }