【学习笔记43】JavaScript的事件

已于 2022-11-28 00:27:34 修改
阅读量740 收藏 1
点赞数
分类专栏： JavaScript 文章标签： javascript 学习 前端
于 2022-11-28 00:25:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58190023/article/details/128072368
版权

JavaScript的事件

一、JS的事件

  • 在某一个时刻, 用户(在页面)做了某一件事, 我要给出的反馈

1、事件的三要素

1. 事件源
2. 事件类型
3. 事件处理函数

        <div></div>

        <style>
            div {
                width: 100px;
                height: 100px;
                background-color: pink;
            }
        </style>

2、DOM 0级事件绑定

  • 事件源.on + 事件类型 = 事件处理函数
  • 弊端: 无法绑定多个同类型的事件, 后边新写的事件, 会覆盖掉原有的事件
        var oDiv = document.querySelector('div');

        oDiv.onclick = function () {
            console.log('绑定给div的第一个事件');
        }
        oDiv.onclick = function () {
            console.log('绑定给div的第二个事件');
        }

在这里插入图片描述

3、DOM 2级事件绑定(事件监听)

  • 事件源.addEventListener(‘事件类型’, 事件处理函数, 布尔值（可选）)
        var oDiv = document.querySelector('div');

        oDiv.addEventListener('click', function () {
            console.log('绑定给div的第一个事件');
        })

        oDiv.addEventListener('click', function () {
            console.log('绑定给div的第二个事件');
        })

在这里插入图片描述

二、浏览器事件

  • onload： 当页面所有资源加载完毕时执行
	<!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>
	    <script>
	        // var oDiv = document.querySelector('div');
	        // console.log(oDiv);           // null
	
	        window.onload = function () {
	            // 当页面所有资源加载完毕时执行
	
	            var oDiv = document.querySelector('div');
	            console.log(oDiv);
	        }
	    </script>
	</head>
	<body>
	    <div>我的是div标签</div>
	</body>
	</html>

三、鼠标事件

        <div>
            <div class="box"></div>
        </div>

        <style>
            * {
                padding: 0;
                margin: 0;
            }
            div {
                width: 200px;
                height: 200px;
                background-color: pink;
            }
            .box {
                width: 100px;
                height: 100px;
                background-color: green;
            }
        </style>

1. 左键单击：click

        var oDiv = document.querySelector('div');

        oDiv.onclick = function () {
            console.log('单击元素时触发');
        }

在这里插入图片描述

2. 双击事件：dblclick

  • 300ms内连续点击两次鼠标
        var oDiv = document.querySelector('div');

        oDiv.ondblclick = function () {
            console.log('双击元素时触发');
        }

在这里插入图片描述

3.右键事件：contextmenu

  • 鼠标右键单击
        var oDiv = document.querySelector('div');

        oDiv.oncontextmenu = function () {
            console.log('鼠标右键单击时触发');
        }

在这里插入图片描述

4. 鼠标按下事件：mousedown

  • 鼠标左键按下的时候会触发的(哪怕鼠标没有抬起)
        var oDiv = document.querySelector('div');

        oDiv.onmousedown = function () {
            console.log('鼠标按下时触发');
        }

在这里插入图片描述

5. 鼠标抬起事件：mouseup

  • 鼠标左键抬起的时候会触发的
        var oDiv = document.querySelector('div');

        oDiv.onmouseup = function () {
            console.log('鼠标抬起时触发');
        }

在这里插入图片描述

6. 鼠标移动事件：mousemove

  • 鼠标在元素内部移动时触发
        var oDiv = document.querySelector('div');

        oDiv.onmousemove = function () {
            console.log('鼠标移动时触发');
        }

在这里插入图片描述

7. 鼠标的移入和移出

  • mouseover和mouseout两个方法，移入元素和移出元素子盒子时都会触发
  • mouseenter和mouseleave两个方法，只有在移入元素时触发
        var oDiv = document.querySelector('div');

        // 鼠标移入事件1      鼠标的移动到元素内部时触发
        oDiv.onmouseover = function () {
            console.log('onmouseover：鼠标移入时触发');
        }

        // 鼠标移出事件1      鼠标移动出元素内部时触发
        oDiv.onmouseout = function () {
            console.log('onmouseout：鼠标移出时触发');
        }


        // 鼠标移入事件2
        oDiv.onmouseenter = function () {
            console.log('onmouseenter：鼠标移入事件2');
        }

        // 鼠标移出事件2
        oDiv.onmouseleave = function () {
            console.log('onmouseleave：鼠标移出事件2');
        }

在这里插入图片描述

四、键盘事件

  • document.on键盘事件的事件类型 = function () {}

1. 键盘抬起事件：keyup

        document.onkeyup = function () {
            console.log('键盘按键抬起');
        }

2. 键盘按下事件：keydown

        document.onkeydown = function () {
            console.log('键盘某个按键被按下');
        }

