jsDOM事件流

最新推荐文章于 2023-03-31 10:17:26 发布

你若盛开风景自来

最新推荐文章于 2023-03-31 10:17:26 发布

阅读量229

点赞数

分类专栏： js 前端文章标签：事件流

本文链接：https://blog.csdn.net/li1484155613/article/details/101390127

版权

js 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

前端

8 篇文章 0 订阅

订阅专栏

事件流表示的是从页面接收事件的顺序
事件冒泡：从当前触发的最里边的顺序向上冒泡
事件捕获：与事件冒泡完全相反

事件处理程序

<!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>
    <input type="button" value="按钮1" id="btn1" onclick="message()">
    <input type="button" value="按钮2" id="btn2">
    <input type="button" value="按钮3" id="btn3">
    <input type="button" value="按钮4" id="btn4">
<script>
    // 第一种  写在html里边
    function message(){
        alert('我被弹出来了，哈哈哈')
    }

    // //第二种  dom0级处理程序
    var btn2=document.getElementById("btn2")
     btn2.onclick=message
    // //删除事件
    btn2.onclick=null


    // //第三种   dom2级处理程序
    var btn3=document.getElementById("btn3")
    btn3.addEventListener("click",message,false)
      //删除事件
    btn3.removeEventListener("click",message,false)


    //第四种  ie事件处理程序(ie8及以下)
    var btn4=document.getElementById("btn4")
    btn4.attachEvent("onclick",message)

    //跨浏览器处理
    var eventTill={
        //添加事件
        addEvent:function(element,type,deal){
            if(element.attachEvent){
                element.attachEvent('on'+type,deal)
            }
            else if(element.addEventListener){
                element.addEventListener(type,deal,false)
            }
            else{
                element['on'+type]=deal
            }
        },
        //删除事件
        removeEvent:function(element,type,deal){
            if(element.attachEvent){
                element.detachEvent('on'+type,deal)
            }
            else if(element.addEventListener){
                element.removeEventListener(type,deal,false)
            }
            else{
                element['on'+type]=null
            }
        }
    }
    eventTill.addEvent(btn4,'click',message)
    eventTill.removeEvent(btn4,'click',message)
    
</script>
</body>
</html>

你若盛开风景自来

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jsDOM事件流

事件流表示的是从页面接收事件的顺序事件冒泡：从当前触发的最里边的顺序向上冒泡事件捕获：与事件冒泡完全相反事件处理程序<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev...
复制链接

扫一扫