事件（鼠标事件、事件处理模型、事件对象）

最新推荐文章于 2023-09-17 15:44:32 发布
最新推荐文章于 2023-09-17 15:44:32 发布
阅读量1k 收藏 3
点赞数
分类专栏： JavaScript 文章标签： 事件（鼠标事件、事件处理模型、事件对象）
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44607694/article/details/95466014
版权

鼠标事件

鼠标点击左键 并且鼠标抬起时触发

var oBox = document.getElementById('box');
        oBox.onclick = function(){//DOM0级事件
            console.log('我被点击了');
        };

鼠标右键点击了6下在这里插入图片描述

鼠标的任意键在按下时会触发

var oBox = document.getElementById('box');
        oBox.onmousedown = function(){//DOM0级事件
            console.log('鼠标在oBox上按下了，我检查到了');
        };

鼠标的任意键按了6下在这里插入图片描述

任意键是：左键，右键，中键（滚轮）

鼠标的任意键在按下时 并且抬起来时会触发

var oBox = document.getElementById('box');
        oBox.onmouseup = function(){//DOM0级事件
            console.log('鼠标在oBox上按下了，我检测到了');
        };

鼠标的任意键点击了23下在这里插入图片描述

onclick （鼠标左键点击一次）= onmousedown （鼠标任意键按下一次）+ onmouseup（鼠标任意键抬起一次）

当鼠标右键按下 并且抬起时触发

var oBox = document.getElementById('box');
        oBox.oncontextmenu = function(){//DOM0级事件
            console.log('鼠标右键点击了，我检测到了');
        };

鼠标的右键按了5下在这里插入图片描述

当鼠标进入到dom节点内部 就会触发事件处理函数

var oBox = document.getElementById('box');
        oBox.onmouseenter = function(){//DOM0级事件
            console.log('鼠标进来了，我检测到了mouseenter');
        };

鼠标进入oBox元素内部10会触发了10事件处理函数在这里插入图片描述
当鼠标进入到dom节点内部 就会触发事件处理函数

 var oBox = document.getElementById('box');
        oBox.onmouseover = function(){
            console.log('鼠标进来了，我检测到了mouseover');
        };

鼠标进入oBox元素内部6会触发了6次事件处理函数
在这里插入图片描述
当鼠标离开到dom节点内部 就会触发事件处理函数

 var oBox = document.getElementById('box');
        oBox.onmouseleave = function(){//DOM0级事件
            console.log('鼠标离开了，我检测到了  mouseleave');
        };

鼠标离开了oBox元素5会触发了5次事件处理函数
在这里插入图片描述
当鼠标离开到dom节点内部 就会触发事件处理函数

var oBox = document.getElementById('box');
        oBox.onmouseout = function(){
            console.log('鼠标离开了，我检测到了  mouseout');
        };

鼠标离开了oBox元素7会触发了7次事件处理函数
在这里插入图片描述
onmouseenter <–> onmouseleave 这是一组，鼠标进去元素时触发

onmouseover <–> onmouseout 这也是一组，鼠标离开元素时触发

当鼠标在dom节点内部移动时 就会持续触发事件处理函数

var oBox = document.getElementById('box');
        oBox.onmousemove = function(){
            console.log('鼠标在oBox里面移动了，我检测到了');
        };

鼠标在oBox元素上移动了21回在这里插入图片描述

事件处理模型

        #big{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        #small{
            width:200px;
            height: 200px;
            margin-left: 400px;
            background-color: blue;
        }

 <div id="big">
         <div id="small"></div>
     </div>
    <script>
        var oBig = document.getElementById('big');
        var oSmall = document.getElementById('small');
        oSmall.addEventListener('click',function(){
            console.log('small,被点击了');
        },false);
        oBig.addEventListener('click',function(){
            console.log('big,被点击了');
        },false);//事件监听器的第三个参数不写默认是false
    </script>

在这里插入图片描述
在这里插入图片描述

什么是事件处理模型？？