3. 键盘按下抬起事件：keypress

        document.onkeypress = function () {
            console.log('键盘按下抬起时触发');
        }

五、表单事件

        文本框: <input type="text" id="inp">

1. 获得焦点事件：focus

        var inp = document.querySelector('#inp')

        inp.onfocus = function () {
            console.log('当前文本框获得焦点');
        }

在这里插入图片描述

2. 失去焦点事件：blur

        var inp = document.querySelector('#inp')
  
        inp.onblur = function () {
            console.log('当前文本框失去焦点');
        }

在这里插入图片描述

3. 文本框内容改变时触发：change

        var inp = document.querySelector('#inp')
   
        inp.onchange = function () {
            console.log('当前文本框内容被更改');
        }

在这里插入图片描述

4. 文本框输入内容时触发：input

        var inp = document.querySelector('#inp')
   
        inp.oninput = function () {
            console.log('当前文本框正在输入内容');
        }

在这里插入图片描述

六、事件对象

  • 当事件触发时, 携带一些信息
  • 当前时间的事件源是谁?
  • 鼠标点击的位置在哪里(点击事件)
  • 键盘按下了那个按键(键盘事件)
        <button>点击</button>

        var oBtn = document.querySelector('button');

        oBtn.onclick = function (event) {
            console.log(event);
        }

在这里插入图片描述

七、获取鼠标按下时的坐标

相对于
1. 事件源
2. 页面
3. 浏览器窗口

        <div></div>

        <style>
            * {
                padding: 0;
                margin: 0;
            }

            body {
                height: 5000px;
            }

            div {
                width: 200px;
                height: 200px;
                background-color: pink;
                position: fixed;
                top: 100px;
            }
        </style>

        var oDiv = document.querySelector('div');

        oDiv.onclick = function (e) {
            // 1. 获取相对于事件源的鼠标坐标点
            console.log('相对于事件源 X 轴', e.offsetX);
            console.log('相对于事件源 Y 轴', e.offsetY);

            // 2. 获取相对于页面的坐标点
            console.log('---------------------------------');
            console.log('相对于页面的 X 轴', e.pageX);
            console.log('相对于页面的 Y 轴', e.pageY);

            // 3. 获取相对于浏览器窗口的坐标点
            console.log('---------------------------------');
            console.log('相对于浏览器窗口的 X 轴', e.clientX);
            console.log('相对于浏览器窗口的 Y 轴', e.clientY);
        }

在这里插入图片描述

八、键盘按键

  • e.key ===> 返回按下的按键
  • e.keyCode ===> 返回按下的按键的进制码
  • keyCode已经被移除, 但是很多主流浏览器还支持使用
    <input type="text" id="inp">

        var oIpt = document.querySelector('input');
        
        oIpt.onkeyup = function (e) {
            console.log(e.key, e.keyCode);
        }

在这里插入图片描述

判断：Ctrl+A

        var oIpt = document.querySelector('input');
        
        oIpt.onkeyup = function (e) {
            if (e.ctrlKey && e.key === 'a') {
                console.log('按下了Ctrl+A键');
            }
        }

在这里插入图片描述

