JavaScript学习笔记13

于 2022-09-05 21:24:09 发布
阅读量343 收藏 1
点赞数
分类专栏： JS 文章标签： javascript 学习 前端
原文链接：https://www.bilibili.com/video/BV1Sy4y1C7ha?p=259&spm_id_from=333.880.my_history.page.click&vd_source=720efe45336d5eabd781d1ed31bafef8
版权

  • 目录

    事件对象

    e.target和this的区别

    e.type返回事件类型

    e.preventDefault()方法阻止默认行为。

    e.returnValue阻止默认行为

    return false也能阻止默认行为

    阻止事件冒泡

    标准写法：stopPropagation(）方法 ；

    e.cancelBubble = true;

    事件委托、事件代理（事件委派）

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

    鼠标事件

    禁止鼠标右键菜单contextmenu

    语法:document.addEventListener('contextmenu',function(e){e.preventDefault();})

    禁止鼠标选中(selectstart开始选中)

    语法：document.addEventListener('selectstart',function(e){e,preventDafult();})

    鼠标事件对象

    e.client x（y）鼠标在可视区的x与y坐标

    e.pagex（y）鼠标相对于文档页面的x与y坐标

    e.screenx（y）返回鼠标相对于电脑屏幕的x与y坐标

    跟随鼠标的图片案例

    常见键盘事件

    onkeyup:某个键盘按键被松开时触发

    onkeydown某个键盘按键被按下时触发

    onkeypress某个键盘被按下时触发（但是他不识别功能键，如ctrl，shift，箭头等）

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

  • 事件对象

    • event就是 事件对象，通常写在侦听器函数的小括号里面，当形参来看

    • 事件对象只有有了事件才会发生

    • 事件对象是系统给我们创建的，不需要传递参数

    • 事件对象是事件的一些列相关数据集合，跟时间相关。例如鼠标点击里面就包含了鼠标点击的坐标相关信息

    • 事件对象可以自己命名：event、evt、e

    • 事件对象有兼容性问题。IE678需要通过window.event

    • 解决兼容性问题e||window.event

    • 案例

      <!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>
        123
    </div>
    <script>
        var div = document.querySelector('div');
        //1.传统写法
        /* div.onclick = function (event) {//event就是一个事件对象，写到侦听器里面，当做形参来看
            console.log(event);
        } */
        //2.高级写法
        div.addEventListener('click', function (event) {
            console.log(event);
        })
    </script>

</body>

</html>

    • 结果

    • e.target和this的区别

      • e.target指向我们点击了哪个元素，就返回哪个元素（IE678不兼容）

      • this哪个元素绑定了点击事件，就返回哪个元素

      • currentTarget与this非常相似（IE678不兼容）

      • 案例

        <!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>123</div>
    <ul>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>
    <script>
        //1.e.target返回的是触发事件对象（元素）  this返回的是绑定事件对象（元素）
        var div = document.querySelector('div');
        div.addEventListener('click', function (e) {
            console.log(e.target);
            console.log(this);
        })
        //2.区别
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function (e) {
            //给ul绑定事件，那么无论点击哪个li，this都指向ul
            console.log(this);
            console.log(e.target);//此时如果点击li，则返回的是li
        })
    </script>

</body>

</html>

      • 结果

    • e.type返回事件类型

      • 就是什么样的事件触发了函数

    • e.preventDefault()方法阻止默认行为。

      • 让连接不跳转，提交按钮不提交

    • e.returnValue阻止默认行为

      • 这是一个属性

    • return false也能阻止默认行为

      • 但是return false后面的代码不在执行，而且只限于传统的注册方式

      • 案例

        <!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>123</div>
    <a href="http:/www.baidu.com">百度</a>
    <form action="http:/www.baidu.com">
        <input type="submit" name="sub" id="" value="提交">
    </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();//这是一个方法
        })
        /* //3.传统方式阻止默认行为
        a.onclick = function (e) {
            e.preventDefault;//这是一个方法
        }
        //4.考虑兼容性问题的传统方式阻止默认行为
        a.onclick = function (e) {
            e.returnValue;//这是一个属性
        }
        //5.return false阻止默认行为  
         */


    </script>

</body>

</html>

      • 结果

    • 阻止事件冒泡

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

      • 标准写法：stopPropagation(）方法 ；

        • stop停止，Propagation传播

      • e.cancelBubble = true;

        • cancel取消，bubble泡泡

      • 案例

        <!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 class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        //2.冒泡阶段  如果addEventListener第三个参数是false那么则处于冒泡阶段
        var son = document.querySelector('.son');
        son.addEventListener('click', function (e) {
            alert('son');
            e.stopPropagation();
        }, false);

        var father = document.querySelector('.father');
        father.addEventListener('click', function (e) {
            alert('father');
        }, false);

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

<body>
    <ul>
        <li>多云</li>
        <li>多云</li>
        <li>多云</li>
        <li>多云</li>
    </ul>
    <script>
        //给父节点添加一个侦听器，利用事件冒泡影响每个子节点
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function (e) {//点击li，但是li会有事件冒泡，会往上传给ul，ul会执行下面代码
            //alert('多云');
            e.target.style.backgroundColor = 'pink';
        })
    </script>