当一个dom节点触发事件后，该事件会按照HTML结构在根节点和这个元素节点之间传播，路径上所有的节点都会收到该事件

那为什么点击蓝色区域会触发粉丝区域的事件处理函数呢？？？（事件冒泡阶段）

当我们点击蓝色盒子，会触发蓝色盒子的点击事件。当触发了点击事件，这个事件会按照HTML结构在根节点和这个元素节点之间传播，路径上所有的节点都会收到该事件

什么意思呢？？？在这里插入图片描述

当前蓝色盒子是small，点击small他会触发small的点击事件，small会找到他的父级big，big也会收到了点击事件，然后有因为big在JS中也添加了一个事件监听器监听一下click事件

因为事件传播机制，他是从small监听一下有没有点击事件，有就会传播到big没有就不会，然后监听了big有没有点击事件，然后监听出来有点击事件就会触发big的点击事件 （没有事件就不会触发，如果父级有点击事件那么，子级也会传播上父级的点击事件）

因为事件是从small开始往上冒泡，冒到big在冒到body在冒到html在冒到根节点document，这就叫做事件的冒泡（从small–>big–>body>html>document从子级冒到父级）

那么个body一个点击事件呢？？

        var oBig = document.getElementById('big');
        var oSmall = document.getElementById('small');
        oSmall.addEventListener('click',function(){
            console.log('small,被点击了');
        },false);
        oBig.addEventListener('click',function(){
            console.log('big,被点击了');
        },false);
        document.body.addEventListener('click',function(){
            console.log('document.body 被点击了');
        },false);

在这里插入图片描述
为什么点击一个small出来了big和document.body？？

点击蓝色的盒子，small肯定会触发他的点击事件处理函数，然后他会冒泡冒到他的父级big肯定会监听到他的事件处理函数，任何在冒泡到他的父级body肯定会监听到他的事件处理函数，然后冒泡到html，html没有点击事件处理函数那么肯定不会冒泡到html了

事件的冒泡就像河里面的鱼一样吐泡泡会往上吐泡泡，事件的冒泡就会往父级上找（false是指事件冒泡）

总结：

事件冒泡(默认是false)：事件从dom节点开始传递到根节点 ==> 从下到上 （HTML的层级顺序）

那事件捕获的传播机制是什么呢？？ （事件获取阶段）

        var oBig = document.getElementById('big');
        var oSmall = document.getElementById('small');
        oSmall.addEventListener('click',function(){
            console.log('small,被点击了');
        },true);
        oBig.addEventListener('click',function(){
            console.log('big,被点击了');
        },true);
        document.body.addEventListener('click',function(){
            console.log('document.body 被点击了');
        },true);

在这里插入图片描述
在这里插入图片描述那这个是什么意思呢？？

因为把事件监听的第三个参数全换成了true，所有这3个回调函数都进入了事件捕获阶段

点里蓝色，因为第三个参数写的是true进入了事件捕获阶段，所以会从document—>html–>body–>big–>small，是跟上回的结果到过来的

因为事件监听器第3个参数写了true，所有都在事件捕获阶段会触发。

事件捕获是：（捕获了document事件–>捕获了html事件–>捕获了bdoy事件–>捕获了big事件–>捕获了samll事件）没有事件就不会捕获直接跳过（点击谁就捕获谁，不会往下捕获）

true和false表示事件处理函数在什么阶段（时候）会触发

  • false 表示事件处理函数在冒泡阶段会触发
  • true 表示事件处理函数在捕获阶段会触发

总结：

事件捕获（true）：事件从根节点开始传递到dom节点 ==> 从上到下（HTML的层级顺序）

例子：

var oBig = document.getElementById('big');
        var oSmall = document.getElementById('small');
        oSmall.addEventListener('click',function(){
            console.log('small,冒泡阶段，我被点击了');
        },false);
        oBig.addEventListener('click',function(){
            console.log('oBig,冒泡阶段，我被点击了');
        },false);
        document.body.addEventListener('click',function(){
            console.log('document.body,冒泡阶段，被点击了');
        },false);
        oSmall.addEventListener('click',function(){
            console.log('small,捕获阶段，我被点击了');
        },true);
        oBig.addEventListener('click',function(){
            console.log('big,捕获阶段，被点击了');
        },true);
        document.body.addEventListener('click',function(){
            console.log('document.body，捕获阶段，被点击了');
        },true);