0yizhiyang
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript学习笔记
11-24
学习JavaScript时，了解这些基础知识是至关重要的。随着深入学习，你将接触到更高级的概念，如闭包、异步编程（回调函数、Promise、async/await）、模块系统以及现代框架如React、Vue和Angular的使用。JavaScript的...
键盘事件（JavaScript）
weixin_50053454的博客
02-25 1216
三种键盘事件： onkeydown：键盘按下（持续按下会连续触发） onkeyup：键盘抬起 onkeypress：键盘长按（建议使用keydown代替） 键盘事件的事件目标可以是input输入框，也可以是window窗口 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev.
JavaScript-----键盘事件
weixin_45904557的博客
06-13 1166
onkeyup 某个键盘按键被松开时触发 onkeydown 某个键盘按键被按下时触发 onkeypress 某个键盘按键被按下时触发惇但是它不识别功能键比如ctrl shift箭头等
按下鼠标进行拖拽，让元素跟随鼠标进行移动，鼠标抬起，元素停止移；js鼠标拖拽 （鼠标按下事件：onmousedown、鼠标移动事件：onmousemove、鼠标抬起事件：onmouseup）
最新发布
m0_67624022的博客
05-13 939
需求如下： 按下鼠标进行拖拽，让元素跟随鼠标进行移动，鼠标抬起，元素停止移动。 解析： 鼠标按下事件：onmousedown 鼠标移动事件：onmousemove 鼠标抬起事件：onmouseup
JS 解决input框弹起键盘时顶起底部元素问题
junxianzhou的博客
01-24 1577
var winHeight = $(window).height(); //获取当前页面高度 $(window).resize(function () { var thisHeight = $(this).height(); if (winHeight - thisHeight > 140) { //键盘弹出 $('.main-footer').css('position', 'static'); } else { //键盘收起
JavaScript第8篇，JavaScript鼠标事件（js的鼠标事件，vue的鼠标事件）
weixin_65793170的博客
12-12 3887
JavaScript中的鼠标事件允许你响应用户的鼠标操作，如点击、移动和滚动等。这些事件通常绑定到DOM元素上，当特定的鼠标操作发生时，就会触发相应的事件处理函数。这里来记录一下
学习js第十二天（事件）
qq_59490759的博客
09-06 588
IE浏览器只支持事件冒泡，不支持事件捕获，所以它不支持addEventListener("click",function,"true")方法,所以ie浏览器使用ele.attachEvent("onclick",doSomething)。有的时候，我们不希望浏览器执行默认事件，比如我给 a 标签绑定了一个点击事件，我点击你的时候希望你能告诉我你的地址是什么而不是直接跳转链接，那么我们就要把 a 标签原先的默认事件阻止，不让他执行默认事件。（父亲的东西就是父亲的，不归儿子所有） ，不支持冒泡。
JavaScript 学习笔记（十六） js事件
10-29
事件对象里包含三个方面的信息····回看上一篇内容！事件对象里的属性和方法，主要是鼠标和键盘的信息。
整理Javascript事件响应学习笔记
10-23
整理Javascript事件响应学习笔记，之前一系列的文章是跟我学习Javascript，本文就是进一步学习javascript流程控制语句，希望大家继续关注
JavaScript高级程序设计 事件学习笔记
10-28
JavaScript高级程序设计 事件学习笔记，需要的朋友可以参考下。
Vue页面监听键盘按键的多种方法
一步一个脚印，踏实努力，向着目标前进
10-06 1万+
在Vue页面中，可以使用多种方法来监听键盘按键。@keydown@keyup
利用javascript实现鼠标的按下抬起事件
m0_59467570的博客
08-19 714
案例:只有在鼠标按住这个图片的时候,图片才跟随着鼠标移动,如果鼠标抬起了,鼠标移动,图片是不跟随移动的。只有在鼠标按住这个图片的时候,图片才跟随着鼠标移动,如果鼠标抬起了,鼠标移动,图片是不跟随移动的。// 获取鼠标在浏览器中的位置e.pageX, e.pageY。//2.给document注册鼠标移动事件。//改变图片的左定位。//改变图片的上定位。//设置鼠标抬起事件。
键盘按下和抬起事件（keydown，keyup）——原创
热门推荐
GeneralAndroid的专栏
02-26 1万+
Android学习自修笔记（一） 键盘按下和抬起事件（keydown，keyup）                                              ————将军的Android自修之途 通常按键的动作分为单击、按下和抬起，但实际上单击并不能算单独的按键事件，因为系统底层（Linux内核）在按键按下时会发出一个中断，在按键抬起时也会发送一个中断，并没有在按键单击时
JS事件总结超详细-思维导图
typ的blog，记录工作中的问题、学习中的笔记、生活中的感想。
06-25 692
经过了一段时间事件学习，我又重新对事件进行了总结，废话不多说，直接上思维导图不想看思维导图的可以看下方内容，也是思维导图上的全部内容
Vue中的键盘事件
gaoqiandr的博客
05-10 3203
本文主要介绍了Vue中的键盘事件的基本知识，简单易懂
keyup 、keypress、keydown事件 onblur和onfocus事件
qi琪的专栏
06-10 2027
keyup事件键盘操作已经完成，得到是触发键盘事件后的文本keypress 得到键盘触发时间前的文本 （可用来提示字符大小写、限制字符数量）
js鼠标事件
QQQqq031110的博客
05-09 1028
/ console.log("被点名了");// console.log("鼠标移动");//3. onmouseover : 鼠标移入事件。console.log("鼠标移入");console.log("鼠标移出");//5. onmousemove : 鼠标移动事件。//6. onmousedown : 鼠标按下事件。console.log("鼠标按下");console.log("鼠标抬起");//4. onmouseout : 鼠标移出事件。//7. onmouseup : 鼠标抬起事件。
JavaScript 常见鼠标事件
weixin_58838794的博客
04-10 2541
4、mousemove (move移动)鼠标在固定的位置一移动就触发移动，就触发。2、mousedown 鼠标按下时触发。5、mouseenter 鼠标移入触发。6、mouseleave 鼠标移出触发。3、mouseup 鼠标弹起时触发。1、click鼠标左键点击。
JavaScript学习笔记：元素交互与基本语法详解
本篇笔记记录了作者在学习JavaScript过程中的关键知识点，主要包括以下几个方面： 1. HTML中使用JavaScript: - 使用`<script>`元素插入脚本，这是在HTML文档中嵌入JavaScript的基本方式。 - 子页面与父页面之间的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值