JS中元素的常用事件 以及 鼠标、键盘事件对象信息

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量477 收藏 2
点赞数
分类专栏： JavaScript ES6 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48937489/article/details/121685728
版权

JS中元素的常用事件


JS里面的所有 原生事件 没有大写字母

一、 鼠标事件

  1. click 左键单击
    一个单击 会触发一个 down + 一个 up
    事件源.onclick = function () { 执行函数 }

  2. dblclick 左键双击
    一个 左键双击 会触发 两个左键单击

  3. contextmenu 右键双击

  4. mousewheel 滚轮滚动

  5. mousedown 鼠标按下

  6. mouseup 鼠标抬起

  7. mousemove 鼠标移动

  8. mouseover 鼠标移入

  9. mouseout 鼠标移出

  10. mouseenter 鼠标移入

  11. mouseleave 鼠标移出

mouseover、mouseout 和 mouseenter、mouseleave的区别
不论 鼠标指针 穿过 被选元素或其子元素 ，都会触发 mouseover 事件。 对应mouseout
只有在 鼠标指针 穿过 被选元素时 ，才会触发 mouseenter 事件。 对应mouseleave
在这里插入图片描述

二、 键盘事件

不是所有元素都能触发
表单事件（有选中效果），document，window

  1. keydown 键盘按下
    只要你键盘上的按键按下就可以触发
    中文输入法下，也会触发
  2. keyup 键盘抬起
  3. keypress 键盘按下
    必须要 准确的嵌入到文本框 里面的内容才会触发
    出现在文本框里面的内容必须要和你按下的按键一致
    就比如，文本框出现一二三，你按下yiersan这样是不一致的； 也就是说要文本框也要出现yiersan才可以

三、 浏览器事件

  1. load 页面加载完毕
  2. scroll 页面发生滚动
  3. resize 窗口尺寸发生变化
  4. offline 网络断开
  5. online 网络恢复
  6. hashchange 当hash 值改变的时候触发

四、 表单事件

表单事件绑定给 表单元素 和 form 标签

  1. change 表单内容改变
    当表单 失焦的时候 ，如果和 聚焦的时候 不一样叫做改变
  2. input 表单输入事件
    只要你在 表单内部输入内容 就会触发
  3. focus 表单聚焦事件 （选中）
  4. blur 表单失焦事件（未选中）
  5. submit 表单提交事件
    事件是绑定给 form 标签使用的
    当你点击 form 里面的 submir 的时候触发
  6. reset 表单重置事件
    事件是绑定给 form 标签使用的
    当你点击 reset 按钮的才能触发

五、 拖拽事件

一般元素想触发拖拽行为，要给元素加上一个属性
draggable = " true "

想要两个元素完成一个完整的拖拽，必须具备两个要素
        1. 拖拽元素
        2. 目标元素

  1. dragstart 拖拽开始
    绑定在 拖拽元素 身上
  2. drag 拖拽移动
    绑定给 拖拽元素
  3. dragend 拖拽结束
    绑定给 拖拽元素
  4. dragenter 拖拽进入目标元素
    绑定给 目标元素
    光标 进入 目标元素 触发
  5. dragleave 拖拽离开目标元素
    绑定给 目标元素
    光标 离开 目标元素
  6. dragover 拖拽元素在目标元素里面移动
    绑定给 目标元素
  7. drop 拖拽元素在目标元素内放手
    绑定给 目标元素
    必须要再 dragover 事件里面阻止默认行为

六、 触摸事件(移动端)

只能在移动端使用

  1. touchstart 触摸开始
  2. touchmove 触摸移动
  3. touchend 触摸结束

七、 其他事件

  1. transitionend 过度结束
    当你 有过渡属性 的时候
    过度结束 触发，过渡 几个属性 触发几次
  2. selectstart 开始选择
    当你想在页面中框选文档的时候触发
  3. visibilitychange 窗口隐藏和显示
    只能绑定给 document

八、 补充----鼠标事件的事件对象信息

1. 按下的按键

事件对象中有一个叫做 button 的属性
他表示你 按下的是哪一个按键
0 -> 左键
1 -> 滚轮键
2 -> 右键

2. 光标的坐标（重点）

任何鼠标事件都好用

  1. clientX 和 clientY
    光标距离 可视化窗口左上角 的位置
  2. pageX 和 pageY
    光标距离 文档流左上角 的位置
  3. offsetX 和 offsetY
    光标距离 元素左上角 的位置
    元素：光标触发事件的元素（不是事件源）
    扩展：如果你不想按照里面光标触发元素的左上角计算坐标
            就想按照 事件源 来计算坐标
            css样式 pointer-event: none;

九、 补充----键盘事件的事件对象信息

1. 按下的是哪一个按键

1-1. 事件对象里面有一个 key 的属性
        表示你按下的那个按钮
        特性: IE 低版本不支持
1-2. 事件对象里面有一个叫做 keyCode 的属性
        表示你按下的是哪一个按键, 但是是以编码的形式给你
        特性: FireFox < 20 的版本不支持
        在火狐低版本使用 which 属性
        兼容: var code = e.keyCode || e.which