在这里插入图片描述
事件处理模型的顺序：先捕获阶段在冒泡阶段

点击的蓝色盒子不属于冒泡阶段和捕获阶段而是属于，事件触发。
如果点击的事件有冒泡阶段和捕获阶段，那么JS会看你的书写顺序那个靠前就会先执行谁，然后在执行另一个
在这里插入图片描述
事件处理模型是用来描述：他是事件捕获还是事件冒泡处理对应的事件处理函数的，监听器第3个参数的true和false规定了你的点击事件什么时候触发

当以没有点击一个点击事件时，false和true规定里面的回调函数触发的时间，但是当你真正点击一个元素时true和false没有任何意义（就看你的代码那个靠前就先执行谁）

那DOM0级事件在事件处理模型的顺序是？？

var oBig = document.getElementById('big');
        var oSmall = document.getElementById('small');
        oBig.onclick = function(){
            console.log('oBig，DOM0级事件');
        };
        oBig.addEventListener('click',function(){
            console.log('oBig,冒泡阶段，我被点击了');
        },false);5
         document.body.addEventListener('click',function(){
             console.log('document.body 捕获阶段被点击了');
         },true)
        document.body.addEventListener('click',function(){
            console.log('document.body,冒泡阶段，被点击了');
        },false);6
        oSmall.onclick = function(){
            console.log('oSmall,DOM0级事件');
        };

在这里插入图片描述
这些DOM0级事件都相当于false（在冒泡阶段定义了回调函数）都会在冒泡阶段触发的

结论：DOM0级事件都是在冒泡阶段触发

捕获阶段和冒泡阶段解析突图2个
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

事件对象

       #big{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        #small{
            width:200px;
            height: 200px;
            margin-left: 400px;
            background-color: blue;
        }
        <div id="big">
             <div id="small"></div>
        </div>

 var oSmall = document.getElementById('small');
        oSmall.onclick = function(){
            console.log('heaven');
        };

在这里插入图片描述鼠标点击了3下

其实每一次给元素绑定一个对应的事件处理函数的时候，JS的内部程序他都会偷偷地往这个事件处理函数中传一个东西，这就是事件对象

什么是事件对象？？？

当dom节点的事件被触发时，系统会向事件处理函数中传入一个对象，这个对象记录了事件触发时的重要信息，例如触发时的鼠标位置等等

那么怎么获取事件对象？？

在IE8以上的高版本怎么获取事件对象？？（IE8以上）

 var oSmall = document.getElementById('small');
        oSmall.onclick = function(e){//e是自定义的名字
            console.log(e);
        };//IE8以上高本版可以自定义对象名

在这里插入图片描述
对象：花括号开始，花括号结束，这个事件对象记录着事件触发时的重要信息

当dom节点的事件被触发时，系统会向事件处理函数中传入一个对象，这个对象一般用e/event来表示

在IE的低版本中 window.event 存储着事件对象（IE8以下）

 var oSmall = document.getElementById('small');
        oSmall.onclick = function(){
            console.log(window.event);
        }

其他在事件对象上的操作和IE8以上的高版本一致
在这里插入图片描述
那么该兼容高版本和低版本的获取事件对象呢？？

var oSmall = document.getElementById('small');
        oSmall.onclick = function(e){
            console.log(e = e||window.event);
        }//e = e||window.event方法兼容高低版本的浏览器

e = e||window.event方法兼容高低版本的浏览器
在这里插入图片描述
在这里插入图片描述
事件对象上储存的常用信息

e.clientX 鼠标距离浏览器左上角的水平距离 和 e.clientY 鼠标距离浏览器左上角的竖直距离

var oSmall = document.getElementById('small');
        oSmall.onclick = function(e){
            console.log(e.clientX,e.clientY);
        };

