JavaScript事件对象.

最新推荐文章于 2024-09-16 08:47:17 发布

狗斯特里

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量157

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_37148270/article/details/105908852

版权

JavaScript事件对象

任何一个事件机制被触发时，都会产生一个事件对象，它记录事件发生的详细信息。比如触发事件的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态等。利用事件对象，可以对用户的操作进行个性化的响应，提供更优质的用户体验。
触发不同的事件产生的事件对象所包含的信息会有所不同，比如以下是事件对象中常用的关于鼠标的一些属性和方法：

属性	描述
altKey	返回当事件被触发时，”ALT” 是否被按下。
button	返回当事件被触发时，哪个鼠标按钮被点击。
clientX/clientY	返回当事件被触发时，鼠标指针在的水平/垂直坐标（相对于浏览器左上角，与滚动条无关）。
ctrlKey	返回当事件被触发时，”CTRL” 键是否被按下。
metaKey	返回当事件被触发时，”meta” 键是否被按下。
relatedTarget	返回与事件的目标节点相关的节点。
screenX/screenY	返回当某个事件被触发时，鼠标指针的水平/垂直坐标（相对于显示屏幕左上角，与滚动条无关）。
shiftKey	返回当事件被触发时，”SHIFT” 键是否被按下。

当然，在所有的事件对象里面都有一些共同的属性。

属性和方法	描述
bubbles	返回布尔值，指示事件是否是起泡事件类型。
cancelable	返回布尔值，为`true`时表明事件在调用`preventDefault()`后可以成功取消事件默认动作，默认值为`true`。
currentTarget	返回一个事件对象，并且正在执行这个对象监听器的回调函数。
composedPath()	返回事件传递路径上的所有节点列表（即节点的监听器回调函数会被调用），不过会排除某些特殊的节点，详情请参考[这里][1]。。
eventPhase	返回事件传递的当前阶段。0表示NONE，1表示捕获阶段，2表示目标阶段，3表示冒泡阶段。
target	返回触发此事件的元素（事件的目标节点）。
timeStamp	返回事件创建时间的时间戳，自世界标准时间1970年1月1号00:00:00以来的毫秒数。
type	返回当前 Event 对象表示的事件的名称,比如"click", “hashchange”, 或者 “submit”。
initEvent()	初始化新创建的 Event 对象的属性。
preventDefault()	通知浏览器不要执行与事件关联的默认动作。
stopImmediatePropagation()	取消事件的进一步捕获或冒泡，同时阻止任何事件处理程序被调用。比如用在目标阶段，一共有三个事件监听回调函数，但只想执行前面两次事件，就可以在第二个事件监听器的回调函数里调用，使用`stopPropagation()`没有此效果。
stopPropagation()	取消事件的进一步捕获或冒泡。
isTrusted	返回布尔值，为`true`表示事件是浏览器生成的。为 `false` 表示事件是由开发人员通过JavaScript创建的。
defaultPrevented	返回布尔值，为`true`时表明已阻止了事件默认动作。
composed	返回布尔值，根据事件被初始化的方式确定返回`true`或者`false`。

另外，还有部分是IE特有属性：

属性	描述
cancelBubble	想阻止事件冒泡，就把该属性设为 `true`，作用类似于`stopPropagation()`。
fromElement	对于 `mouseover` 和 `mouseout` 事件，`fromElement` 引用移出鼠标的元素。
keyCode	对于 `keypress` 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 `keydown` 和 `keyup`。
offsetX,offsetY	事件发生的位置在事件源元素的坐标系统中的 x 坐标和 y 坐标。
returnValue	如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为
srcElement	对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。
toElement	对于 `mouseover` 和 `mouseout` 事件，该属性引用移入鼠标的元素。
x,y	事件发生的位置的 x 坐标和 y 坐标，它们相对于用CSS动态定位的最内层包容元素。

根据之前的学习，写一个通用的跨浏览器的事件对象：

var EventUtil = {
        addEvent:function(el,type,fn){
            if(window.addEventListener){
                el.addEventListener(type,fn)
            }else if(window.attachEvent){
                el.attachEvent(type,fn);
            }else{
                el['on'+type] = fn;
            }
        },
        removeEvent:function(el,type,fn){
            if(window.addEventListener){
                el.removeEventListener(type,fn)
            }else if(window.attachEvent){
                el.detachEvent(type,fn);
            }else{
                el['on'+type] = null;
            }
        },
        stopPropergation:function(e){
            if(e.stopPropergation){
                e.stopPropergation();
            }else{
                e.cancelBubble = true;
            }
        },
        preventDefault:function(e){
            if(e.preventDefault){
                e.preventDefault();
            }else{
                e.returnValue = false;
            }
        },
        getTarget:function(e){
            return e.target||e.srcElement;
        },
        getEvent:function(e){
            return e?e:window.event;
        }
    }