2. 你按下的是不是组合按键

2-1. altKey
2-2. ctrlKey
2-3. shiftKey
2-4. metaKey

四个属性的值都是布尔值
        altKey 表示 alt 键
        ctrlKey 表示 ctrl 键
        shiftKey 表示 shift 键
        metaKey 表示 win 键
        IE 没有不支持
当你按下一个按键的时候
        如果这四个的某一个的值是 true, 表示你同时也按下了这个按键

禁止摆烂-才浅
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javaScript常用事件
09-19
常用javaScript事件归纳。 常用事件： 1.onclick 鼠标单击事件 通常在下列基本对象中产生： button（按钮对象） checkbox（复选框）或（检查列表框） radio （单选钮） reset buttons（重要按钮） submit ...
JS事件（含操作元素详细内容）
weixin_59425810的博客
02-02 355
一、事件分为三部分: 1事件源:事件被触发的对象 先写一个button按钮元素（id=“btn”），然后js中用document.getElementById（'btn'）得到事件源 2事件类型:如何触发，什么事件（鼠标点击onclick？经过？） 3事件处理程序:通过函数赋值方式完成 代码: <button id='btn'>唐伯虎〈button〉 var btn＝document.getElementById（'btn'）; btn.onclick=function（）{
如何通过JS判断一个元素是否显示、隐藏
热门推荐
bug处理进行时
05-08 1万+
无论元素是通过设置dispaly还是通过添加伪类:hidden来进行的控制，都可以使用其中一种方式进行判断。即：如果元素是通过添加伪类实现的隐藏，依旧可以通过display来进行判断。通过判断当前元素的display的值来判断当前元素是否是可见状态。只能用display来对none进行对比判断。因为可见元素的状态可能是block、inline等。
JavaScript常见鼠标事件
liGermini526的博客
03-16 1240
对于刚入门的前端程序员来说，js中较为重要的鼠标事件是一个重点记忆的内容，本文主要针对几个常用的鼠标事件做简单讲解，主要包括定义和使用场景。
JS中的事件和事件委托(含元素默认事件)
weixin_46349935的博客
09-29 275
JS中的事件和事件委托(含元素默认事件)
js IntersectionObserver监听元素的显示与隐藏，图片懒加载
PrimaryColor
02-23 1326
代码： <!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{ ..
【JS交互篇】事件和元素操作
前端知识分享喵
08-10 253
每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差了（内存不够用，是硬伤，哈哈）比如上面的100个li，就要占用100个内存空间，如果是1000个，10000个呢，那只能说呵呵了，如果用事件委托，那么我们就可以只对它的父级（如果只有一个父级）这一个对象进行操作，这样我们就需要一个内存空间就够了，是不是省了很多，自然性能就会更好。与DOM2级方法一样，可以为同一个按钮添加两个不同事件处理程序，但是IE事件处理程序的执行顺序是以相反的顺序触发，即先触发的是后面添加的事件。
gojs 节点右键点击事件_在Excel中禁用右键菜单你会吗？
weixin_36165152的博客
01-15 468
我的目标：让中国的大学生走出校门的那一刻就已经具备这些Office技能，让职场人士能高效使用Office为其服务。支持鹏哥，也为自己加油！有时候，我们接收到一些表，在操作时，别的地方点右键都可以弹出右键菜单，可数据区域点击右键却怎么也弹不出右键菜单呀，这到底怎么回事呀？如下图：数据区域点右键没反应，除了数据区域以外的区域右键都可以弹出菜单。别怀疑，不是你人品的问题，这只是在数据区域禁用了...
js中的元素事件篇
Fairy的博客
01-12 1560
元素的事件绑定： 三种元素创建 document.write('标签及内容') 对象.innerHTML='标签及内容' document。createElement（） 如果是在页面加载完毕后，用document.write()创建元素，会导致原页面所有内容都被撤销掉了1.addEventListener（"事件类型（on）",function,false）==...
js应用之事件触发：隐藏和显示按钮
cyw8998的专栏
02-06 7701
思路总结如下：     点一个按钮事件，触发一个js函数，js函数执行：     document.getElementById(button1).style.display=;这个语句是让一个id名为‘button1’的按钮显示出来。     反之，执行：     document.getElementById(button1).style.display=none
原生js 实现鼠标跟随显示悬浮框信息
逆风优雅的博客
08-04 1万+
原生js 实现鼠标跟随显示悬浮框信息
js隐藏android软键盘,javascript检查android软键盘隐藏显示
weixin_35742852的博客
05-27 474
对于android软键盘弹出后，点击键盘上的隐藏按钮，可以用计时器检查window.innerHeight，如果改变，说明android软键盘收回隐藏了。htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">">javascr...
web前端工程师JavaScript基础入门路径学习专题课程
06-28
第3课 JavaScript DOM事件 为页面中的元素绑定键盘或鼠标事件，从而可以触发和实现我们想要的交互效果 第4课 JavaScript BOM基础 学习浏览器对象模型“BOM”，可以对浏览器窗口进行访问和操作，与浏览器“对话” ...
程序天下:JavaScript实例自学手册
07-08
9.36 使用JavaScript向表格中写入数据 9.37 类C# GridView的编辑效果（一） 9.38 类C# GridView的编辑效果（二） 第10章 单选框和复选框 10.1 选择了哪一个单选框 10.2 单击文字实现单选框的选定 10.3 被选中的复选...
javascript完全学习手册1 源码
04-12
7.4 String对象中与正则表达式 有关的方法 177 第8章 高级DOM技术 182 8.1 CSS样式 182 8.1.1 CSS语法 182 8.1.2 CSS属性 187 8.2 样式控制 192 8.2.1 Style对象 193 8.2.2 使用CSS属性 194 8.2.3 自定义鼠标提示 ...
javascript完全学习手册2 源码
04-12
7．4 String对象中与正则表达式有关的方法 第8章 高级DoM技术 8．1 CSS样式 8．1．1 CSS语法 8．1．2 CSS属性 8．2 样式控制 8．2．1 Style对象 8．2．2 使用CSS属性 8．2．3 自定义鼠标提示 8．2．4 可折叠区域 ...
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 373
步骤很详细，直接上教程……
【解决NodeJS项目无法在IDEA中调试的问题】使用JetBrains IDEA 2023 调试nodejs项目
宅斗士的博客
04-23 369
项目采用Ant Design Pro + React，使用前后端分离开发方式，后端可以很容易的打断点调试，但是前端用到了React脚手架，在IDEA中加了调试断点，但是没有什么用处。
vue2---修饰符
weixin_45503872的博客
04-24 1007
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
javascript使用以下知识点进行网页设计和js特效并写出代码1、 常用鼠标与键盘事件 2、 事件对象的绑定与使用 3、 排他操作 4、 Bom获取窗体属性 5、 Bom相关属性的使用 6、 Bom相关方法的使用 7、 Offset的使用 8、
06-03
DOM节点的操作和属性 1. 常用鼠标与键盘事件： ```javascript // 鼠标事件 element.addEventListener('click', function(event) { // 点击事件 }); element.addEventListener('mousedown', function(event) { // 按下鼠标键事件 }); element.addEventListener('mouseup', function(event) { //开鼠标键事件 }); element.addEventListener('mousemove', function(event) { // 鼠标移动事件 }); element.addEventListener('mouseover', function(event) { // 鼠标移入事件 }); element.addEventListener('mouseout', function(event) { // 鼠标移出事件 }); // 键盘事件 element.addEventListener('keydown', function(event) { // 按下键盘事件 }); element.addEventListener('keyup', function(event) { // 松开键盘事件 }); element.addEventListener('keypress', function(event) { // 按键事件 }); ``` 2. 事件对象的绑定与使用： ```javascript element.addEventListener('click', function(event) { // 阻止默认行为 event.preventDefault(); // 阻止事件冒泡 event.stopPropagation(); // 获取事件目标 event.target; // 获取事件类型 event.type; // 获取触发事件的元素 event.currentTarget; }); ``` 3. 排他操作： ```javascript const elements = document.querySelectorAll('.item'); elements.forEach(function(element) { element.addEventListener('click', function(event) { // 移除所有元素的 active 类 elements.forEach(function(item) { item.classList.remove('active'); }); // 添加当前元素的 active 类 element.classList.add('active'); }); }); ``` 4. Bom获取窗体属性： ```javascript // 获取窗口宽度 window.innerWidth; // 获取窗口高度 window.innerHeight; // 获取文档宽度 document.documentElement.clientWidth; // 获取文档高度 document.documentElement.clientHeight; ``` 5. Bom相关属性的使用： ```javascript // 获取当前页面的url window.location.href; // 获取当前页面的域名 window.location.hostname; // 获取当前页面的路径 window.location.pathname; // 获取当前页面的协议 window.location.protocol; ``` 6. Bom相关方法的使用： ```javascript // 跳转到指定url window.location.href = 'https://www.example.com'; // 刷新页面 window.location.reload(); // 后退一页 window.history.back(); // 前进一页 window.history.forward(); ``` 7. Offset的使用： ```javascript // 获取元素距离文档顶部的距离 element.offsetTop; // 获取元素距离文档左侧的距离 element.offsetLeft; // 获取元素的宽度 element.offsetWidth; // 获取元素的高度 element.offsetHeight; ``` 8. DOM节点的操作和属性： ```javascript // 创建元素节点 const element = document.createElement('div'); // 设置元素属性 element.setAttribute('id', 'my-div'); element.setAttribute('class', 'my-class'); // 获取元素属性 element.getAttribute('id'); element.getAttribute('class'); // 添加元素到文档中 document.body.appendChild(element); // 删除元素 document.body.removeChild(element); // 获取元素的子元素 element.children; // 获取元素的父元素 element.parentNode; ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值