事件高级。

最新推荐文章于 2024-09-10 09:55:59 发布

热爱编程的花甜甜

最新推荐文章于 2024-09-10 09:55:59 发布

阅读量52

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/acsweetest/article/details/128503836

版权

本文介绍了JavaScript中的事件处理，包括使用addEventListener进行事件监听，解释了事件流的概念，展示了如何阻止默认行为和冒泡，详细讲解了事件委托。还探讨了鼠标事件，如禁止选中文字和右键菜单，以及实现鼠标跟随效果。最后讨论了键盘事件的keyup、keydown和keypress的区别及顺序。

摘要由CSDN通过智能技术生成

1.注册事件（绑定事件）

1.1注册事件概述

1.2addEventListener事件监听方式

eventTarget.addEventListener(type,listener[‘事件类型’,useCapturel])

 <button>1</button>
    <button>22</button>

    <script>
        var btns=document.querySelectorAll('button');
        //1.传统地方法注册事件
        btns[0].onclick=function(){
            alert('hi');
        }

        //2.事件侦听注册事件
        btns[1].addEventListener('click',function(){
            alert(22);
        })
    </script>

1.传统的方法具有唯一性，只能弹出一个对话框，且后面的会覆盖掉前面的

2.事件侦听不具有唯一性，可以弹出多个对话框，同一个元素同一个时间可以添加多个侦听器

3.DOM事件流

事件的一个传播过程

4.事件对象

阻止默认行为

阻止冒泡

事件委托

7.常用鼠标事件

7.1禁止选中文字和禁止右键菜单

7.2鼠标事件对象

   <script>
        //鼠标事件对象
        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>

7.3鼠标跟随案例

    <style>
        img {
            position: absolute;
            top: 2px;
            width: 90px;
        }
    </style>
</head>
<body>
    <img src="https://gd-hbimg.huaban.com/d9d607f5ed8fe9114c16cb649d258f13553d991613bcc-uDWpUV_fw658" alt="">

    <script>
        var pic=document.querySelector('img');
        document.addEventListener('mousemove',function(e){
            //1.mousemove只要我妈鼠标移动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加一个px单位
            pic.style.left=x-45+'px';
            pic.style.top=y-45+'px';
        })
    </script>

8.键盘事件

  <script>
        document.addEventListener('keyup',function(){
            console.log('我叹气了');
        })
        //2.keydown按键按下的时候触发
        document.addEventListener('keydown',function(){
            console.log('我按下了down');
        })

        //3.keypress按键按下的时候触发 不能识别功能键 比如ctrl shift 左右箭头等
        document.addEventListener('keypress',function(){
            console.log('我按下了press');
        })
    </script>

三个事件的执行顺序：keydown--keypress--keyup