＜JavaScript＞DOM-事件监听

最新推荐文章于 2024-04-11 19:26:38 发布

BBBourne

最新推荐文章于 2024-04-11 19:26:38 发布

阅读量2.1k

点赞数 2

分类专栏：前端文章标签： javascript 开发语言 ecmascript

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/Jason6620/article/details/120920988

版权

前端专栏收录该内容

21 篇文章 1 订阅

订阅专栏

目录

1.什么是“事件监听”：用户与网页的交互动作，让HTML元素对动作做出反应

1.1 常见的鼠标、键盘、表单、页面事件监听

2.1 事件传播顺序：先从外到内(捕获阶段)，再从内到外(冒泡阶段)

2.2 addEventListener()方法，DOM2级事件监听

3.1 什么是事件对象：事件处理函数的一个形式参数，封装本次事件的细节

3.2 事件对象1：鼠标位置

3.3 e.charCode和e.keyCode属性（键盘）

3.3.1 键盘移动盒子例子

3.4 e.preventDefault() 阻止默认动作

3.4.1 只能输入小写字母和数字的文本框

3.4.2 鼠标滚轮事件

3.5 e.stopPropagation() 阻止事件传播

3.5.1 小案例：弹出层

4.1 引例：批量添加事件监听

4.2 引例：新增元素动态绑定事件

4.3 事件委托

4.3.1 e.target和e.currentTarget

1.什么是“事件监听”：用户与网页的交互动作，让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>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <div id="box"></div>

    <script>
        var oBox=document.getElementById('box');

        // 给这个盒子添加点击事件监听
        oBox.onclick=function(){
            alert('你好我是点击事件函数');
        };
    </script>
</body>
</html>

点击盒子即可触发

1.1 常见的鼠标、键盘、表单、页面事件监听

鼠标事件监听

键盘事件监听，注意onkeypress和onkeydown的区别，在于是否能监听系统按钮（比如上下左右、F1~12）

表单事件监听

页面事件监听

2.事件传播

2.1 事件传播顺序：先从外到内(捕获阶段)，再从内到外(冒泡阶段)

传播顺序分为捕获阶段和冒泡阶段，而onxxx的方法只能监听冒泡阶段

2.2 addEventListener()方法，DOM2级事件监听

<!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>
    <style>
        #box1{
            width: 202px;
            height: 202px;
            border: 1px solid #000;
            padding: 50px;
        }
        #box2{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            padding: 50px;
        }
        #box3{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2">
            <div id="box3">

            </div>
        </div>
    </div>

    <script>
        var oBox1=document.getElementById('box1');
        var oBox2=document.getElementById('box2');
        var oBox3=document.getElementById('box3');

        oBox1.addEventListener('click',function(){
            console.log('我是box1的捕获阶段')
        },true)
        oBox2.addEventListener('click',function(){
            console.log('我是box2的捕获阶段')
        },true)
        oBox3.addEventListener('click',function(){
            console.log('我是box3的冒泡阶段')
        },true)

        oBox1.addEventListener('click',function(){
            console.log('我是box1的冒泡阶段')
        },false)
        oBox2.addEventListener('click',function(){
            console.log('我是box2的冒泡阶段')
        },false)
        oBox3.addEventListener('click',function(){
            console.log('我是box3的捕获阶段')
        },false)


    </script>
</body>
</html>

3.事件对象

3.1 什么是事件对象：事件处理函数的一个形式参数，封装本次事件的细节

3.2 事件对象1：鼠标位置

代码例子：

