事件处理与传播机制-优快云博客

本文介绍了事件处理的三种方式及事件传播的三个阶段，并详细解释了如何使用JavaScript添加和删除事件监听器，以及如何阻止事件传播和默认行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/*
    事件的分类：表单事件、window事件、鼠标事件、键盘事件等。

    注册事件的三种方式：
        1. HTML文档中作为元素的属性；
        2. JS中作为元素对象的属性（默认注册至冒泡阶段）；
        3. 给元素添加事件监听。

    事件传播的三个阶段：捕获、命中、冒泡，IE中只有冒泡。

    并非所有事件都有冒泡机制，比如focus、blur、scroll就没有。
 */
// 添加事件
function addEvent(target,type,handlerFun) { // target—要添加事件的元素；type—事件的类型；handlerFun—事件处理函数
    if(target.addEventListener){
        target.addEventListener(type,handlerFun,false);
    }else {
        target.attachEvent("on"+type,handlerFun);
    }
}

// 事件处理函数（异步执行）
// 事件处理函数的this在addEventListener中指向目标元素，在attachEvent中指向window对象
// 事件处理函数返回false，则对应的事件不会执行
function handlerFun(e) {
    var ev=e||window.event;
    var target=ev.target||ev.srcElement;
    //if(target.nodeName==="LI") // 判断目标元素的类型
    doSomething(target);

}
function doSomething(target) {
    //... 对目标元素进行操作
}

// 删除事件，参数与添加事件一样
function removeEvent(target,type,handlerFun) {
    if(target.removeEventListener){
        target.removeEventListener(type,handlerFun,false);
    }else{
        target.detachEvent(type,handlerFun);
    }
}

// 取消事件传播,在事件处理函数中调用。
// 如果子元素和父元素都在冒泡阶段注册了onclick事件，如果在子元素处理函数执行后取消事件，则父元素的onclick事件不会被执行。
function stopPropagation(e){
    if(e.stopPropagation){
        e.stopPropagation();
    }else{
        e.cancelBubble=true;
    }
}
// 取消事件的默认操作,在事件处理函数中调用。
// “事件默认操作”：比如<a>标签点击后会跳转到一个网址，取消事件默认操作就可以实现点击后出现我们自定义的行为
function preventDefault(e) {
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue=false;
    }
}