在这里插入图片描述水平位置= 480 ，垂直位置= 115

e.offsetX 鼠标距离自身元素左上角的水平距离 和 e.offsetY 鼠标距离自身元素左上角的竖直距离

 var oSmall = document.getElementById('small');
        oSmall.onclick = function(e){
            console.log(e.offsetX,e.offsetY);
        }

在这里插入图片描述水平位置= 76 ，垂直位置= 55

e.layerX 鼠标距离有定位属性父级元素的左上角的水平距离 和 e.layerY 鼠标距离有定位属性父级元素的左上角的竖直距离（没有定位默认浏览器左上加的位置）

       #big{
            position: absolute;
            left: 20px;top: 20px;
            width: 300px;
            height: 300px;
            background-color: pink;
        }

 var oSmall = document.getElementById('small');
        oSmall.onclick = function(e){
            console.log(e.layerX,e.layerY);
        }

在这里插入图片描述水平位置= 577 ，垂直位置= 179

e.screenX 鼠标距离电脑左上角的水平距离 和 e.screenY 鼠标距离电脑左上角的竖直距离

var oSmall = document.getElementById('small');
        oSmall.onclick = function(e){
            console.log(e.screenX,e.screenY);
        }

在这里插入图片描述水平位置= 1052 ，垂直位置= 204

事件对象上储存的常用信息对比图
在这里插入图片描述

