事件处理程序（IE事件流、事件捕获、事件冒泡与事件委托等）

最新推荐文章于 2022-10-05 10:55:01 发布

陈皮小桔

最新推荐文章于 2022-10-05 10:55:01 发布

阅读量404

点赞数

分类专栏：前端学习笔记文章标签： javascript

本文链接：https://blog.csdn.net/qq_40146447/article/details/106855453

版权

本文介绍了JavaScript中的事件处理，包括IE事件流的添加和移除事件方法，事件冒泡与事件捕获的概念，重点讨论了事件委托的原理和应用场景，并提供了Event对象的相关属性与方法，特别是针对IE8及以下浏览器的特性。

摘要由CSDN通过智能技术生成

一、IE事件流（IE事件处理程序）
1、添加事件

attachEvent()

语法：element.attachEvent(event,function)
功能：用于向指定元素添加事件句柄；
参数：
event:必须。字符串，指定事件名，必须加“on"前缀。
function:必须。指定事件触发时执行的函数。
2、移除事件

detachEvent()

语法：element.detachEvent(event,function)
功能：移除attachEvent()放法添加的事件句柄
参数：event:必须，字符串，要移除的事件名称。
function：必须。指定要移除的函数。

跨浏览器事件处理程序

<!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" content="ie=edge">
    <title>跨浏览器事件处理程序</title>
</head>
<body>
    <button id="myBtn">点击我</button>
    <script>
        //此代码可以兼容所有浏览器
    //addEventListener attachEvent
    var EventUtil = {
        addHandler:function(element,type,handler){
            //绑定事件
            //chrome,firefox.IE9等， addEventListener
            //IE8及IE8以下的浏览器，attachEvent
            if(element.addEventListener){
                element.addEventListener(type,handler,false);
            }else if(element.attachEvent){
                element.attachEvent("on"+type,handler);
            }else{
                element["on"+type] = null
            }
        },
        // removeHandler:function(element,type,handler){
        //     //移除事件
        //     //chrome,firefox.IE9等， removeEventListener
        //     //IE8及IE8以下的浏览器，detachEvent
        //     if(element.removeEventListener){
        //         element.removeEventListener(type,handler,false);
        //     }else if(element.detachEvent){
        //         element.detachEvent("on"+type,handler);
        //     }else{
        //         element["on"+type] = null
        //     }
        // }
    }
    var btn = document.getElementById("myBtn");
    var handler = function(){
        alert("Clicked");
    }
    EventUtil.addHandler(btn,"click",handler);
    // EventUtil.removeHandler(btn,"click",handler);
    </script>
</body>
</html>

二、事件冒泡与事件捕获

1、事件冒泡：先执行儿子，再执行父亲

<!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" content="ie=edge">
    <title>事件冒泡与事件捕获</title>
</head>
<body>
    <div id="uncle"></div>
    <div id="parent">
        <div id="child" class="child">点击儿子</div>
    </div>
    <script>
    //事件冒泡
    document.getElementById("parent").addEventListener("click",function(e){
        alert("parent事件被触发，"+this.id);
    })
    document.getElementById("child").addEventListener("click",function(e){
        alert("child事件被触发，"+th

最低0.47元/天解锁文章

陈皮小桔

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
事件处理程序（IE事件流、事件捕获、事件冒泡与事件委托等）

一、IE事件流（IE事件处理程序）1、添加事件attachEvent()语法：element.attachEvent(event,function)功能：用于向指定元素添加事件句柄；参数：event:必须。字符串，指定事件名，必须加“on"前缀。function:必须。指定事件触发时执行的函数。2、移除事件detachEvent()语法：element.detachEvent(event,function)功能：移除attachEvent()放法添加的事件句柄参数：event:必
复制链接

扫一扫

专栏目录