js事件概述

最新推荐文章于 2022-11-16 20:42:14 发布

原创最新推荐文章于 2022-11-16 20:42:14 发布 · 163 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #ViewUI

javascript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了JavaScript中事件处理的基本概念，包括事件冒泡及不同级别的事件处理方式，并通过实例展示了如何利用这些技术实现基本的拖拽效果。

1、js事件概述

事件冒泡：

添加事件的方式：

1）、html事件处理程序

2）、dom0级事件处理程序

3）、dom2级事件处理程序

4）、IE事件处理程序

var eventUtil = {
/*
* 功能：添加事件
* 参数：element dom元素
* 参数：type 事件类型(@example click)
* 参数： handler 事件处理函数
*/
addEvent:function(element, type, handler) {
    if(element.addEventListener) {//DOM2级事件处理
    element.addEventListener(type, handler, false);
}else if(element.attachEvent) {//IE事件处理
    element.attachEvent("on"+type, handler);
}else {//DOM0级事件处理
    element["on" + type] = handler;
}
},
/*
* 功能：删除事件
* 参数：element dom元素
* 参数：type 事件类型(@example click)
* 参数： handler 事件处理函数
*/
removeEvent:function(element, type, handler) {
    if(element.removeEventListener) {//DOM2级事件处理
        element.removeEventListener(type, handler, false);
    }else if(element.detachEvent) {//IE事件处理
        element.detachEvent("on"+type, handler);
    }else {//DOM0级事件处理
        element["on" + type] = null;
    }
},
/*
* 功能：获取事件对象(window.event是兼容IE的处理)
*/
getEvent:function(event) {
    return event?event:window.event;
},
/*
* 功能：获取事件类型
*/
getEventType:function(event) {
    return event.type;
},
/*
* 功能：获取产生事件的元素(event.srcElement是兼容IE的处理)
*/
getSrcElement:function(event) {
    return event.target || event.srcElement;
},
/*
 * 功能：阻止事件冒泡
 */
stopPropagation:function(event) {
    if(event.stopPropagation) {
        event.stopPropagation();
    }else {
        event.cancleBubble = true;//兼容IE的处理
    }
},
/*
 * 功能：阻止事件的默认行为
 */
preventDefault:function(event) { 
    if(event.preventDefault) {
        event.preventDefault();
    }else {
        event.returnValue = false;//兼容IE的处理
    }
}
}

2、实现拖拽效果

1)、鼠标相关事件

按下鼠标事件mousedown

移动鼠标事件mousemove

释放鼠标事件mouseup

划入鼠标事件mouseover

划出鼠标事件mouseout

点击鼠标事件click