js 事件对象event

在触发DOM上的某个事件时，会产生一个事件对象event。这个对象中包含着所有与事件有关的信息。
包括导致事件的元素，事件的类型以及其他与特定事件相关的信息。

<body>
    <a href="http://www.baidu.com">baidu</a>
    <div class="box">
        我是div
        <div class="son">son</div>
    </div>

    <script>
        var box = document.querySelector('.box');
//        事件对象的兼容写法var e = e || window.event; // 或var e = e || event
        box.onclick = function(e) { // e是形参
            var e = e || window.event; // 或var e = e || event
            // event是事件对象 ie6-8通过window.event来获取事件对象
            console.log(e); // window.event
            console.log(e.target);// 触发事件的元素 var target = e.target || e.srcElement
            console.log(this); // 绑定事件的对象
        }

        // box.onmouseover = fn;
        // box.onmouseout = fn;

        function fn(e) {
            var e = e || window.event;
            console.log(e.type);
            
        }
        // 阻止浏览器的默认行为 比如链接跳转 e.preventDefault()或return false;
        var a = document.querySelector('a');
        a.onclick = function(e) {
            var e = e || window.event;
            console.log('hello');
            // 阻止浏览器的默认行为 比如链接跳转 ie6-8 returnValue属性 e.returnValue
            //e.preventDefault(); 
            return false; // 也可以阻止默认行为 且没有兼容性问题        
        }
    </script>
</body>

event常用属性：
1.event.type;——获取绑定的事件类型，比如click，mouseover等
2.event.target;（在ie低版本中用event.srcElement）——返回触发事件的元素。
比如[object HTMLInputElement]指的是html里的input元素
3.event.stopPropagation()[ˌprɒpə'ɡeɪʃn];（在ie中用oEvent.cancelBubble=false）//用于阻止事件冒泡
4.event.stopImmediatePropagation();//Immediate[ɪˈmi:diət] //当一个元素绑定多个事件处理程序的时候，
事件会按照顺序全部执行，如果不想让后面的事件处理程序执行，就在当前事件里加这个方法，
就不执行后面的事件处理程序了。
5.event.preventDefault();（在ie低版本中用oEvent.returnValue=true）
//阻止事件的默认行为，比如阻止a的href链接。

猜你喜欢