js 常见的事件

小鹿崽丫

已于 2022-12-07 17:10:44 修改

阅读量967

点赞数

文章标签： javascript

于 2022-03-18 21:55:22 首次发布

本文链接：https://blog.csdn.net/weixin_52104111/article/details/123584849

版权

常见事件分类

键盘事件: document.onkeydown

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .big {
        padding: 50px;
        background-color: pink;
    }

    .small {
        width: 50px;
        height: 50px;
        background-color: green;
    }
</style>

<body>
    <div class="big ">
        <div class="small"></div>
    </div>
    <script>
        document.onkeydown = function (e) {
            if (e.keyCode == 27) { // 按 Esc
                //要做的事情
                alert("esc按键")
            }
            if (e.keyCode == 13) { // enter 键
                //要做的事情
                alert("enter按键")
            }
            if (e.keyCode == 8) { // enter 键
                //要做的事情
                alert("backspace按键")
            }
        };
    </script>
</body>

</html>

鼠标事件：document.onkeydown = function

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .big {
        padding: 50px;
        background-color: pink;
    }

    .small {
        width: 50px;
        height: 50px;
        background-color: green;
    }
</style>

<body>
    <div class="big ">
        <div class="small"></div>
    </div>
    <script>
        document.onkeydown = function (e) {
            if (e.keyCode == 27) { // 按 Esc
                //要做的事情
                alert("esc按键")
            }
            if (e.keyCode == 13) { // enter 键
                //要做的事情
                alert("enter按键")
            }
            if (e.keyCode == 8) { // enter 键
                //要做的事情
                alert("backspace按键")
            }
        };
    </script>
</body>

</html>

浏览器滚动事件： window.onscroll

加：滚动事件性能优化(防抖，最后一次才触发)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取窗口滚动距离</title>
</head>

<body>
    <div style="height:1400px;width:30px;background:Red;"></div>
    <p>我在折呢</p>
    <p>我在折呢</p>
    <p>我在折呢</p>
    <p>我在折呢</p>
    <p>我在折呢</p>
    <p>我在折呢</p>
    <script>
        function debounce(func, wait) {
            if (typeof func !== 'function') {
                throw new TypeError('need a function arguments')
            }
            let timeid = null;
            let result;

            return function () {
                let context = this;
                let args = arguments;

                if (timeid) {
                    clearTimeout(timeid);
                }
                timeid = setTimeout(function () {
                    result = func.apply(context, args);
                }, wait);

                return result;
            }
        }
        window.onscroll = debounce(function () {
            console.log('scrollY', window.scrollY)
        },500)
        
    </script>
</body>

</html>

网页资源加载完事件: window.οnlοad=function

html标签加载完事件(图片，css，js资源没有加载完)：function load()

<html>
    <head>
        <meta charset="utf-8">
        <title>奔月教程(runoon.com)</title>
        <script>function load() {
                alert("页面已经载入！");
            }</script>
    </head>
    <body onload="load()">
        <h1>Hello World!</h1>
    </body>
</html>

======

事件扩散两者方式

冒泡，捕获

冒泡:之所以称之为事件冒泡是指事件的响应会像水泡一样上升至最顶级对象，当父div与子div共同加入了onclick事件时，当触发了子div的onclick事件后，子div进行相应的js操作。但是父div的onclick事件同样会被触发。这就造成了事件的多层并发，导致了页面混乱。这就是冒泡事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .big{
        padding:50px;
        background-color: pink;
    }
    .small{
       width: 50px;
       height: 50px;
        background-color: green;
    }
</style>
<body>
    <p>冒泡事件：点击小的div会触发大的div的事件</p>
    <div class="big ">
        <div class="small"></div>
    </div>
    <script>
        window.onload=function(){
            var big = document.querySelector('.big')
            var small = document.querySelector('.small')
            big.onclick=function(){
                alert('big')
            }
            small.onclick=function(){
                alert('small')
            }
        }
    </script>
</body>
</html>

