事件详解及案例

最新推荐文章于 2024-09-30 15:23:15 发布

WangZhang_521

最新推荐文章于 2024-09-30 15:23:15 发布

阅读量193

点赞数

分类专栏： Web API 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/WangZhang_521/article/details/123521582

版权

Web API 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

01-注册事件两种方式

<!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>
    <button>传统注册事件</button>
    <button>方法监听注册事件</button>
    <button>ie9 attachEvent</button>
    <script>
        var btns = document.querySelectorAll('button');
        // 1.传统方式注册事件 无兼容性问题 
        // 同一个元素，同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
        btns[0].onclick = function() {
            alert('hi~');
        }
        btns[0].onclick = function() {
                alert('你好哇~');
            }
            // 2.事件侦听注册事件  有兼容性问题
            // (1) addEventListener 里面的事件类型必须是字符串 必定加引号 而且不带on
            // (2) 同一个元素 同一个事件可以添加多个侦听器(事件处理程序)
        btns[1].addEventListener('click', function() {
            alert('hello~');
        })
        btns[1].addEventListener('click', function() {
                alert('你好~');
            })
            // 3. attachEvent ie9以前的版本才支持 (非标准，生产环境下不建议使用) 了解
        btns[2].attachEvent('onclick', function() {
            alert(11);
        })
    </script>

</body>

</html>

02-删除事件

<!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>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        var divs = document.querySelectorAll('div');
        divs[0].onclick = function() {
                alert(11);
                //1.传统方式删除事件
                divs[0].onclick = null;
            }
            // 2.removeEventListener 删除事件
        divs[1].addEventListener('click', fn) //里面的fn 不需要调用加小括号

        function fn() {
            alert(22);
            divs[1].removeEventListener('click', fn);
        }
        // 3.detachEvent删除事件  （ie8以上浏览器版本显示不出，ie8以下版本才支持）
        divs[2].attachEvent('onclick', fn1);

        function fn1() {
            alert(33);
            divs[2].detachEvent('onclick', fn1);
        }
    </script>
</body>

</html>

03-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>DOM事件流三个阶段</title>
    <style>
        .father {
            overflow: hidden;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: pink;
            text-align: center;
        }
        
        .son {
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color: purple;
            line-height: 200px;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        // dom 事件流 三个阶段
        // 1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
        // 2. onclick 和 attachEvent（ie） 只能得到冒泡阶段。
        // 3. 捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段  document -> html -> body -> father -> son
        // var son = document.querySelector('.son');
        // son.addEventListener('click', function() {
        //     alert('son');
        // }, true);
        // var father = document.querySelector('.father');
        // father.addEventListener('click', function() {
        //     alert('father');
        // }, true);
        // 4. 冒泡阶段 如果addEventListener 第三个参数是 false或者省略 那么则处于冒泡阶段  son-> father -> body -> html -> document
        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son');
        }, false);
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        document.addEventListener('click', function() {
                alert('document');
            })
            // 实际开发中，我们很少使用事件捕获，我们更关注事件冒泡
    </script>
</body>

</html>

04-事件对象

<!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>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>123</div>
    <script>
        //事件对象
        var div = document.querySelector('div');
        div.onclick = function(e) {
                // console.log(e);
                // console.log(window.event);
                // e = e || window.event;
                console.log(e);

            }
            // div.addEventListener('click', function(event) {
            //         console.log(event);
            //     })
            // 1.event 就是一个事件对象，写到我们侦听函数的小括号里面 当形参看
            // 2.事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
            // 3. 事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息 比如 判断用户按下了哪个键
            // 4. 这个事件对象我们可以自己命名 比如 event 、 evt、 e
            // 5. 事件对象也有兼容性问题 ie678通过window.event 兼容性的写法  e = e || window.event;
    </script>
</body>

</html>

05-常见事件对象属性和方法

<!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>

    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>123</div>
    <ul>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>
    <script>
        // 常见事件对象的属性和方法
        // 1. e.target 返回的是触发事件的对象(元素) this返回的是绑定事件的对象(元素)
        // 区别：e.target 点击了哪个元素，就返回哪个元素     this 哪个元素绑定了这个点击事件，那么就返回谁
        var div = document.querySelector('div');
        div.addEventListener('click', function(e) {
            console.log(e.target);
            console.log(this);
        })
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
                //我们给ul 绑定了事件 那么this就指向ul
                console.log(this);
                console.log(e.currentTarget);
                //e.target 指向我们点击的对象 谁触发了这个事件 我们点击的是li e.target指向的就是li
                console.log(e.target);

            })
            // 以下是兼容性的处理(了解)
            // div.onclick = function() {
            //     e = e || window.event;
            //     var target = e.target || e.srcElement;
            //     console.log(target);
            // }

        // 2.了解 跟这个this 有个非常相似的属性 e.currentTarget 有兼容性问题，ie678不认识，会报错。实际开发中，不建议使用
    </script>