巧克力很苦
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
kotlion 实现android外设输入（二）——获取鼠标输入
weixin_44259356的博客
09-06 572
kotlion 实现android外设输入（二）——获取鼠标输入 外设连接监听见我的上一篇 kotlion 实现android外设输入（一）——外设连接监听 https://blog.csdn.net/weixin_44259356/article/details/100522870 说明注释里基本都有，直接上代码 TEXT_ID.setOnGenericMotionListener { ...
彻底理解面向对象，看完这一篇就够了
weixin_57174474的博客
08-04 2439
面向对象(Object Oriented)是软件开发方法，一种编程范式。面向对象的概念和应用已超越了程序设计和软件开发，扩展到如数据库系统、交互式界面、应用结构、应用平台、分布式系统、网络管理结构、CAD技术、人工智能等领域。面向对象是一种对现实世界理解和抽象的方法，是计算机编程技术发展到一定阶段后的产物。 想要了解更多面向对象，就来智一面吧： 了解更多 一、基本概念 对象的含义是指具体的某一个事物，即在现实生活中能够看得见摸得着的事物。在面向对象程序设计中，对象所指的是计算机系统中的某一...
面向对象的三大特征
flylr^的博客
05-08 4864
面向对象的三大特征
面向对象的三个基本特征
热门推荐
ztj111的专栏
10-29 14万+
面向对象的三个基本特征是：封装、继承、多态。封装封装最好理解了。封装是面向对象的特征之一，是对象和类概念的主要特性。封装，也就是把客观事物封装成抽象的类，并且类可以把自己的数据和方法只让可信的类或者对象操作，对不可信的进行信息隐藏。继承面向对象编程 (OOP) 语言的一个主要功能就是“继承”。继承是指这样一种能力：它可以使用现有类的所有功能，并在无需重新编写原来的类的情况下
事件（鼠标、键盘）、事件监听、事件委托
CIA的博客
08-30 206
事件与事件对象 事件：对某个元素的某种操作 事件三要素 事件元素（DOM节点） 事件类型 事件对象event 拥有处理该类型事件的属性和方法 事件对象为非必需的 鼠标事件对象：坐标 键盘事件对象：录入的数据 事件对象的兼容性 document.onclick=function(evt){ var e=evt | | event; } 实参由系统传递，需要事件触发（鼠标，键盘）产生 案例：老虎跳 元素在页面发生位移，改变left和top 位置
vue事件(事件指令、事件对象、事件修饰符)
此鱼非闲鱼也的博客
04-22 1245
vue事件 1、事件指令： 两种写法： (1) v-on:事件名.修饰符="执行的函数名或表达式" (2) @事件名="执行的函数名或表达式" 注意: (1) 事件执行的函数，需要在methods中定义，即函数都存放在methods中 (2) 事件绑定时，vue中函数名后有无小括号都可以调用，加小括号是为了传参使用。 在普通js函数中，加小括号是调用此函数 (3) this指向...
js 鼠标事件的抓取
10-29
1. **DOM（Document Object Model）**：即文档对象模型，是HTML和XML文档的API。它定义了访问和修改文档的标准方法。 2. **鼠标事件**：指用户与网页元素交互时触发的一系列事件，包括但不限于点击（click）、双击...
js捕获鼠标滚轮事件代码
10-26
在处理用户交互时，捕获鼠标滚轮事件是实现动态效果和提升用户体验的重要手段。本文将深入探讨如何使用JavaScript捕获鼠标滚轮事件，并通过一个实例来展示其实现过程。 首先，我们要了解JavaScript事件处理机制。在...
shubiao.rar_java 鼠标事件
09-19
事件处理遵循"事件冒泡"或"事件捕获"模型，取决于使用的事件模型。在Swing中，默认使用事件冒泡，即事件会从最深的组件向上冒泡到容器。 总结，Java的鼠标事件是构建用户交互界面的重要组成部分。通过实现`...
jQuery学习5 jQuery事件模型
10-29
4. **事件对象的规范化**：通过 `Event` 实例传递给处理程序，提供了一致的接口来访问事件的详细信息。 5. **阻止事件冒泡和取消默认行为的统一方法**：这允许开发者能够轻松地控制事件的行为，例如阻止点击事件的...
DOM基础教程之事件对象
09-03
事件对象是DOM中一个重要的概念，它封装了与特定事件相关的信息，如事件类型、触发事件的元素、鼠标位置等。本文将深入探讨DOM中的事件对象及其在不同浏览器中的实现差异。 在IE浏览器中，事件对象是全局window对象...
(十四)面向对象的三大特征
离歌的博客
01-08 5382
面向对象的三大特征:封装、继承、多态。
【面向对象的三大基本特征与五大基本原则】
最新发布
独上高楼，望尽天涯路。
09-17 469
三大特性：封装、继承与多态 五大基本原则：单一职责、开放封闭、里氏置换、依赖倒置、接口隔离原则
面向对象的三大基本特征（封装、继承、多态）
ck_67的博客
07-30 2010
面向对象的三大基本特征（封装、继承、多态） 这里写目录标题面向对象的三大基本特征（封装、继承、多态）1 封装2 继承3 多态 1 封装 封装是面向对象的特征之一，是对象和类概念的主要特性。 设计思想：把需要隐藏的隐藏起来，把需要展示出来的展示出来。 封装的目的：增强安全性和简化编程，使用者不必了解具体的实现细节，而只是要通过外部接口，以特定的访问权限来使用类的成员。 2 继承 1 什么是继承？ 面向对象三大特征之一；可以使得子类拥有父类的属性和方法，还可以在子类中重新定义，或者追加属性和方法。 2 怎么实现
面向对象之三大特征
weixin_57800914的博客
05-22 2413
面向对象一共有三大特征：封装、继承、多态。
JS实现奇偶数的判断
巧克力很苦的小博客
09-07 2万+
奇数和偶数的判断是数学运算中经常碰到的问题，比如：有变量x，如果x=1则为奇数，为2则为偶数。这篇文章主要讲解通过JavaScript来实现奇偶数的判断。 方法一、求余% if…else的形式： var num = parseInt(prompt('请输入数字'));//请输入数字 if((num%2)===0){//判定条件余数为0时为偶数 alert(num + '是' + ...
深入理解JavaScript对象模型与事件处理
"javascript 对象模型与事件处理.pdf" JavaScript对象模型与事件处理是JavaScript编程中至关重要的概念，它们构成了JavaScript在Web开发中的基础。JavaScript是一种面向对象的语言，它的对象模型描述了对象间的层次...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值