js 鼠标、键盘、html事件（转载）

最新推荐文章于 2024-03-16 11:36:04 发布
最新推荐文章于 2024-03-16 11:36:04 发布
阅读量135 收藏
点赞数

转自https://blog.csdn.net/qwer_df_b/article/details/77509859（个人备忘参考）

鼠标事件

click：单击

dblclick：双击

mousedown：鼠标按下

mouseup：鼠标抬起

mouseover：鼠标悬浮

mouseout：鼠标离开

mousemove：鼠标移动

mouseenter：鼠标进入

mouseleave：鼠标离开

 

  1. <button onclick="myClick()">鼠标单击</button>

  2. <button ondblclick="myDBClick()">鼠标双击</button>

  3. <button onmousedown="myMouseDown()" onmouseup="myMouseUp()">鼠标按下和抬起</button>

  4. <button onmouseover="myMouseOver()" onmouseout="myMouseOut()">鼠标悬浮和离开</button>

  5. <button onmousemove="myMouseMove()">鼠标移动</button>

  6. <button onmouseenter="myMouseEnter()" onmouseleave="myMouseLeave()">鼠标进入和离开</button>

 

  1. <script>

  2. function myClick() {

  3. console.log("你单击了按钮！");

  4. }

  5. function myDBClick() {

  6. console.log("你双击了按钮！");

  7. }

  8. function myMouseDown() {

  9. console.log("鼠标按下了！");

  10. }

  11. function myMouseUp() {

  12. console.log("鼠标抬起了！");

  13. }

  14. function myMouseOver() {

  15. console.log("鼠标悬浮！");

  16. }

  17. function myMouseOut() {

  18. console.log("鼠标离开！")

  19. }

  20. function myMouseMove() {

  21. console.log("鼠标移动！")

  22. }

  23. function myMouseEnter() {

  24. console.log("鼠标进入！")

  25. }

  26. function myMouseLeave() {

  27. console.log("鼠标离开！")

  28. }

键盘事件

keydown：按键按下

keyup：按键抬起

keypress：按键按下抬起

 

  1. <body>

  2. <input id="name" type="text" onkeydown="myKeyDown(this.id)" onkeyup="myKeyUp(this.id)">

  3. </body>

 

  1. <script>

  2. /*输出输入的字符*/

  3. function myKeyDown(id) {

  4. console.log(document.getElementById(id).value);

  5. }

  6. /*按键结束，字体转换为大写*/

  7. function myKeyUp(id) {

  8. var text = document.getElementById(id).value;

  9. document.getElementById(id).value = text.toUpperCase();

  10. }

  11. </script>

HTML事件

load：文档加载完成

select：被选中的时候

change：内容被改变

focus：得到光标

resize：窗口尺寸变化

scroll：滚动条移动

submit：表单提交时

reset：重置按钮点击时

 

 

  1. <body onload="loaded()">

  2. <div style="height: 3000px" ></div>

  3. <input type="text" id="name" onselect="mySelect(this.id)">

  4. <input type="text" id="name2" onchange="myChange(this.id)">

  5. <input type="text" id="name3" onfocus="myFocus()">

  6. </body>

 

  1. <script>

  2. window.onload = function () {

  3. console.log("文档加载完毕！");

  4. };

  5. /*window.onunload = function () {

  6. alert("文档被关闭！");

  7. };*/

  8. /*打印选中的文本*/

  9. function mySelect(id) {

  10. var text = document.getElementById(id).value;

  11. console.log(text);

  12. }

  13. /*内容被改变时*/

  14. function myChange(id) {

  15. var text = document.getElementById(id).value;

  16. console.log(text);

  17. }

  18. /*得到光标*/

  19. function myFocus() {

  20. console.log("得到光标！");

  21. }

  22. /*窗口尺寸变化*/

  23. window.onresize = function () {

  24. console.log("窗口变化！")

  25. };

  26. /*滚动条移动*/

  27. window.onscroll = function () {

  28. console.log("滚动");

  29. }

  30. </script>