</body>

</html>

        • 结果

    • 鼠标事件

      • 禁止鼠标右键菜单contextmenu

        • 控制何时显示上下文菜单

        • 语法:document.addEventListener('contextmenu',function(e){e.preventDefault();})

      • 禁止鼠标选中(selectstart开始选中)

        • 语法：document.addEventListener('selectstart',function(e){e,preventDafult();})

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

</body>

</html>

        • 结果

         

    • 鼠标事件对象

      • event对象代表事件状态，跟事件相关的一系列信息集合

      • MouseEvent鼠标事件对象

      • KeyboardEvent键盘事件对象

      • e.client x（y）鼠标在可视区的x与y坐标

      • e.pagex（y）鼠标相对于文档页面的x与y坐标

      • e.screenx（y）返回鼠标相对于电脑屏幕的x与y坐标

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

</head>

<body>
    <script>
        document.addEventListener('click', function (e) {
            //1.client 鼠标在可视区的x与y坐标 ，不能根据滚动条显示坐标
            console.log(e.clientX);
            console.log(e.clientY);
            //2.page  相对于文档页面的x与y坐标 ,能根据滚动条显示坐标
            console.log(e.pageX);
            console.log(e.pageY);
            //3.screen 鼠标在电脑屏幕的x与y坐标
            console.log(e.screenX);
            console.log(e.screenY);
        })
    </script>

</body>

</html>

      • 结果

       

    • 跟随鼠标的图片案例

      • 鼠标移动事件：mousemove  只要鼠标移动1px，就会触发事件

      • 在页面中移动，给document注册事件

      • 图片要移动距离，而且不占位置，使用绝对定位

      • 核心原理：每次移动鼠标，会获得最新的鼠标坐标，把这个x坐标和y坐标作为图片的top值和left值

      • 注意：一定要给left和top拼接一个'px'单位

      • 如果想要鼠标在图片中间，则需要将图片往上（往左）走高度和宽度的一半

      • 案例

        <!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>
        img {
            position: absolute;
        }
    </style>

</head>

<body>
    <img src="images/maomi.jpg" alt="">
    <script>
        var pic = document.querySelector('img');
        document.addEventListener('mousemove', function (e) {
            //1.mousemove只要鼠标移动1px  就会触发事件
            // console.log(1);
            //2.得到最新鼠标坐标
            var x = e.pageX;
            var y = e.pageY;
            console.log('x坐标是' + x, 'y坐标是' + y);
            //3.一定要给left和top拼接'px'
            pic.style.left = x - 131 + 'px';//-131指图片往左走宽度的一半
            pic.style.top = y - 131 + 'px';//-131指图片往上走高度的一半

        })
    </script>

</body>

</html>

      • 结果

         

    • 常见键盘事件

      • onkeyup:某个键盘按键被松开时触发

      • onkeydown某个键盘按键被按下时触发

      • onkeypress某个键盘被按下时触发（但是他不识别功能键，如ctrl，shift，箭头等）

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

      • addEventListener不需要加on

      • onkeypress和前面2个的区别是，他不识别功能键

      • 案例

      • 结果

JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts

