首页 > Web开发 > 详细

js 事件对象event

时间:2019-11-23 22:14:03      阅读:79      评论:0      收藏:0      [点我收藏+]
在触发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链接。
 

 

 

js 事件对象event

原文:https://www.cnblogs.com/lyt0207/p/11919789.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!