js事件的详细介绍

最新推荐文章于 2024-04-25 20:29:33 发布
最新推荐文章于 2024-04-25 20:29:33 发布
阅读量558 收藏 1
点赞数 1
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46372132/article/details/133045280
版权

11.事件

1.什么是事件

   js属于事件驱动编程,把'驱动',执行,调用
        通过一些交互,触发一些函数
         事件:发起-->执行
       绑定事件-->触发事件
        on 绑定 emit触发 off解绑

2.事件分类

鼠标事件

点击事件 onclick

双击事件 ondblclick

按下事件 onmousedown

抬起事件 onmouseup

鼠标进入事件 onmouseenter

鼠标离开事件 onmouseleave

onmouseleave,onmouseenter遇到子元素,不会触发

鼠标移动事件 onmousemove

鼠标进入事件 onmouseover

上面两个遇到了子元素,会触发

鼠标离开事件onmouseout

鼠标滚轮 onmousewheel

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="inner">

        </div>
    </div>
    <script>
        var box = document.querySelector(".box");
        // 1.单件事件 onclick
        // box.onclick = function () {
        //     alert(123)
        // }
        //  会覆盖前面的onclick事件
        box.onclick = function () {
            console.log("onclick");
        }
        // 鼠标点击盒子,就会触发, 就像onclick+(),执行
        // 2.双击
        box.ondblclick = function () {
            console.log("ondblclick");
        }
        // 3.鼠标按下 onmousedown先执行,再执行onclick
        box.onmousedown = function () {
            console.log("onmousedown");
        }
        // 4.鼠标抬起onmousedown先执行,再执行onmouseup,最后onclick
        box.onmouseup = function () {
            console.log("onmouseup");
        }
        // 5.鼠标滚动事件
        box.onmousewheel = function () {
            console.log("滚轮....onmousewheel");
        }
        // 6.鼠标进入
        box.onmouseenter = function () {
            console.log("onmouseenter 鼠标进入");
        }
        // 7.鼠标离开
        box.onmouseleave = function () {
            console.log("onmouseleave 鼠标离开");
        }
        // 8.鼠标进入
        box.onmouseover = function () {
            console.log("onmouseover 鼠标进入");
        }
         // 9.鼠标离开
         box.onmouseout = function () {
            console.log("onmouseout 鼠标离开");
        }
        // 1.
        // onmouseover 优先于onmouseenter
        // onmouseout优先于onmouseleave
        // 2.onmouseover 和onmouseout 遇到子元素也会触发
        // onmouseenter 和onmouseleave 遇到子元素不会触发
        // 10.鼠标移动
        box.onmousemove = function () {
            console.log("onmousemove 鼠标移动");
        }
    </script>
</body>

</html>
键盘事件

键盘按下 onkeydown 获取不到输入框的完整内容,能防止别人误输入

键盘抬起 onkeyup 输入完成 后抬起,抬起的时候,就能获取输入的内容

非功能键 onkeypress 非功能键有用

html事件

onload 页面加载 并且外部资源也加载完成后,触发

ounload 卸载

onresize改变窗口大小事件

onselect 文本框选中事件

onchange 文本框改变内容事件

oninput 文本框输入事件

onfocus 光标聚焦事件

onblur 失去焦点

onwheel滚轮事件

onerror错误事件

onscroll 滚动条事件

oncontextmenu 右击菜单事件

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

表单**

onsubmit 提交

  • .会触发js onsubmit事件
  • return false;//阻止表单的默认行为,不让表单提交

onreset 重置

3.js的事件模式

内联模式(不推荐)

脚本模式(重点)

当一个元素上,绑定了内联模式与脚本模式时,脚本模式优先

4.事件对象

1.什么是事件对象

在交换时,产生一条记录对象

2.事件对象的默认写法

var e=evt||window.event;

window.event ie6+

evt google 重点掌握