事件模型：

 

  1. <body>

  2. <!--脚本模型：行内绑定-->

  3. <button onclick="alert('hello')">hello</button>

  4. <!--内联模型-->

  5. <button onclick="showHello()">hello2</button>

  6. <!--动态绑定-->

  7. <button id="btn">hello3</button>

  8. </body>

 

  1. <script>

  2. function showHello() {

  3. alert("hello");

  4. }

  5. /*DOM0：同一个元素只能添加一个同类事件

  6. * 如果添加多个，后面的会把前面的覆盖掉*/

  7. var btn = document.getElementById("btn");

  8. btn.onclick = function () {

  9. alert("hello");

  10. };

  11. btn.onclick = function () {

  12. alert("hello world");

  13. };

  14. /*DOM2:可以给一个元素添加多个同类事件*/

  15. btn.addEventListener("click", function () {

  16. alert("hello1");

  17. });

  18. btn.addEventListener("click", function () {

  19. alert("hello2");

  20. });

  21. /*不同浏览器的兼容写法*/

  22. /*IE*/

  23. if (btn.attachEvent) {

  24. btn.attachEvent("onclick", function () {

  25. alert("hello3");

  26. });

  27. /*W3C*/

  28. } else {

  29. btn.addEventListener("click", function () {

  30. alert("hello4");

  31. })

  32. }

  33. </script>

事件冒泡与事件捕获：

 

  1. <style>

  2. #div1{

  3. width: 400px;

  4. height: 400px;

  5. background-color: #0dfaff;

  6. }

  7. #div2{

  8. width: 300px;

  9. height: 300px;

  10. background-color: #33ff66;

  11. }

  12. #div3{

  13. width: 200px;

  14. height: 200px;

  15. background-color: #fff24a;

  16. }

  17. #div4{

  18. width: 100px;

  19. height: 100px;

  20. background-color: #ff4968;

  21. }

  22. </style>

 

  1. <title>事件冒泡、事件捕获</title>

  2. </head>

  3. <body>

  4. <div id="div1">

  5. <div id="div2">

  6. <div id="div3">

  7. <div id="div4">

  8.  

  9. </div>

  10. </div>

  11. </div>

  12. </div>

  13. </body>

 

  1. <script>

  2. var div1 = document.getElementById("div1");

  3. div1.addEventListener("click",function (event) {

  4. /*阻止事件冒泡*/

  5. event.stopPropagation();

  6. alert("div1");

  7. },false);

  8. var div2 = document.getElementById("div2");

  9. div2.addEventListener("click",function (event) {

  10. /*阻止事件冒泡*/

  11. event.stopPropagation();

  12. alert("div2");

  13. },false);

  14. var div3 = document.getElementById("div3");

  15. div3.addEventListener("click",function (event) {

  16. /*阻止事件冒泡*/

  17. event.stopPropagation();

  18. alert("div3");

  19. },false);

  20. var div4 = document.getElementById("div4");

  21. div4.addEventListener("click",function (event) {

  22. /*阻止事件冒泡*/

  23. event.stopPropagation();

  24. alert("div4");

  25. },false);

  26. </script>

阻止默认事件：

 

  1. <body>

  2. <a href="http://www.baidu.com" onclick="stop(event)">百度</a>

  3. </body>

 

  1. <script>

  2. function stop(event) {

  3. if (event.preventDefault()) {

  4. event.preventDefault();

  5. } else {

  6. event.returnValue = false;

  7. }

  8. alert("不跳转！")

  9. }

  10.  