</body>

</html>

06-事件对象阻止默认行为

<!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>123</div>
    <a href="https://www.baidu.com/">百度</a>
    <form action="https://www.baidu.com/">
        <input type="submit" value="提交" name="sub">
    </form>
    <script>
        // 常见事件对象的属性和方法
        // 1.返回得到事件类型
        var div = document.querySelector('div');
        div.addEventListener('click', fn);
        div.addEventListener('mouseover', fn);
        div.addEventListener('mouseout', fn);


        function fn(e) {
            console.log(e.type);
        }
        // 2.阻止默认行为(事件) 让链接不跳转 或者让按钮不提交
        var a = document.querySelector('a');
        // a.addEventListener('click', function(e) {
        //         e.preventDefault(); // dom标准写法
        //     })
        // 3.传统的注册方式 
        a.onclick = function(e) {
            // 普通浏览器  e.preventDefault(); 方法
            // e.preventDefault();
            // 低版本浏览器  e.returnValue;  ie678 属性
            // e.returnValue;
            // 3.我们可以利用return false也能阻止默认行为 没有兼容性问题 特点：return 后面的代码不执行了，而且只限于传统的注册方式
            return false;
            alert(11);
        }
    </script>
</body>

</html>

07-阻止事件冒泡

<!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>
    <style>
        .father {
            overflow: hidden;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: pink;
            text-align: center;
        }
        
        .son {
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color: purple;
            line-height: 200px;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        //常见事件对象的属性和方法
        // 阻止冒泡方法一 stopPropagation dom推荐的标准  有兼容性问题 高版本浏览器支持
        var son = document.querySelector('.son');
        son.addEventListener('click', function(e) {
            alert('son');
            e.stopPropagation(); // stop停止 Propagation 传播
            e.cancelBubble = true; //阻止冒泡方法二  非标准  低版本浏览器支持

        }, false);
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        document.addEventListener('click', function() {
            alert('document');
        })
    </script>
</body>

</html>

08-事件委托

<!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>
    <!-- 点击每个小li都会弹出对话框，以前需要给每个li注册事件，是非常辛苦的，而且访问DOM的次数越多，这就会延长整个页面的交互就绪时间 -->
</head>

<body>
    <ul>
        <li>知否知否,点我应有弹框在手</li>
        <li>知否知否,点我应有弹框在手</li>
        <li>知否知否,点我应有弹框在手</li>
        <li>知否知否,点我应有弹框在手</li>
        <li>知否知否,点我应有弹框在手</li>
    </ul>
    <script>
        // 1.事件委托的原理(面试常考)
        // 不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点
        // 给ul注册点击事件，然后利用事件对象的target来找到当前点击的li,因为点击li,事件会冒泡到ul上，ul有注册事件，就会触发事件监听器
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            // alert('知否知否,点我应有弹框在手');
            // e.target 可以得到我们点击的对象
            e.target.style.backgroundColor = 'pink'; // 点击任意一个li 背景颜色编程粉色
        })
    </script>
</body>

</html>

09-常用鼠标事件

<!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>
    我是一段不愿分享的文字
    <script>
        // 1.禁用右键菜单 contextmenu
        document.addEventListener('contextmenu', function(e) {
                e.preventDefault();
            })
            // 2.禁止选中文字 selectstart
        document.addEventListener('selectstart', function(e) {
            e.preventDefault();
        })
    </script>
</body>

</html>

10-鼠标事件对象

<!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>
    <style>
        body {
            height: 3000px;
        }
    </style>
</head>

<body>
    <script>
        // 鼠标事件对象  MouseEvent
        document.addEventListener('click', function(e) {
            // 1.client 鼠标在浏览器可视区的x和y坐标
            console.log(e.clientX);
            console.log(e.clientY);
            console.log('-------------------------------------------------');
            // 2.page 鼠标在页面文档的x和y坐标
            console.log(e.pageX);
            console.log(e.pageY);
            console.log('-------------------------------------------------');
            // 3.screen 鼠标在电脑屏幕的x和y坐标
            console.log(e.screenX);
            console.log(e.screenY);



        })
    </script>
</body>

</html>

11-跟随鼠标的天使案例

<!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>
    <style>
        img {
            position: absolute;
        }
    </style>
    <!-- 案例分析 -->
    <!-- 1.鼠标不断地移动，使用鼠标移动事件：mousemove -->
    <!-- 2.在页面中移动，给document注册事件 -->
    <!-- 3.图片要移动距离，而且不占位置，要加绝对定位 -->
    <!-- 4.核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x和y坐标作为图片的top和left值就可以移动图片-->

</head>