3.事件对象的属性
 // button 监听按下了哪个键
        // type 事件的类型
        // charCode 字符编码
        // keyCode 按键编码
        // target 和srcElement
        // altKey
        // shiftKey
        // metaKey
        // clientX,clientY  客户
        // pageX,pageY      页面
        // screenX,screeY   屏幕
        // offsetX,offsetY  偏移
        // stopPropagation()//停止冒泡
        // cancelBubble=true//取消冒泡
        // preventDefault()//阻止默认行为
        // returnValue=false//阻止默认行为

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            height: 500%;
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box">

    </div>
    <script>
        /* 
            e.button  onmousedown 0左键 1 滚轮键 2 右键
            e.keyCode 没有小写 全是大写,13是回车键 37 38 39 40 左上右下
            e.key  //按键的字符
            e.clientX,e.clientY 鼠标点击的点,到当前浏览器的左上角的距离
            e.pageX,e.pageY 鼠标点击的点,到页面左上角的距离
            e.offsetX,e.offsetY 鼠标点击的点,到当前元素左上角的距离
            e.screenX,e.screenY 鼠标点击的点,到当前屏幕左上角的距离
            e.target e.srcElement 鼠标点击的目标元素,target不一定等于this
            e.type 事件的类型,返回值不带on,列如onclick--click
            e.altKey 是否按下了shiftKey
            e.ctrlKey 是否按下了CtrlKey
            e.metaKey window(win键)

        */
        window.onmousedown = function (evt) {
            var e = evt || window.event
            // console.log(e.button);//onmousedown 0左键 1 滚轮键 2 右键

        }
        window.onkeydown = function (evt) {
            var e = evt || window.event
            // 没有小写 全是大写,13是回车键 37 38 39 40 左上右下
            // console.log(e.keyCode);
            console.log(e.key);//按键的字符
        }
        var box = document.querySelector(".box")
        box.onclick = function (evt) {
            var e = evt || window.event;
            console.log(e.clientX, e.clientY);
            console.log(e.pageX, e.pageY);
            console.log(e.offsetX, e.offsetY);
            console.log(e.screenX, e.screenY);
            console.log(e.target, this);
            console.log(e.type);
            console.log(e.altKey);
            console.log(e.shiftKey);//按住shift 就返回true 否则false
            console.log(e.ctrlKey);
            console.log(e.metaKey);
        }
    </script>
</body>

</html>

5.事件流

当元素叠到一起,点某一个元素,事件会传递

传递分为2个过程 冒泡和捕获

事件流有三个阶段 冒泡-目标-捕获

冒泡:从内到外传递事件

捕获 从外往内传递事件

6.事件的默认行为

  1. 表单,提交,重置行为
  2. a标签,跳转的行为
  3. 图片,拖拽的行为
  4. 右击菜单,显示菜单的行为

阻止默认行为

  1. return false 重点

  2. preventDefault()重点

  3. returnValue=false了解

  4. 兼容写法 了解

      if (e.preventDefault) {
                e.preventDefault();
            } else {
                e.returnValue = false;
            }

7.事件的监听

addEventListener(“事件类型”,函数,true/false)

capture 捕获

once 1次

addEventListener 默认是冒泡,就需要把第3个参数,设置true

addEventListener和removeEventListener的第3个参数,统一为true或false

8.三大家族

三大家族 "DOM"的属性,而offsetX,offsetY是"事件"对象的属性

​ offsetParent 找带有就近定位的父元素,如果父级们没有定位,默认找body 返回dom对象

​ offsetLeft,offsetTop 获取当前元素到带有定位父元素的距离,默认到body的距离 返回数值

​ offsetWidth offsetHeight 获取自身元素的宽与高=自身宽高+padding+border,就是不包含margin 返回数值

​ parentNode 找亲父元素(上一层)

​ offsetParent 找带有就近定位的父元素,如果父级们的没有定位,默认找body

9.案例盒子拖拽

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: green;
            /* 位置移动 */
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="box">

    </div>
    <script>
        var box = document.querySelector(".box")
        // 给盒子绑定鼠标按下事件
        box.onmousedown = function (e) {
            // 获取拖动的点到盒子起始点的位置
            var disX = e.pageX - this.offsetLeft
            var disY = e.pageY - this.offsetTop;
            // 在按下鼠标的同时,拖动盒子,绑定鼠标移动事件
            document.onmousemove = function (e) {
                box.style.left = e.pageX - disX + "px"
                box.style.top = e.pageY - disY + "px"
            }
            // 鼠标松开不移动 清空绑定的移动事件
            // 文档的任何位置松开
            document.onmouseup = function (e) {
                box.onmouseup = document.onmousemove = null
            }

        }
    </script>
