JavaScript基础视频教程总结（121-130章）

最新推荐文章于 2024-05-21 14:15:14 发布

VIP文章 m0_67846661

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量195

点赞数

分类专栏： js 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_67846661/article/details/125100188

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>121-130章总结</title>
</head>
<body>
<pre>
121. 滚轮事件
onmousewheel鼠标滚轮滚动的事件，会在滚轮滚动时触发，
但是火狐不支持该属性
在火狐中需要使用 DOMMouseScroll 来绑定滚动事件
注意该事件需要通过addEventListener()函数来绑定
</pre>
<style type="text/css">
#glbox{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<div id="glbox"></div>
<script type="text/javascript">
console.log("第121");
var glbox = document.getElementById("glbox")
glbox.onmousewheel = function(event){
event = event||window.event
//event.wheelDelta 可以获取鼠标滚轮滚动的方向
//向上滚 120 向下滚 -120
//wheelDelta这个值我们不看大小，只看正负
//alert( event.wheelDelta )
//wheelDelta这个属性火狐中不支持
//在火狐中使用event.detail来获取滚动的方向
//向上滚 -3 向下滚 3
//alert(event.detail);
if ( event.wheelDelta > 0 || event.detail < 0) {
if( this.clientHeight >10){
this.style.height = this.clientHeight -10 + "px"
}
} else{
this.style.height = this.clientHeight + 10 + "px"
}
/*
* 使用 addEventListener()方法绑定响应函数，取消默认行为时不能使用return false
* 需要使用event来取消默认行为event.preventDefault();
* 但是IE8不支持event.preventDefault();这个玩意，如果直接调用会报错
*/
event.preventDefault && event.preventDefault();
/*
* 当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动，
* 这是浏览器的默认行为，如果不希望发生，则可以取消默认行为
*/
return false;
}
//为火狐绑定滚轮事件
bind(glbox,"DOMMouseScroll",glbox.onmousewheel);
function bind(obj , eventStr , callback){
if(obj.addEventListener){
obj.addEventListener(eventStr , callback , false);
}else{
obj.attachEvent("on"+eventStr , function(){
callback.call(obj);
});
}
}
</script>
<pre>
122. 键盘事件
onkeydown
- 按键被按下
- 对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发
- 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快
这种设计是为了防止误操作的发生。
onkeyup
- 按键被松开
键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document。
可以通过keyCode来获取按键的编码
通过它可以判断哪个按键被按下
除了 keyCode，事件对象中还提供了几个属性
altKey，ctrlKey，shiftKey
- 这个三个用来判断alt ctrl 和 shift是否被按下，如果按下则返回true，否则返回false
</pre>
<div class="">
<input type="" placeholder="不能输入数字" />
</div>

最低0.47元/天解锁文章

m0_67846661

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础视频教程总结（121-130章）

JavaScript
复制链接

扫一扫

专栏目录

JavaScript基础视频教程总结（121-130章）

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