17-事件对象

<button id="btn">我是按钮</button>
<a href="http://www.it666.com">知播渔教育</a>

• 1.什么是事件对象?

  • 事件对象就是一个系统自动创建的对象
    当注册的事件被触发的时候, 系统就会自动创建事件对象

    var oBtn = document.getElementById("btn");
    oBtn.onclick = function (event) {
        // 兼容性写法
        // 在低版本的浏览器中通过window.event才能拿到这个对象
        event = event || window.event;
        console.log(event);  // MouseEvent {}
        console.log(typeof event);  // object
    }
    

• 2.事件对象的注意点:

  • 在高级版本的浏览器中, 会自动将事件对象传递给回到函数
  • 在低级版本的浏览器中, 不会自动将事件对象传递给回调函数
  • 在低级版本的浏览器中, 需要通过 window.event 来获取事件对象

• 阻止默认行为

  • return false; (推荐)

    let oA = document.querySelector("a");
    oA.onclick = function () {
        alert("666");
        // 阻止默认行为
        // 企业开发推荐的写法
        return false;
    }
    

  • preventDefault 方法

  • 注意点: preventDefault 方法只支持高级s版本的浏览器

    let oA = document.querySelector("a");
    oA.onclick = function (event) {
        // 兼容性写法
        // 在低版本的浏览器中通过window.event才能拿到这个对象
        event = event || window.event;
    
        alert("666");
        // 阻止默认行为
    
        // 注意点: preventDefault方法只支持高级版本的浏览器
        event.preventDefault();
    }
    

  • returnValue (IE9以下)

    let oA = document.querySelector("a");
    oA.onclick = function (event) {
        // 兼容性写法
        // 在低版本的浏览器中通过window.event才能拿到这个对象
        event = event || window.event;
    
        alert("666");
        // 阻止默认行为
    
        // IE9以下的浏览器使用的
        event.returnValue = false;
    }