</body>

</html>
qq_46372132
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js event事件
xinxin_zhu的博客
03-24 155
<html> <head> <title>event事件</title> <meta charset="utf-8"> <style> </style> </head> <body> <h2>事件监听 事件冒泡 ...
js的事件机制总结
七月
12-06 779
js的事件机制包括三个阶段，捕获、目标和冒泡。 1. 事件冒泡 微软提出了名为事件冒泡的事件流。事件冒泡可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面。也就是说，事件从最内层的元素开始发生，一直向上传播，直到document对象。 2. 事件捕获 网景提出另一种事件流名为事件捕获与事件冒泡相反，事件从最外层开始发生，直到最具体的元素。 上面的例子在事件捕获的概念下发生click事件的顺序应该是 document -> html -> body -> div -> p
JavaScript鼠标移动事件及案例
weixin_67224308的博客
10-17 1万+
于onmouseover相同但mouseenter事件只执行一次。鼠标移动都某个指点的HTML标签上时触发的事件。鼠标从HTML标签上移开时触发的事件。alert("按钮被点击")//被点击两次后弹出弹出框。alert("按钮被点击")//被点击后弹出弹出框。//找到按钮并设置双击击事件。//找到按钮并设置点击事件。鼠标双击时事件处理函数。
javaScript：鼠标事件
qq_52799985的博客
09-18 806
鼠标事件是Web开发中与鼠标交互相关的事件。这些事件允许开发者捕捉和响应用户使用鼠标进行的各种操作，例如点击、移动、滚动等。
JS的事件介绍
cnds123的专栏
09-29 1万+
JS事件，就是用户或浏览器本身的某种行为，一般是用户对页面的一些动作引起的，例如，单击某个链接或按钮、在文本框中输入文本、按下键盘上的某个按键、移动鼠标等等。当事件发生时，您可以使用 JavaScript 中的事件处理程序（也可称为事件监听器）来检测并执行某些特定的程序。JS（JavaScript）与HTML 之间的交互是通过事件（event）实现的，或者说，事件是JavaScript和DOM之间进行交互的桥梁。 一般情况下事件的名称都是以单词on开头的，例如点击事件 onclick、页面加载事件 onl
鼠标移入移出事件，mouseover、mouseenter区别
Programmer555的博客
11-26 7902
javascript鼠标移入移出事件
JS事件汇总
von_ming的博客
06-29 4713
1. js事件 1.1 onclick 点击事件 1.2 onload 用户进入某个页面的时候触发（onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。）
Javascript 事件冒泡机制详细介绍
10-18
主要介绍了Javascript 事件冒泡机制详细介绍的相关资料,需要的朋友可以参考下
js之事件冒泡和事件捕获详细介绍
01-19
（1）冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。  IE 5.5: div -> body -> document  IE 6.0: div -> body -> html -> document  Mozilla 1.0: div -> body -> ...
JS 事件绑定、事件监听、事件委托详细介绍
11-26
本文将详细介绍事件绑定、事件监听和事件委托这三种常见的事件处理方式。 首先，事件绑定是JavaScript响应用户行为的基础。当用户与页面上的元素交互时，如点击按钮、鼠标悬停等，我们需要为这些交互设置相应的处理...
JavaScript事件详细讲解
10-22
本文给大家介绍js事件详解，涉及到事件流，事件处理，事件对象等方面的知识，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧
js 鼠标事件_移入移出
热门推荐
随风潜入夜，不白头
04-06 1万+
mouseover（移入） mouseout（移出） mouseover 此事件类型冒泡，可能引起很多头痛的问题。例如，当鼠标指针移出Inner元素，事件将被发送到Inner元素，然后冒泡到Outer元素 。这可能会触发绑定的mouseover处理函数。mouseout 此事件类型冒泡，可能引起很多头痛的问题。例如，当鼠标指针移出Inner元素，事件将被发送到Inner元素，然后冒泡到Outer元素 。这可能会触发绑定的mouseout处理函数。 $(".class").mouseover(funct
js的三大事件、事件移除、事件循环机制
yiyueqinghui的博客
06-10 5215
三大事件（鼠标事件、键盘事件、html事件） 1、鼠标事件 click：单击 dblclick：双击 mousemove：鼠标移动 mousedown：鼠标按下 mouseup：鼠标抬起 mouseover：鼠标悬浮 mouseout：鼠标离开 mouseenter：鼠标进入 mouseleave：鼠标离开 2、键盘事件 keydown：按键按下 keyup：按键抬起 keypress：按键按下抬起 3、HTML事件 load：文档加载完成 select：被选中的时候 change：内容被改变 f
鼠标的移入、移出事件
06-15 1万+
① 只要鼠标指针移入（或移出）事件所绑定的元素或其子元素，都会触发mouseover（或mouseout）事件② 只有鼠标指针移入（或移出）事件所绑定的元素时，才会触发mouseenter（或mouseleave）事件。
js基础知识（2）
最新发布
智商不在服务区的博客
04-25 998
addEventListener() 方法用于向指定元素添加事件处理程序（事件句柄handler）。参数1：事件名称必须。字符串，指定事件名。注意: 不要使用 “on” 前缀。例如，使用 click ,而不是使用 onclick。参数2：function 必须。指定要事件触发时执行的函数。注意：事件对象会作为第一个参数传入函数。参数3：useCapture 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。true - 事件处理程序（事件句柄）在捕获阶段执行false默认。
鼠标移出移出事件的区别
qq_45329460的博客
10-13 436
鼠标移入移出事件的区别
鼠标经过 离开事件 mousemove mouseleave
qq_70020706的博客
11-22 1437
鼠标经过 离开事件 mousemove mouseleave
JavaScript第8篇，JavaScript鼠标事件（js的鼠标事件，vue的鼠标事件）
weixin_65793170的博客
12-12 3899
JavaScript中的鼠标事件允许你响应用户的鼠标操作，如点击、移动和滚动等。这些事件通常绑定到DOM元素上，当特定的鼠标操作发生时，就会触发相应的事件处理函数。这里来记录一下
js常用点击、鼠标、键盘事件--详解
合格程序猿
07-02 1886
JavaScript 提供了多种事件类型，包括点击事件、鼠标事件和键盘事件。您可以通过监听这些事件来响应用户的交互动作
详细介绍js worker
06-06
在 JavaScript 中，Worker 是一种特殊类型的对象，它允许在一个单独的线程中执行 JavaScript 代码，而不会阻塞主线程。Worker 可以帮助我们将一些计算密集型的任务转移到后台线程中执行，从而提高应用程序的响应性能和用户体验。 Worker 可以通过以下方式创建： ```javascript var worker = new Worker('worker.js'); ``` 其中，'worker.js' 是一个 JavaScript 文件的 URL，它包含了将在 Worker 中执行的代码。一旦创建了 Worker，它就会在一个单独的线程中执行代码。 Worker 线程和主线程之间通过消息通信进行交互。Worker 线程可以通过 postMessage() 方法向主线程发送消息，而主线程可以通过 onmessage 事件监听器接收消息。类似地，主线程也可以通过 postMessage() 方法向 Worker 线程发送消息，而 Worker 线程可以通过 onmessage 事件监听器接收消息。 在 Worker 中执行的代码不能直接访问 DOM 元素，也不能访问主线程中的变量和函数。但是，Worker 可以使用 importScripts() 方法来导入其他 JavaScript 文件，并在其中执行代码。Worker 还可以使用 XMLHttpRequest 对象来进行网络请求。 需要注意的是，由于 Worker 线程与主线程运行在不同的上下文中，它们之间不能共享内存。因此，在消息传递时需要将数据进行序列化和反序列化。通常，可以使用 JSON.stringify() 和 JSON.parse() 方法来完成这个过程。 总之，Worker 是一个非常有用的特性，它可以帮助我们提高 JavaScript 应用程序的性能和响应性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值