js事件中的event对象

addEvent(oDiv,"click",function(event){
                console.log(event.bubbles+"事件是否冒泡");
                console.log(event.cancelable +"是否可以取消默认行为")
                console.log(event.defaultPrevented+"DOM3新增,是否已经调用了preventDefault()");
                console.log(event.target);//+"当前发生事件的对象"@ IE中为 event.srcElement
                console.log(event.currentTarget)//+"绑定的事件对象"
                console.log(event.detail)//与事件相关的细节信息(不知道有什么用。。)
                console.log(event.type);//发生了什么事件
                console.log(event.eventPhase);//用于判断事件是否是冒泡进来的:返回1:表示捕获阶段;2表示处于目标;3表示冒泡进来的
                event.preventDefault();//阻止默认事件@ IE8及以下 中函 直接在函数中return false
                event.stopPropagation();//阻止冒泡@ IE8及以下 中  event.cancelBubble=true;

                console.log(eventFn.getTarget(event));

            });

            function addEvent(obj,ev,fn){

                if(obj.attachEvent)
                {
                    obj.attachEvent("on"+ev,fn);
                }
                else
                {
                    obj.addEventListener(ev,fn,false);
                }

            }
event.srcElement是IE下的属性
event.target是Firefox下的属性
Chrome浏览器同时有这两个属性

-------------------------------------------------------兼容的event对象 冒泡 阻止默认事件。。

用法eventFn.getTarget(event)
var eventFn = {

                getEvent:function(event){
                    return event?event:window.event;
                },
                getTarget:function(event){
                    return event.target||event.srcElement;
                },
                preventDefault:function(event){
                    //阻止默认事件
                    if(event.preventDefault())
                    {

                        event.preventDefault();
                    }
                    else
                    {
                        event.returnValue = false;
                    }

                },
                stopPropagation:function(event){
                    //阻止冒泡
                    if(event.stopPropagation())
                    {
                        event.stopPropagation();
                    }
                    else
                    {
                        event.cancelBubble = true;
                    }

                }

            }
 
时间: 2024-08-01 10:46:12

js事件中的event对象的相关文章

JS中的event 对象详解

JS中的event 对象详解 JS的event对象 Event属性和方法: 1. type:事件的类型,如onlick中的click: 2. srcElement/target:事件源,就是发生事件的元素: 3. button:声明被按下的鼠标键,整数,1代表左键,2代表右键,4代表中键,如果按下多个键,酒把这些值加起来,所以3就代表左右键同时按下:(firefox中 0代表左键,1代表中间键,2代表右键) 4. clientX/clientY:事件发生的时候,鼠标相对于浏览器窗口可视文档区域的

JS和JQ的event对象对比和应用

摘要 js和jq的event对象大同小异,本文简单对比下它们的'click'事件下的不同和应用 js jquery jq event 代码测试: ? 1 2 3 4 5 6 7 <div id= "test" ><p>test text<p></div> <script src= "vendor/jquery-2.1.1.js" ></script> <script> test.ad

IE8中的Event对象属性与方法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

js中window.event对象

event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等. event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义.比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义. 例子 下面的例子检查鼠标是否在链接上单击,并且,如果shift键被按下,就取消链接的跳转. <HTML> <HEAD><TITLE>Cancels Links</T

JS事件中的对象

在触发任何事件时都会产生一个对象.如:DOM事件,window事件等,都会产生一个对象,该对象就是当前元素的事件对象. DOM事件对象 <body> <input type="button" value="按钮" id="btn" /> <!--js--> <script> var btn = document.getElementById("btn"); btn.onmouse

js中的Event对象

event代表事件的状态,例如触发event对象的元素,鼠标的位置及状态,按下的键等等 event对象只在事件发生的过程中才有效. <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function

现代事件处理程序和Event对象对浏览器兼容性的判断和解决

兼容性问题的解决: 因为 IE 和 DOM 对于现代事件处理程序指派的方式不同,为了保证我们编写的代码在 IE 和 DOM浏览器系列下都能用,我们可以用如下代码来解决兼容性问题: var fnClick1 = function() { aleart("我被点击了";) } var fnClick2 = function() { aleart("我也被点击了";) } var oDiv = document.getElementById("div1"

Node.js继承中的静态类对象(《node.js开发实战详解》书中一些错误的改正)

今天气真好,最近挂掉一些面试之后心情略失落. 神马都是浮云,要永远做好世界第二. 不多提了,你问我心态为啥变好了.-------都是情怀,,. 嗯啊,最近在研究node. 别人问?你这水平还node... 哈哈哈,好伤心.... 不多提了,言归正传. 神马模块化神马的先就不多讲了,就一个module.export和export区别,后者对象的属性属于前者,逆命题不成立. 还有util.inherits(A,B)这个API注意一下A只会继承B的原型方法,原型以外的不会继承.不是说原型中数据是共享的

第九课 事件的状态Event 对象

<ul> <li>1itme1</li> <li>2itme2</li> <li>3itme3</li> <li>4itme4</li> <li>5itme5</li> </ul> <script> var lis=document.getElementsByTagName("li"); for(var i=0;i<lis.l