正在加载jjj
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Js-关于Js事件看这一篇就够了！
三季雨
01-06 846
Ⅰ- 壹 - 事件对象基础 1. js事件是事件驱动性语言，可分为系统派发事件，自定义派发事件 2. javascript 中事件分类有： MouseEvent（鼠标事件） InputEvent （input事件） KeyboardEvent（键盘事件） WheelEvent （滚轮事件） Event对象 FocusEvent对象 3. 各个事件中具备自身独立的属性， 比如clientX、clientY只属于mouseEvent；keyCode只属于KeyboardEvent等。 4. Event称为事
js鼠标键盘事件
qq_42800468的博客
08-01 1779
注mouseover与mouseenter都是鼠标经过时触发，mouseover在鼠标经过子元素时会触发（会冒泡），mouseenter只在自身盒子时会触发（不会冒泡）例如果父标签为绑定事件，有子标签，点击子标签，target返回的是子标签元素，this返回父标签元素。所以如果大标签包含小标签且两个标签都有事件时，捕获时先执行大标签元素的事件；冒泡时先执行小标签的事件。鼠标移入监听对象中，或者从监听对象的一个子元素移入另一个子元素中时触发该事件。返回触发事件的对象，而this返回绑定事件的对象。...
document.addEventListener
weixin_61151047的博客
12-15 1万+
document.addEventListener("事件名称", 函数, false); function 某函数(event){ // 方法执行 } addEventListener里最后一个参数决定该事件的响应顺序； document.addEventListener("事件名称", 函数, true): 如果为true时事件执行顺序为 addEventListener ---- 标签的onclick事件 ---- document.onclick 　 documen...
js-事件高级
qq_41670147的博客
11-30 220
注册事件（绑定事件） 1.1注册事件概述 给元素添加事件，称为注册事件或者绑定事件。 注册事件有俩种方式：传统方式和方法监听注册方式 传统注册事件 ● 利用on开头的事件 onclick ● <button onclick="alert('hi~')"></button> ● btn.οnclick=function(){}; 特点：注册事件的唯一性 同一个元素同一个事件只...
vue自定义鼠标右键组件
gongliming_qd的博客
04-21 746
全局屏蔽右键功能 App.vue mounted(){ window.addEventListener('contextmenu', (e)=>{ e.preventDefault(); }) } 右键菜单组件 <template> <div class="showRightMenu" ref="showRightMenu" > <div v-for="item in menuLi
javascript学习笔记
11-24
JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。更具体一点，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。因为他不需要在一个语言环境下运行，而只需要支持它的浏览器即可。它的主要...
Ruffy javascript 学习笔记
10-29
Ruffy javascript 学习笔记
JavaScript 学习笔记（十一）
10-29
继续学习的是document对象。
JavaScript学习笔记
06-23
本资源“JavaScript学习笔记”是为初学者精心准备的一份教程，旨在帮助你快速掌握JavaScript的基础知识，并解决在学习过程中可能遇到的问题。 1. **变量与数据类型**： JavaScript支持多种数据类型，包括基本类型...
最简单的禁用鼠标右键菜单---禁止鼠标选中
世界和我们都不该止步于此
04-15 706
//禁止鼠标右键菜单 document.addEventListener('contextmenu',(e)=> { e.preventDefault() }) //禁止鼠标选中 document.addEventListener('selectstart',(e)=> { e.preventDefault() }) 无非就是阻止了默认的行为
事件的委派（委托）
明日晴空的博客
05-03 3794
一、什么是事件的委派？ 事件的委派也叫事件代理，简单理解就是：原本是某个元素需要绑定的事件，现在将这个事件交给别的元素去做，正常我们把它交给父级元素，比如：原本是给li绑定点击事件，现在交给它父级ul绑定，利用冒泡原理，点击li的时候会触发ul的事件；二、事件委派有什么好处？ 1.提升性能： 比如要给100个li安装点击事件，正常我们会用for循环去个每个li安装，这样...
DOM（三）
qq_46150052的博客
11-03 185
事件高级 注册事件（绑定事件） 给元素添加事件，称为注册事件或者绑定事件。 注册事件有两种方式：传统方式和方法监听注册方式 传统注册方法： 利用 on 开头的事件 onclick <button onclick=“alert('hi~')”></button> btn.onclick = function() {} 特点： 注册事件的唯一性 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数 方法监听注册方式 w3c 标准 推荐方式 -add
HTML5事件——contextmenu 隐藏鼠标右键菜单
根是地下的枝
07-11 1万+
在window中单击右键或在Mac中Ctrl+单击时会触发contextmenu事件，通过取消其默认动作可以提供自定义事件。
Web-API-03：事件监听器
斜光的博客
04-14 797
1 事件监听器 addEventListener(type, listener[, options|useCapture]) type 表示时间名称 用字符串表示，并且不需要在前面加on listener 表示要执行的函数 最后一个参数默认为false ，true 为捕获执行 事件监听与事件绑定的区别 事件绑定类似于样式覆盖，只会绑定最后的事件 而同一个元素的事件监听按照从上到下按照顺序执行...
addEventListener()使用方法
搏·梦的博客
04-10 2万+
document.addEventListener() 方法用于向文档添加事件句柄，即事件监听。先看下面代码，稍后进行讲解。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body>...
js添加事件和移除事件:addEventListener()与removeEventListener()
热门推荐
Just do it
03-28 14万+
作用：      addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作。      它们都接受3个参数：事件名、事件处理的函数和布尔值。      布尔值参数是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。 示例： 环境：移动端，界面禁止触摸事件 要在bo
React 例子 - 右键菜单 context menu
博客已退休
11-20 1万+
代码并非原创，忘了从哪里找到的，如有人知道，可博客留言。 效果点击链接： https://codepen.io/Anyicheng2015/pen/jaayMw首先，你要对React有点了解。其次，你要明白HTML的事件处理机制。我先贴代码的框架，然后逐步完善。class ContextMenu extends React.Component { constructor(props) {
18.常见鼠标和键盘事件以及事件对象
Mr_LiuP的博客
02-23 1725
鼠标事件和键盘事件
JavaScript之事件类型（事件）
但愿人长久 千里共婵娟
04-15 3318
web浏览器发生的事件有很多类型，不同的事件类型包含不同的信息，“DOM3级”的事件类型大概有：UI事件、焦点事件、滚轮事件、文本事件、鼠标事件、键盘事件、合成事件、变动事件、变动名称事件等。
前端学习笔记 javascript
最新发布
08-31
对于前端学习笔记，我可以给你一些常见的主题和要点，帮助你开始学习前端开发。 1. HTML基础： - 了解HTML的基本结构和标签 - 学习如何创建和组织网页内容 - 掌握常用的HTML标签，如标题、段落、链接、图像等 2. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值