狗蛋*
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html 鼠标中键事件,Javascript事件模拟(鼠标事件、键盘事件)
weixin_36330888的博客
06-04 895
在javascript编程中，事件是用来描述网页中某一特定有趣时刻的，众所周知事件通常是在由用户和浏览器进行交互时触发，其实不然，通过Javascript可以在任何时间触发特定的事件，并且这些事件与浏览器创建的事件是相同的。会有适当的事件冒泡，并且浏览器会执行分配的事件处理程序。这种能力在测试web应用程序的时候，是非常有用的，在DOM 3级规范中提供了方法来模拟特定的事件，IE9 chrome ...
JavaScript（事件处理、鼠标、键盘事件）
Han_Zhou_Z的博客
12-03 718
目录 一、事件处理 1、注册事件 （1）传统方式注册 （2）事件监听方式 2、删除事件 （1）传统方式 （2）标准方式 3、DOM事件流 二、事件对象 1、事件对象 2、 事件对象的常见属性和方法 （1）对比e.target和this的区别 （2）阻止默认行为 （3）阻止事件冒泡 （4）事件委托 三、鼠标事件 1、鼠标事件的常用方法 （1）鼠标事件常用方法 （2） 禁止鼠标右击菜单：contextmenu （3）禁止鼠标选中：selectstart 2、鼠标事件对.
javascript学习之鼠标事件
白话机器学习
08-06 2841
WheelEvent 接口继承了 MouseEvent 实例，代表鼠标滚轮事件的实例对象。目前，鼠标滚轮相关的事件只有一个wheel事件，用户滚动鼠标的滚轮，就生成这个事件的实例。浏览器原生提供构造函数，用来生成WheelEvent实例。构造函数可以接受两个参数，第一个是字符串，表示事件类型，对于滚轮事件来说，这个值目前只能是wheel。第二个参数是事件的配置对象。该对象的属性除了EventUIEvent的配置属性以外，还可以接受以下几个属性，所有属性都是可选的。deltaX。
JavaScript常见鼠标事件
最新发布
liGermini526的博客
03-16 4003
对于刚入门的前端程序员来说，js中较为重要的鼠标事件是一个重点记忆的内容，本文主要针对几个常用的鼠标事件做简单讲解，主要包括定义和使用场景。
JS中的鼠标事件
热门推荐
m0_70185826的博客
07-01 1万+
通过鼠标触发事件，类似用户的行为：mouseover事件和mouseenter事件，都是鼠标进入一个节点时触发。两者的区别是，mouseenter事件只触发一次，而只要鼠标在节点内部移动，mouseover事件会在子节点上触发多次。 MouseEvent.button属性返回一个数值，表示事件发生时按下了鼠标的哪个键。 0代表左键 1代表中键 2代表右键 2. MouseEvent.clientX，MouseEvent.clientY MouseEvent.clientX属性返回鼠标位置相对于浏
2、鼠标事件、键盘事件、浏览器事件、监听事件、冒泡事件、默认事件、属性操作
m0_58779986的博客
01-26 2209
2、鼠标事件、键盘事件、浏览器事件、监听事件、冒泡事件、默认事件、属性操作
Mouse鼠标事件详解
q1003675852的博客
12-06 2487
页面滚动会造成它们俩的数值不一致。我们知道我们给哪个元素绑定了事件，那么这个事件就是事件源，那么，当我们用事件委托来实现一些功能的时候，我们必须要知道我们的事件源。offsetX、offsetY ：事件属性返回触发事件时 鼠标相对于事件源元素 的X,Y坐标，标准事件没有对应的属性。mouseover事件发生时，事件的目标元素是获得光标的元素，但是有获得就有失去，此时的相关元素就是失去光标的元素。这是firefox独有的事件，当鼠标向前滚动时，event.detail的值为-3的倍数，否则为3的倍数。
事件类型—鼠标事件
雷雨天的雷胖子
05-14 5313
目录 一、事件分类 二、事件顺序 三、事件对象 坐标属性 修改键属性 relatedTarget属性 button属性 四、事件应用 一、事件分类 鼠标事件共有11种类型，分别是click、contextmenu、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave和onmou...
JS鼠标事件
小罗的博客
05-10 2518
📗目录 鼠标事件 鼠标点击 鼠标定位 🍊鼠标事件 dblclick 双击鼠标左键时发生，如果右键也按下则不会发生 mousedown 单击任意一个鼠标按钮时发生 mouseout 鼠标指针位于某个元素上且将要移出元素的边界时发生 mouseover 鼠标指针移出某个元素到另一个元素上时发生 mouseup 松开任意一个鼠标按钮时发生 mousemove 鼠标在某个元素上时持续发生 onmouseover 注册鼠标经过时事件处理函数 onmouseout 注册鼠标移开时事件处理函数
鼠标事件以及解释
mgaga的博客
11-12 966
click：单击事件。 dblclick：双击事件。 mousedown：按下⿏标键时触发。 mouseup：释放按下的⿏标键时触发。 mousemove：⿏标移动事件。 mouseover：移⼊事件。 mouseout：移出事件。 mouseenter：移⼊事件。 mouseleave：移出事件。 contextmenu：右键事件。 mouseover事件和mouseenter事件，都是⿏标进⼊⼀个节点时触发。两者的区别是，mouseenter事件只触发⼀次，⽽只要⿏标在节点内部移动，
常用的鼠标事件 JavaScript
2202_75549187的博客
04-02 353
常用的鼠标事件
JavaScript 常见鼠标事件
weixin_58838794的博客
04-10 2541
4、mousemove (move移动)鼠标在固定的位置一移动就触发移动，就触发。2、mousedown 鼠标按下时触发。5、mouseenter 鼠标移入触发。6、mouseleave 鼠标移出触发。3、mouseup 鼠标弹起时触发。1、click鼠标左键点击。
js:鼠标事件(9个)
weixin_59519449的博客
10-09 511
1.鼠标事件 属性 描述 onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。 onmousedown 鼠标按钮被按下。 onmouseup 鼠标按键被松开。 ...
Js之鼠标事件-鼠标事件
cx1361855155的博客
08-04 9329
鼠标点击事件包括 click（点击），dbclick（双击），mousedown（按下）和 mouseup（松开）四个。其中 click 事件比较常用，而mousedown 和 mouseup事件类型多用于鼠标施放，拉伸操作中。如果从父元素中移动到子元素中，也会触发元素的mouseover事件类型。mousemove 事件类型是一个实时响应的事件，当鼠标指针的位置发生变化时（至少移动一个像素），就会触发mousemove事件。该事件响应的灵敏度主要参考鼠标指针的移动速度块慢以及浏览器跟踪更新的速度。...
【JavaScript】鼠标十大事件简介和测试
归忆_AC的博客
08-11 1309
onclick：按下鼠标时触发。 ondblclick：在同一个元素上双击鼠标时触发。 onmousedown：按下鼠标键时触发。 onmouseup：释放按下的鼠标键时触发。 onmousemove：当鼠标在节点内部移动时触发。当鼠标持续移动时，该事件会连续触发。 onmouseenter：鼠标进入一个节点时触发，进入子节点不会触发这个事件。 onmouseleave：鼠标离开一个节点时触发，离开子节点不会触发这个事件。 onmouseover：鼠标进入一个节点时触发，进入子节点也会触发这个
常用的鼠标事件和键盘事件
qq_66198247的博客
07-21 2486
常用鼠标事件。
常用鼠标事件
Mr_Wangkk的博客
02-23 7297
div{ width: 200px; height: 100px; background-color: blue; } p{ width: 100px; height: 80px; background-color: red } <div><p></p></div.
鼠标事件
段位十足的博客
09-08 2539
click：单击事件。 dblclick：双击事件。 mousedown：按下鼠标键时触发。 mouseup：释放按下的鼠标键时触发。 mousemove：鼠标移动事件。 mouseover：移入事件。 mouseout：移出事件。 mouseenter：移入事件。 mouseleave：移出事件。 contextmenu：右键事件。 mouseover事件和mouseenter事件，都是鼠标进...
鼠标事件、表单事件、键盘事件、焦点事件
m0_48860371的博客
08-30 2299
事件

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值