js 鼠标和键盘事件
2024-08-23 12:56:45
鼠标事件
聚焦事件
<input type="text" id="box1">
<script>
var box1 = document.getElementById("box1");
function Hello () {
alert("Hello,小潘");
}
box1.addEventListener("focus",Hello, false);
</script>
离焦事件
<input type="text" id="box1">
<script>
var box1 = document.getElementById("box1");
function Hello () {
alert("Hello,小潘");
}
box1.addEventListener("blur",Hello, false);
</script>
鼠标单击和双击
<div id="box1"></div>
<script>
var box1 = document.getElementById("box1");
function Hello () {
console.log('单击');
}
box1.addEventListener("click",Hello, false);
box1.addEventListener("dblclick", () => {
console.log('双击');
}, false);
</script>
这里会出现一个问题,如果只双击的话,会先执行两次单击事件再执行双击事件
下面提供一个解决办法
<div id="box1"></div>
<script>
var box1 = document.getElementById("box1");
var time;
box1.addEventListener("click", () => {
clearTimeout(time);
time = setTimeout( () => {//利用定时器延迟
console.log('单击');
},300);
}, false);
box1.addEventListener("dblclick", () => {
clearTimeout(time);//再定时器生效前将它去除
console.log('双击');
}, false);
</script>
鼠标的其他事件
<ul>
<li>鼠标进入变红色</li>
<li>鼠标离开变蓝色</li>
<li>鼠标按下字体放大两倍</li>
<li>鼠标抬起字体缩小两倍</li>
</ul>
<script>
var li = document.getElementsByTagName("li");
for (var i = 0; i < li.length; i++) {
li[i].addEventListener("mouseover" ,function() {//匿名函数this不存在
this.style.backgroundColor = 'red';
},false);
li[i].addEventListener("mouseout" ,function() {
this.style.backgroundColor = 'blue';
},false);
li[i].addEventListener("mousedown" ,function() {
this.style.fontSize = parseInt(getComputedStyle(this,null).fontSize) * 2 +"px";
},false);
li[i].addEventListener("mouseup" ,function() {
this.style.fontSize = parseInt(getComputedStyle(this,null).fontSize) / 2 +"px";
},false);
li[i].addEventListener("mouseover" ,function() {
},false);
document.addEventListener("mousemove" , function () {
console.log("鼠标在移动");
})
}
</script>
【注】如果鼠标按下后把鼠标移出再抬起,则字体放大后不会再缩小
鼠标事件对象
<script>
document.addEventListener("click", function(e) {//e为传入是事件
var event = e || window.event;//IE浏览器e不存在
console.log(event);
}, false);
</script>
部分属性如下:
属性/方法 | 说明 |
---|---|
clientx | 浏览器可视窗口水平方向的坐标 |
clientY | 浏览器可视窗口垂直方向的坐标 |
pageX | 页面中水平方向的坐标 |
pageY | 页面中垂直方向的坐标 |
screenX | 电脑屏幕水平方向的坐标 |
screenY | 电脑屏幕垂直方向的坐标 |
button | 0、左键 1滚轮键 2右键 |
键盘事件
<script>
document.addEventListener("keydown", function(e) {//e为传入是事件
var event = e || window.event;//IE浏览器e不存在
console.log(event);
}, false);
</script>
从输出可以看出,event是一个对象,里面有很多成员,可以根据成员里面的值来判断按下的键是什么
最新文章
- span 与p 的区别,以及内联元素的作用
- c#使用aspose.cells 从datatable导出数据到excel
- 转:如何学习SQL(第四部分:DBMS扩展功能与SQL高级话题)
- Photoshop:不起眼的背景橡皮擦
- Hide/Show running Console
- Java程序修改文件名
- Agile.Net 组件式开发平台 - 组件开发示例
- JAXB - Hello World with Namespace
- Zephyr-开发流程
- PHP学习笔记十五【面向对象二】
- SQL Server中 sysobjects、syscolumns、systypes
- 通过wireshark学习Traceroute命令(UDP,ICMP协议)
- css设置文字上下居中,一行文字居中,两行或多行文字同样居中。
- ServiceLoader详解
- 信用评分卡 (part 3of 7)
- java 期末考试复习
- oracle执行计划相关
- django创建app、在视图函数及url中使用参数、url命名、通过redirect实现网页路径跳转
- shell中后台进程管理: ps -aux 详解
- HTML5学习笔记(十七):访问器和class关键字
热门文章
- 使用Jmeter执行接口自动化测试-如何初始化清空旧数据
- spl_autoload_register 实现自动加载
- 鸿蒙内核源码分析(文件系统篇) | 用图书管理说文件系统 | 百篇博客分析OpenHarmony源码 | v63.01
- 鸿蒙内核源码分析(中断管理篇) | 江湖从此不再怕中断 | 百篇博客分析OpenHarmony源码 | v44.02
- Go语言之循环与条件判断
- 巧用优先队列:重载运算符在STL优先队列中的应用
- std::sort 的注意事项
- mysql增删改查——条件查询+模糊查询
- PublishFolderCleaner 让你的 dotnet 应用发布文件夹更加整洁
- Noip模拟41 2021.8.16