<!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>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #box{
            width: 200px;
            height: 200px;
            background-color: #333;
            margin: 100px;
            padding: 50px;
        }
        body{
            height: 2000px;
        }
        #info{
            font-size: 30px;
        }
        p{
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="box">
        <p></p>
    </div>
    <div id="Info"></div>

    <script>
        var oBox=document.getElementById('box');
        var oInfo=document.getElementById('Info');

        oBox.onmousemove=function(e){
            oInfo.innerHTML='offsetX/Y:'+ e.offsetX + ',' + e.offsetY +'<br>'
                            + 'clientX/Y:' + e.clientX + ',' +e.clientY + '<br>'
                            + 'pageX/Y:' +e.pageX + ',' + e.pageY;
        };
    </script>
</body>
</html>

3.3 e.charCode和e.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>Document</title>
</head>
<body>
    <input type="text" id="field1">
    <h1 id="info1"></h1>
    <input type="text" id="field2">
    <h1 id="info2"></h1>

    <script>
        var oField1=document.getElementById('field1');
        var oInfo1=document.getElementById('info1');
        var oField2=document.getElementById('field2');
        var oInfo2=document.getElementById('info2');

        oField1.onkeypress=function(e){
            oInfo1.innerText='你输入的字符的字符码是'+e.charCode;
        }
        oField2.onkeydown=function(e){
            oInfo2.innerText='你按下的案件的键码是'+e.keyCode;
        }
    </script>
</body>
</html>

s后面我按下了方向右键，键码是39

3.3.1 键盘移动盒子例子

<!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>
    <style>
        #box{
            position: absolute;
            top: 200px;
            left: 200px;
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div id="box"></div>

    <script>
        var oBox=document.getElementById('box');

        var t=200;
        var l=200;
        // 监听document对象的键盘按下事件监听，表示当用户在整个网页上按下按键的时候
        document.onkeydown=function(e){
            switch(e.keyCode){
                case 37:
                    l-=3;
                    break;
                case 38:
                    t-=3;
                    break;
                case 39:
                    l+=3;
                    break;
                case 40:
                    t+=3;
                    break;
            }
            // 更改样式
            oBox.style.left=l+'px';
            oBox.style.top=t+'px';

        }

    </script>
</body>
</html>

按下上下左右可以移动盒子

3.4 e.preventDefault() 阻止默认动作

结合两个案例来理解：

3.4.1 只能输入小写字母和数字的文本框

<!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>
<body>
    <p>
        只能输入小写字母和数字：
        <input type="text" id="field">AAAAA
    </p>

    <script>
        var oField=document.getElementById('field');

        oField.onkeypress=function(e){
            console.log(e.charCode);
            // 根据用户输入的字符的字符码
            // 数字0-9 字符码48-57
            // 小写字母a-z，字符码97-122
            if(!(e.charCode>=48&&e.charCode<=57 || e.charCode>=97&&e.charCode<=122)){
                // 组织浏览器的默认行为
                e.preventDefault();
            }
        };

    </script>
</body>
</html>

3.4.2 鼠标滚轮事件

<!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>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: #333;
        }
        body{
            height: 2000px;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <h1 id="info">0</h1>

    <script>
        var oBox=document.getElementById('box');
        var oInfo=document.getElementById('info');

        var a=0;

        oBox.onmousewheel=function(e){
            // 阻止默认事件，当用户在盒子里滚动鼠标滚轮的时候，此时不会引发页面的滚动条滚动
            e.preventDefault();
            if(e.deltaY>0){
                a--;
            }else{
                a++;
            }
            oInfo.innerText=a;
        }
    </script>
</body>
</html>

在box内滚动鼠标滚轮会引起变化，box外则不会

3.5 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>
<body>
    <div id="box">
        <button id="btn"></button>
    </div>

    <script>
        var oBox=document.getElementById('box');
        var oBtn=document.getElementById('btn');

        // oBox.onclick=function(){
        //     console.log('我是盒子');
        // }
        // oBtn.onclick=function(e){
        //     // 阻止事件继续传播
        //     e.stopPropagation();
        //     console.log('我是摁钮');
        // }

        oBox.addEventListener('click',function(e){
            e.stopPropagation();
            console.log('我是盒子');
        },true);
        oBtn.addEventListener('click',function(){

            console.log('我是按钮');
        },true);
    </script>
</body>
</html>

阻止了向内部button的传播

3.5.1 小案例：弹出层

<!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>
    <style>
        .modal{
            width: 400px;
            height: 140px;
            background-color: #333;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -70px;
            margin-left: -200px;
            display: none;
        }
    </style>
</head>
<body>
    <button id="btn">弹出弹出层</button>
    <div class="modal" id="modal">

    </div>

    <script>
        var oBtn=document.getElementById('btn');
        var oModal=document.getElementById('modal');

        // 点击按钮时，显示弹出层
        oBtn.onclick=function(e){
            // 阻止事件继续传播到document上
            e.stopPropagation();
            oModal.style.display='block';
        };
        // 点击任何部分，弹出层关闭
        document.onclick=function(){
            oModal.style.display='none';
        };
        // 点击弹出层内部不能关闭
        oModal.onclick=function(e){
            e.stopPropagation();
        }
    </script>
</body>
</html>

4.事件委托

4.1 引例：批量添加事件监听

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="list">
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ul>

    <script>
        var oList=document.getElementById('list');
        var lis=oList.getElementsByTagName('li');
        // 批量给元素添加监听
        for(var i=0;i<lis.length;i++){
            lis[i].onclick=function(){
                this.style.color='red';
            }
        }
    </script>

</body>
</html>

4.2 引例：新增元素动态绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">点击我添加新的li列表项</button>
    <ul id="list">
        
    </ul>

    <script>
        var oBtn=document.getElementById('btn');
        var oList=document.getElementById('list');

        oBtn.onclick=function(){
            // 创建一个新的li列表项，孤儿节点
            var oLi=document.createElement('li');
            oLi.innerHTML='我是列表项';
            //上树
            oList.appendChild(oLi);
            // 给新创建的这个li结点添加conclick事件监听
            oLi.onclick=function(){
                this.style.color='red';
            }
        }
    </script>
</body>
</html>

4.3 事件委托

4.3.1 e.target和e.currentTarget

<!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>
<body>
    <button id="btn">点击创建一个新列表项</button>
    <ul id="list">
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ul>
    <script>
        var oList=document.getElementById('list');
        var oBtn=document.getElementById('btn');

        oList.onclick=function(e){
            e.target.style.color='red';
        }

        oBtn.onclick=function(){

            var oLi=document.createElement('li');

            oLi.innerText='新来的';

            oList.appendChild(oLi);
        }
    </script>
</body>
</html>

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
＜JavaScript＞DOM-事件监听

1.什么是“事件监听”：用户与网页的交互动作，让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,
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。