JavaScript事件

最新推荐文章于 2025-02-19 09:09:27 发布

uncle_Huang

最新推荐文章于 2025-02-19 09:09:27 发布

阅读量116

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/uncle_Huang/article/details/97396262

前端专栏收录该内容

23 篇文章

订阅专栏

JavaScript事件初步认识

<!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>Document</title>
    <style>
    #box1{
        background-color: aquamarine;
        width: 400px;
        height: 200px;
    }
    </style>
</head>
<body>
    <input type="button" value="test1" onclick='alert("this is test1");'/>
    <input type="button" value="test2" onclick='test()'/>
    <input type="button" value="test3" id="btn1"/>
    <input type="button" value="test4" id="btn2"/>
    <input type="button" value="test5" id="btn3"/>
    <input type="button" value="test6" id="btn4"/>


    <div id="box1">
        <input type="button" value="test7" id="btn5"/>
    </div>
    <script>     
       function test(){
           alert("this is test2");
       }

    //    匿名函数
       var btn1=document.getElementById('btn1');
        btn1.onclick=function(){
            alert("this is test3");
        }
        
        var btn2=document.getElementById('btn2');
        function test1(){
            alert("this is test4");
        }
        btn2.onclick=test1;

        var btn3=document.getElementById('btn3');
        var count=0;
        btn3.onclick=function(){
            alert(count++);
            if(count==3){
                btn3.onclick=null;
            }
        }

        var btn4=document.getElementById('btn4');
        btn4.onclick=function(e){
            var e=e || window.event;
            // 跨浏览器兼容问题
            alert(e);
        }
        // btn4.οnclick=function(e){
        //     alert(e.type);
        // }
         

        // 冒泡排序 
        var btn5=document.getElementById('btn5');
        btn5.onclick=function(){
            alert("this is test6");
            //取消冒泡
            var e=e || window.event;
            //w3c取消冒泡
         //   e.stopPropagation();
            //e.cancelBubble=ture;
         //   alert(e.cancelBubble);
         if(typeof e.cancelBubble=='undefined'){
             e.stopPropagation();
         }else{
             e.cancelBubble=true;
         }
        }
        var box1=document.getElementById('box1');
        box1.onclick=function(){
            alert("this is test of box1");
        }
        document.body.onclick=function(){
            alert("this is test of body");
        }
        document.documentElement.onclick=function(){
            alert("this is test of documentElement");
        }
        document.onclick=function(){
            alert("this is test of document");
        }
 </script>
</body>
</html>

DOM2级事件绑定及移除

DOM2级事件定义了两个方法，用于添加事件和删除事件处理程序的操作：addEventListener()和removeEventListener()，所有DOM节点中都含有这两个方法，并且他们都接受3个参数，事件名、函数、冒泡或不活的布尔值（true表示捕获，false表示冒泡）。
IE事件处理程序，IE实现了DOM中的类似两个方法，attachEvent()和detachEvent()这两个方法接受相关的两个参数，时间处理程序名和事件处理程序函数，在IE8及之前的版本只支持事件冒泡。

绑定

<!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>Document</title>
    <style>
    #box1{
        background-color: aquamarine;
        width: 400px;
        height: 200px;
    }
    </style>
</head>
<body>
    <div id="box1">
        <input type="button" value="test1" id="btn1"/>
    </div>
    <script>  
        var btn1=document.getElementById("btn1");
        var box1=document.getElementById("box1");
        // btn1.addEventListener('click',function(){
        //     alert('button clicked');

        // },false);   
        btn1.addEventListener('click',function(e){
            alert('button clicked');
            var e=e || window.event;
            if(typeof e.cancelBubble=='undefined'){
                e.stopPropagation();
            }else{
                e.cancelBubble=true;
            }

        },true);   

        box1.addEventListener('click',function(){
            alert("div clicked");
        },false);

        document.body.addEventListener('click',function(){
            alert("body clicked");
        },false);

        document.documentElement.addEventListener('click',function(){
            alert("documentElement click");
        },false);

        document.onclick.addEventListener('click',function(){
            alert("click clicked");
        },false);    
 </script>
</body>
</html>

取消

<!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>Document</title>
    <style>
    #box1{
        background-color: aquamarine;
        width: 400px;
        height: 200px;
    }
    </style>
</head>
<body>
    <div id="box1">
        <input type="button" value="test1" id="btn1"/>
    </div>
    <script>
    var btn1=document.getElementById("btn1");
    var count=0;
    var hander=function(){
        alert(count++);
        if(count==3){
            alert('事件被取消');
            btn1.removeEventListener('click',hander,false);
        }
            }
    btn1.addEventListener('click',hander,false);  
 </script>
</body>
</html>