<body>
    <img src="images/angel.gif" alt="">
    <script>
        var pic = document.querySelector('img'); //获取图片
        document.addEventListener('mousemove', function(e) {
            // 1.只要鼠标 移动1px, 就会触发这个事件
            console.log(1);
            // 2.核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x和y坐标作为图片的top和left值就可以移动图片
            var x = e.pageX;
            var y = e.pageY;
            console.log('x坐标是' + x, 'y坐标是' + y);
            // 3.千万不要给left和top加上单位
            pic.style.left = x - 50 + 'px'; //分别走图片高度和宽度的一半，让鼠标在图片中间
            pic.style.top = y - 40 + 'px';

        })
    </script>
</body>

</html>

效果展示

在这里插入图片描述

12-常用键盘事件

<!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>
    <script>
        //1.onkeyup 按键弹起的时候触发事件 两个方式 
        // document.onkeyup = function() {
        //         console.log('我弹起来了');
        //     }
        // document.addEventListener('keyup', function() {
        //         console.log('我弹起来了');
        //     })
        //2.onkeydown 按键按下的时候触发事件  
        // document.addEventListener('keydown', function() {
        //         console.log('我被按下了');r
        //     })
        //3.onkeypress 按键按下的时候触发事件 不识别功能键：ctrl,shift,箭头等 
        document.addEventListener('keypress', function() {
                console.log('我被按下了');
            })
            //4. 三个事件的执行顺序 keydown---keypress-keyup
    </script>
</body>

</html>

13-keyCode判断用户按下哪个键

<!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>keyCode判断用户按下哪个键</title>
</head>

<body>
    <script>
        // 键盘事件对象中的keyCode属性可以得到相应键的ASCII值，根据ASCII值可以知道用户按下了哪个键
        // 1.我们的keyup和keydown事件不区分字母大小写 a和A得到的都是65
        // 2.我们的keypress区分字母大小写 a是97 A是65
        document.addEventListener('keyup', function(e) {
            // console.log(e); // 可以得到事件对象是键盘
            console.log('up' + e.keyCode);
            // 我们可以利用keyCode返回的ASCII值来判断用户按下了哪个键
            if (e.keyCode === 65) {
                alert('您按下的是a键');
            } else {
                alert('您按下的不是a键');
            }
        })
        document.addEventListener('keypress', function(e) {
            // console.log(e); // 可以得到事件对象是键盘
            console.log('press' + e.keyCode);
        })
    </script>
</body>

</html>

14-模拟京东按键输入内容案例

<!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>
    <!-- 1.核心思路：检测用户是否按下s键，如果按下s键，光标就会定位到搜索框里面 -->
    <!-- 2.使用键盘事件对象里面的keyCode判断用户按下了哪个键 -->
    <!-- 3.搜索框获得焦点：使用js里面的focus() 方法-->

</head>

<body>
    <input type="text">
    <script>
        var search = document.querySelector('input');
        document.addEventListener('keyup', function(e) {
            //  console.log(e.keyCode); //得到s键的ASCII值83
            if (e.keyCode === 83) {
                search.focus();
            }

        })
    </script>
</body>

</html>

15-模拟京东快递单号查询

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .search {
            position: relative;
            width: 178px;
            margin: 100px;
        }
        
        .con {
            display: none;
            position: absolute;
            top: -40px;
            width: 171px;
            border: 1px solid rgba(0, 0, 0, .2);
            box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
            padding: 5px 0;
            font-size: 18px;
            line-height: 20px;
            color: #333;
        }
        
        .con::before {
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            top: 28px;
            left: 18px;
            border: 8px solid #000;
            border-style: solid dashed dashed;
            border-color: #fff transparent transparent;
        }
    </style>


</head>

<body>
    <div class="search">
        <div class="con">123</div>
        <input type="text" placeholder="请输入您的快递单号" class="jd">
    </div>
    <script>
        // 1.快递单号输入内容时， 上面的大号字体盒子（con）显示(这里面的字号更大）
        // 2.表单检测用户输入： 给表单添加键盘事件
        // 3.同时把快递单号里面的值（value）获取过来赋值给 con盒子（innerText）做为内容
        // 4.如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子
        // 5.注意：keydown和keypress在文本框里面的特点：他们两个事件触发的时候，文字还没有落入文本框
        // 6.keyup事件触发的时候，文字已经落入文本框里面了
        var con = document.querySelector('.con');
        var jd_input = document.querySelector('.jd');
        jd_input.addEventListener('keyup', function() {
                //console.log('输入内容');//检测用户是否输入内容
                if (this.value == '') {
                    con.style.display = 'none';
                } else {
                    con.style.display = 'block';
                    con.innerHTML = this.value;
                }
            })
            // 7.当我们失去焦点的时候，就隐藏这个con盒子
        jd_input.addEventListener('blur', function() {
                con.style.display = 'none';
            })
            // 8.当我们获得焦点的时候，先判断文本框里面有没有内容，如果有，就显示这个con盒子

        jd_input.addEventListener('focus', function() {
            if (this.value != '') {
                con.style.display = 'block';
            }
        })
    </script>
</body>

</html>