博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
javascript鼠标及键盘事件总结及案例
阅读量:4444 次
发布时间:2019-06-07

本文共 1032 字,大约阅读时间需要 3 分钟。

一、鼠标事件

1、单击事件

box.onclick

2、双击事件(双击时也会触发单击)

box.ondblonclick

3、鼠标右键

box.oncontextmenu=function(){  console.log('右键事件');  //取消鼠标的默认事件  return false;}

4、按下|移动|抬起|鼠标悬浮|鼠标移开|鼠标右键

onmousedown  鼠标按下onmousemove  鼠标移动onmouseup    鼠标抬起onmouseover  鼠标悬浮onmouserout  鼠标移开(从父集移至子集,触发out事件,紧接着触发子集的over事件,并可以冒泡给父集(触发父集的over))oncontextmenu 鼠标右键onmouseenter  鼠标悬浮()onmouseleave  鼠标移开(leave默认子集是父集的一部分,所以从子集移到父集不会触发,enter事件也不会触发)
enter:父集enter   子集enter  (不支持冒泡)over:子集over  父集over(想当于子集冒泡给父集) (支持冒泡)

总结: 将父集和自己分开考虑盒子的悬浮离开事件,用over | out组合;

​ 将子集纳入父集的考虑当中,只考虑父集的相应悬浮离开事件,采用 enter | leave组合;

​ 单独考虑一个盒子的悬浮离开事件,都可以使用

二、js的盒模型

1、应用

==>100px

2、数字字符转换

var a="1213124"//转化成整型a=+a//如果待单位会转化成NaNa=parseInt(a)//字符的切割a.substr(0,3)==>123  //从0往后取3个单位a.slice(0,2)==>12       //从0取到2,前取后不取

3、获取padding

三、鼠标事件的拖拽案例

1.v1版本

2、鼠标拖拽事件v2版本

四、键盘事件

1、键盘按下事件(键盘按下会一直触发事件)

2、键盘按下移动盒模型案例

四、javascript其他事件

1、onload(文档加载事件)

2、onscroll事件

*100

3、盒子显影与鼠标滚动事件的案例

1)滚动一直触发事件
2)只触发一次

转载于:https://www.cnblogs.com/chuwanliu/p/11048048.html

你可能感兴趣的文章
福大软工 · 真 · 最终作业
查看>>
2018.08.10 atcoder No Need(线性dp)
查看>>
css3 动画
查看>>
数组转对象
查看>>
扫描目录下的文件并拼接在一起
查看>>
ELK 分布式日志处理 10.12
查看>>
Java虚拟机详解05----垃圾收集器及GC参数
查看>>
7. 单位,移动布局
查看>>
inux中bin与sbin目录的作用及区别介绍
查看>>
USACO 3.1 Contact
查看>>
Office之什么是高内聚低耦合
查看>>
一些奇怪的问题求回答
查看>>
这些年踩过的坑
查看>>
iOS开发拓展篇——如何把项目托管到GitHub
查看>>
性能优化之数据库优化
查看>>
类的继承、菱形继承、派生、多态
查看>>
mysql约束
查看>>
javascript鼠标及键盘事件总结及案例
查看>>
mysql表之间的关系及级联操作
查看>>
mac 搭建virtualenv的那些坑
查看>>