捕获:事件捕获与冒泡恰恰相反，事件冒泡我们从字面意思理解就是当用户行为触发我们页面的定义好的事件后，会有一个由内到外的一个冒泡过程,当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .big{
        padding:50px;
        background-color: pink;
    }
    .small{
       width: 50px;
       height: 50px;
        background-color: green;
    }
</style>
<body>
    <p>阻止冒泡事件：点击小的div不会触发大的div的事件</p>
    <div class="big ">
        <div class="small"></div>
    </div>
    <script>
        //第三个参数默认是false，也就是默认冒泡的方式来扩散事件
        //如果是true就是捕获
        //冒泡：是子div的事件先执行
        //捕获：是父div事件先执行
        //onclick 绑定事件的方式，默认采用的是【冒泡】
        //onclick 绑定的方式可不可以修改事件扩散触发的方式呢？【不可以】
        window.onload=function(){
            var big = document.querySelector('.big');
            var small = document.querySelector('.small');
            big.addEventListener("click",function(e){
                alert('big')
            },true)
            small.addEventListener("click",function(e){
                alert('small')
            },true)
        }
    </script>
</body>
</html>

=======

阻止事件

阻止默认事件：e.preventDefault()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=a, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="https://www.baidu.com/" id="alink">百度</a>
    <script>
        window.onload=function(){
            var alink=document.querySelector("#alink");
            alink.onclick=function(e){
                e.preventDefault()
            }
        }
    </script>
</body>
</html>

阻止冒泡事件：e.stopPropagation()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .big{
        padding:50px;
        background-color: pink;
    }
    .small{
       width: 50px;
       height: 50px;
        background-color: green;
    }
</style>
<body>
    <p>阻止冒泡事件：点击小的div不会触发大的div的事件</p>
    <div class="big ">
        <div class="small"></div>
    </div>
    <script>
        window.onload=function(){
            var big = document.querySelector('.big');
            var small = document.querySelector('.small');
            big.onclick=function(){
                alert('big');
            }
            small.onclick=function(e){
                console.log('e',e)
                if(e.shiftKey){
                    alert('small按下了shift键');
                }else{
                    alert('small没有按下了shift键');
                }
                e.stopPropagation();
               
            }
        }
    </script>
</body>
</html>

添加事件绑定和移除事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .big{
        padding:50px;
        background-color: pink;
    }
    .small{
       width: 50px;
       height: 50px;
        background-color: green;
    }
    *{
        user-select:none;
    }
</style>
<body>
    <p>事件 添加和移除(可以多次添加)</p>
    <div>
        <button id="add">给绿色块加点击事件</button>
        <button id="remove">移除点击事件</button>
    </div>
    <div class="big ">
        <div class="small"></div>
    </div>
    <script>

        window.onload=function(){
            /***
             *   handlerFunArr,index 都是演示目的，不在学习范围内
             * 
             **/
           var handlerFunArr=[];
           var index=0;
           //因为addeventListenr add 同一个事件同一个函数只能添加一次
           //所以这里动态生成100个匿名函数，并存到数组里面
           for(let i=0;i<100;i++){
            handlerFunArr.push(function (){
                console.warn("我应该执行很多次的::"+i)
            });
           }
           console.log("生成了100个不同的函数",handlerFunArr)
            var small = document.querySelector('.small');
            //新增一个【点击事件】 点阅
            function add(){
                console.log("已经添加了一个事件")
                index++;
                small.addEventListener("click",handlerFunArr[index])
            }
            //移除一个 【点击事件】 订阅
            function remove(){
                small.removeEventListener("click",handlerFunArr[index])
                if(index>0){
                    index--;
                }
            }
            document.querySelector("#add").onclick=add;
            document.querySelector("#remove").onclick=remove;
         
        }
    </script>
</body>
</html>

小鹿崽丫

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js 常见的事件

在线效果常见事件分类键盘事件: document.onkeydown<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, i
复制链接

扫一扫