• 【JavaScript-事件】target和this的区别？如何阻止冒泡事件？常见的鼠标事件和键盘事件有哪些？

    • 💂 个人主页：Aic山鱼 

    •  个人社区：山鱼社区

    • 💬 如果文章对你有帮助，欢迎关注、点赞、收藏(一键三连)和订阅专栏

    目录

    前言

    1.e.target与this的区别

    2.阻止默认行为

    3.阻止冒泡事件*

    4.事件委托

    5.鼠标点击事件

    5.1鼠标事件禁止页面文本复制

    5.2鼠标点击获取坐标

    5.3鼠标跟随事件

    6.键盘事件

    总结

    前言

    在我们进行target和this的使用中如何区分this的指向问题呢？

    怎么才能阻止冒泡事件？

    在js中常用的鼠标事件和键盘事件，在实开发中会遇到很多的地方需要用到这些比如mousemove，keydown等，本篇就来了解一下这些吧！

    1.e.target与this的区别

    简单来说就是this指向的是绑定事件的元素，e.target返回的是所触发事件的元素

    1. <script>
    2.         // e.target返回的是触发事件的对象(元素)     this返回的是绑定事件的对象(元素)
    3.         var div = document.querySelector('div');
    4.         div.addEventListener('click', function (e) {
    5.             console.log(e.target);
    6.             console.log(this);
    7.         })
    8.         var ul = document.querySelector('ul');
    9.         ul.addEventListener('click', function (e) {
    10.             // e. target 指向我们点击的那个对象谁触发了这个事件我们点击的是li e. target 指向的就是1i
    11.             console.log(e.target);
    12.             // 绑定ul，那么this指向的就是我们所绑定的ul
    13.             console.log(this);
    14.         })
    15.     script>

    2.阻止默认行为

    1. <body>
    2.     <div>666div>
    3.     <a href="https://www.baidu.com/">666a>
    4.     <form action="https://www.baidu.com/">
    5.         <input type="submit" value="提交" name="sub">
    6.     form>
    7.     <script>
    8.         var div = document.querySelector('div');
    9.         div.addEventListener('click', fn);
    10.         div.addEventListener('mouseover', fn);
    11.         div.addEventListener('mouseout', fn);
    12.         function fn(e) {
    13.             console.log(e.type);
    14.         }
    15.         // e.preventDefault()该方法阻止默认事件(默认行为)标准比如不让链接跳转
    16.         var a = document.querySelector('a');
    17.         a.addEventListener('click', function (e) {
    18.             e.preventDefault();
    19.         })
    20.         // 利用return也能进行一个阻止默认事件 特点return后面的代码不执行 只能用于传统的方式哦
    21.         a.onclick = function (e) {
    22.             return false;
    23.         }
    24.     script>

    注意:return false;只能用在传统的方法上，并且它后面的代码不执行

    3.阻止冒泡事件*

    为什么要阻止冒泡事件？

    事件冒泡:开始时由最具体的元素接收,然后逐级向上传播到到DOM最顶层节点。

    事件冒泡本身的特性,会带来的部分坏处需要我们灵活使用。

    标准写法:利用事件对象里面的stopPropagation()方法

    1. <body>
    2.     <div class="father">
    3.         <div class="son">div>
    4.     div>
    5.     <script>
    6.             var son = document.querySelector('.son');
    7.             son.addEventListener('click', function (e) {
    8.                 alert('son');
    9.                 e.stopPropagation();
    10.             }, false);
    11.         
    12.             var father = document.querySelector('.father');
    13.             father.addEventListener('click', function () {
    14.                 alert('father')
    15.             }, false);
    16.         script>
    17. body>

    4.事件委托

    原理：不给每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点。

    1. <body>
    2.     <ul>
    3.         <li>小li小li，漂亮的lilili>
    4.         <li>小li小li，漂亮的lilili>
    5.         <li>小li小li，漂亮的lilili>
    6.         <li>小li小li，漂亮的lilili>
    7.         <li>小li小li，漂亮的lilili>
    8.     ul>
    9.     <script>
    10.         // 事件委托的核心原理:给父节点添加侦听器，利用事件冒泡影响每一个子节点
    11.  
    12.         var ul = document.querySelector('ul');
    13.         ul.addEventListener('click', function (e) {
    14.             e.target.style.backgroundColor = 'chartreuse';
    15.         })
    16.     script>
    17. body>

    5.鼠标点击事件

    5.1鼠标事件禁止页面文本复制

    contextmenu主要控制应该何时显示上下文菜单,主要用于程序员取消默认的上下文菜单

    禁止选中文字selectstart

    1. <body>
    2.     我的地盘我做主！
    3.     <script>
    4.         // 1. contextmenu 我们可以禁用右键菜单
    5.         document.addEventListener('contextmenu', function (e) {
    6.             e.preventDefault();
    7.         })
    8.         // 2.禁止选中文字selectstart
    9.         document.addEventListener('selectstart', function (e) {
    10.             e.preventDefault();
    11.         })
    12.  
    13.     script>
    14. body>

    5.2鼠标点击获取坐标

    1. <body>
    2.     <script>
    3.         document.addEventListener('click', function (e) {
    4.             // client返回鼠标相对于浏览器窗口可视区的坐标
    5.             console.log(e.clientX);
    6.             console.log(e.clientY);
    7.             // page返回鼠标相对于文档页面的坐标
    8.             console.log(e.pageX);
    9.             console.log(e.pageY);
    10.             // screen返回鼠标相对于电脑屏幕的X坐标
    11.             console.log(e.screenX);
    12.             console.log(e.screenY);
    13.         })
    14.     script>
    15. body>

    5.3鼠标跟随事件

    注：不要忘记给img一个绝对定位哦

    1. <style>
    2.         img {
    3.             position: absolute;
    4.             top: 20px;
    5.             width: 80px;
    6.             height: 80px;
    7.         }
    8.     style>
    9. head>
    10.  
    11. <body>
    12.     <img src="./img/shanyu.jpg" alt="">
    13.     <script>
    14.         var pic = document.querySelector('img');
    15.         document.addEventListener('mousemove', function (e) {
    16.             // 1.mousemove只要鼠标移动1px就会触发这个事件
    17.             var x = e.pageX;
    18.             var y = e.pageY;
    19.             pic.style.left = x - 30 + 'px';
    20.             pic.style.top = y - 30 + 'px';
    21.         })
    22.     script>
    23. body>

     

     

    6.键盘事件

     使用addEventListener不需要加on

    1. <body>
    2.     <script>
    3.         // 这三个的执行顺序为down press up
    4.         document.addEventListener('keyup', function () {
    5.             console.log('弹起来！');
    6.         })
    7.         //2. keydown 按键按下的时候触发不识别功能键比如ctrl shift 左右箭头啊
    8.         document.addEventListener('keydow', function () {
    9.             console.log('把down按下去！');
    10.         })
    11.         //2. keypress 按键按下的时候触发不识别功能键比如ctrl shift 左右箭头啊
    12.         document.addEventListener('keyup', function () {
    13.             console.log('把press按下去！');
    14.         })
    15.     script>
    16. body>

    总结

     

     点赞👍：您的赞赏是我前进的动力！
    收藏⭐：您的支持我是创作的源泉！
    评论✍：您的建议是我改进的良药！
    山鱼🦈社区:欢迎大家加 山鱼社区  ！

  • 相关阅读:
    什么时候不要采用微服务架构
    神经网络训练不起来，怎么办？
    VLAN原理和配置，交换机创建vlan的多种方法、三种接口模式的作用和配置方法、Access、Trunk、Hybrid接口的特性以及配置方法和命令
    idea中th:onclick报错问题最终解决办法
    JDK8使用Optional避免NullPointerException
    计算机基础（五）——Linux的bash.shell,help,man命令
    2024 Web 新特性 - 使用 Popover API 创建弹窗
    【项目经验】elementui--table表格自定义表头及bug
    MapReduce基础学习【博学谷学习记录】
    【代码随想录】二刷-字符串
  • 原文地址：https://blog.csdn.net/zhaochen1127/article/details/126881095