一、滑轮滚动事件
+++ 绑定滚动事件(兼容谷歌、IE浏览器)
elem.onmousewheel=function(){ }
绑定滚动事件
event.wheelDelta
只看正负,不看大小。向上滚>0 。向下滚<0
(通过该属性获取的是个数值,在不同的浏览器中获取的值是不同的。)
+++ 绑定鼠标滚动事件(兼容火狐浏览器,火狐特有)
elem.addEventListener("DOMMouseSrolll",function(){})
绑定鼠标滚动事件(兼容火狐浏览器,火狐特有的写法)
event.detail
只看正负,不看大小。向上滚 < 0 。向下滚 > 0
(通过该属性获取的是个数值,在不同的浏览器中获取的值是不同的。)
+++ 滚动事件兼容性处理
elem.onmousewheel=function(event){
event=event||widow.event;
if(event.wheelDelta>0 || event.detail<0){
console.log("向上滚动")
}else{
console.log("向下滚动")
}
}
elem.addEventListener("DOMMouseSrolll",elem.onmousewheel)
1.1 绑定滑轮滚动事件
1)兼容谷歌、IE浏览器,绑定滑轮滚动事件
/**绑定滚动事件*/
document.onmousewheel=function(event){
/** 事件对象的兼容性处理*/
event=event || window.event;
if(event.wheelDelta>0){
console.log("向上滚")
}
if(event.wheelDelta<0){
console.log("向下滚")
}
}
2)兼容火狐浏览器,绑定滑轮滚动事件
/**绑定滚动事件*/
document.addEventListener("DOMMouseScroll",function(event){
event=event||window.event;
if(event.detail>0){
console.log("向下滚")
}else{
console.log("向上滚")
}
})
3)绑定事件兼容性处理
<script>
/** 绑定滚动事件,兼容谷歌、IE浏览器*/
document.onmousewheel=function(event){
event=event||window.event;
//event.wheelDelta 兼容谷歌、IE浏览器
//event.detail 兼容火狐
if(event.wheelDelta >0 || event.detail<0){
console.log("向上滚")
}else{
console.log("向下滚")
}
}
/** 绑定滚动事件,兼容火狐浏览器*/
document.addEventListener("DOMMouseScroll",document.onmousewheel)
</script>
1.2 绑定鼠标滑轮事件案例
实现场景:当鼠标向上滚动时,红色div变长。鼠标向下移动时,红色div变短
1) 案例1
<body >
<div style="width:100px;height:100px;background-color: red;"></div>
</body>
<script>
var div=document.getElementsByTagName("div")[0];
/** 绑定滚动事件,兼容谷歌、IE浏览器*/
document.onmousewheel=function(event){
event=event||window.event;
// 判断鼠标向上滚动
if(event.wheelDelta >0 || event.detail<0){
div.style.height=div.scrollHeight+10+"px";
}
//判断鼠标向下滚动
if(event.wheelDelta <0 || event.detail >0){
div.style.height=div.scrollHeight-10+"px";
}
}
/** 绑定滚动事件,兼容火狐浏览器*/
document.addEventListener("DOMMouseScroll",document.onmousewheel)
</script>
2) 案例2
>>>>>> 问题
在案例1的基础上,当浏览器出现滚动条时,就会出现滑轮滚动,滚动条也动。效果很不友好
<body style="height:2000px">
<div style="width:100px;height:100px;background-color: red;"></div>
</body>
<script>
var div=document.getElementsByTagName("div")[0];
/** 绑定滚动事件,兼容谷歌、IE浏览器*/
div.onmousewheel=function(event){
event=event||window.event;
// 判断鼠标向上滚动
if(event.wheelDelta >0 || event.detail<0){
div.style.height=div.scrollHeight+10+"px";
}
//判断鼠标向下滚动
if(event.wheelDelta <0 || event.detail >0){
div.style.height=div.scrollHeight-10+"px";
}
}
/** 绑定滚动事件,兼容火狐浏览器*/
div.addEventListener("DOMMouseScroll",document.onmousewheel)
</script>
>>>>>> 解决方式
当浏览器出现滚动条时,滑轮滚动,不止div的高度发生变化,浏览器也随之滚动,
这是由于浏览器的默认行为导致,我们要阻止滑轮的默认行为。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="height:2000px">
<div style="width:100px;height:100px;background-color: red;"></div>
</body>
<script>
var div=document.getElementsByTagName("div")[0];
/** 绑定滚动事件,兼容谷歌、IE浏览器*/
div.onmousewheel=function(event){
event=event||window.event;
// 判断鼠标向上滚动
if(event.wheelDelta >0 || event.detail<0){
div.style.height=div.scrollHeight+10+"px";
}
//判断鼠标向下滚动
if(event.wheelDelta <0 || event.detail >0){
div.style.height=div.scrollHeight-10+"px";
}
/**
* 当滚轮滚动时,如果浏览器有滚动条,滚动条也随之滚动。这是浏览器的默认行为。
* 如果不希望发生,可以取消浏览器默认行为。
*/
/**
* 取消浏览器默认行为
* 1、return false 取消通过JS事件绑定的默认行为
* 2、event.preventDefault() 取消通过事件监听绑定的默认行为
*/
event.preventDefault();
return false;
}
/** 绑定滚动事件,兼容火狐浏览器*/
div.addEventListener("DOMMouseScroll",document.onmousewheel)
</script>
</html>
二、鼠标滚动事件
1)鼠标滚动事件wheel与scroll的区别
scrool事件:
1、当鼠标滑动或滚动条滚动时就会触发回调函数
2、回调函数执行和滚动条滚动默认行为同时执行
wheel事件:
1、当鼠标滚动时就会触发回调函数
2、回调函数执行完毕后才会执行滚动条滚动默认行为
2)鼠标滚动事件wheel与scroll的区别
wheel事件和scroll事件的区别:
1、scroll事件当鼠标滑动或滚动条滚动时就会触发,而wheel事件只有当鼠标滚动时才会触发。
2、scroll事件触发时,回调函数和滚动条滚动默认行为同时执行。
wheel事件触发,回调函数执行完毕后才会执行滚动条滚动的默认行为。
2)鼠标滚动事件和滑轮滚动事件的区别
onmousewheel事件
该事件发生在鼠标滚轮滚动时,火狐中,使用DOMMouseScroll跟其细节事件代替。
注意:onmousewheel和DOMMouseScroll事件,
在没有滚动条或者内容没有被滚动的时候也会发生,
意思是只要鼠标动不管页面动不动。如果你是想一个元素内容滚动后接受一个通知的话,使用onscroll事件。
onscroll、onwheel事件
事件发生在元素内容滚动的时候,也包括键盘上下键,载入也可触发。事件仅仅在有滚动条时发生,使用overflow属性为元素创建一个滚动条。
使用window.scroll必须要有滚动条才能触发,一般配合$(window).scrollTop()使用.
3)案例
>>>>>> scroll事件
scoll事件,鼠标滚动和滚动条滚动都会触发回调函数;回调函数和滚动事件同时进行
<div onscroll="show()" style="height:200px;background-color: red;overflow: auto;">
<br/><br/>22<br/><br/><br/>22<br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<script>
function show(){
for (var i = 0; i < 10000; i++) {
console.log(i);
}
}
</script>
>>>>>> wheel事件
wheel事件,鼠标滚动时会触发回调函数,而滚动条滚动则不会触发回调函数。
回调函数执行完毕后,才会执行滚动条滚动的默认行为。
<div onwheel="show()" style="height:200px;background-color: red;overflow: auto;">
<br/><br/>22<br/><br/><br/>22<br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<script>
function show(){
for (var i = 0; i < 10000; i++) {
console.log(i);
}
}
</script>
二、键盘事件
+++ 键盘事件:键盘事件一般绑定给可以获取焦点的对象或者document。
(比如div不能获取焦点,所以就不能绑定键盘事件)
onkeydown 表示按键被按下
1、如果一直按着某个按键不松手,则事件会一直触发。
2、当onkeydown事件连续触发时,第一次触发和第二次触发会有明显时间间隔,而其他的会非常快。
这种设计是为了方式误操作的发生。
onkeyup 表示按键被松开
+++ 键盘事件相关属性
keyCode 获取按的是哪一个按键。获取按键的ASCII码值
altKey 判断"ALT" 按键是否被按下
ctrlKey 判断"CTRL" 键是否被按下
shiftKey 判断"SHIFT" 键是否被按下。
metaKey 返回当事件被触发时,"meta" 键是否被按下。
2.1 键盘事件
1)onkeydown事件,按键被按下时触发
document.onkeydown=function(){
console.log("按键被按下了")
}
2)onkeyup 事件,按键抬起时触发
document.onkeyup=function(){
console.log("按键被按抬起了")
}
3)键盘事件注意事项
>>>>>> 对于onkeydown事件,如果按着按键不动手,则会一直触发
document.onkeydown=function(){
console.log("按键被按下了")
}
>>>>>> 键盘事件一般绑定给可以获取焦点的对象或者document对象。如果是div,则不会被触发。
按键事件绑定给div,则按键事件不会触发
<body>
<div style="width:100px;height:100px;background-color: red;"></div>
</body>
<script>
var div=document.getElementsByTagName("div")[0];
div.onkeydown=function(){
console.log("div按键事件被触发")
}
</script>
按键事件绑定给可以获取焦点的对象或document,则可以触发
<body style="height:2000px">
<input type="text">
</body>
<script>
var input=document.getElementsByTagName("input")[0];
input.onkeydown=function(){
console.log("input按键事件被触发")
}
</script>
2.2 键盘事件相关属性
1)获取哪一个按键被按下
<script>
document.onkeydown=function(event){
event=event||window.event;
//获取按键的ASCII码值
console.log(event.keyCode);
console.log(event.ctrlKey); //判断"CTRL" 键是否被按下
console.log(event.altKey); //判断"ALT" 按键是否被按下
console.log(event.shiftKey);//判断"SHIFT" 键是否被按下。
}
</script>
2)同时按住ctrl+A,如果是则触发
<script>
document.onkeydown=function(event){
event=event||window.event;
//获取按键的ASCII码值
console.log(event.keyCode);
if(event.keyCode==65 && event.ctrlKey ){
console.log("ctrl+A同时被按下")
}
}
</script>
2.3 键盘事件案例
1)在文本框中不能输入数字
原理:文本框中输入内容是onkeydown的默认行为。取消默认行为即可
<body>
<input type="text">
</body>
<script>
var input=document.getElementsByTagName("input")[0];
input.onkeydown=function(event){
event=event||window.event;
//0-9的keycode为48-57
if(event.keyCode>=48 && event.keyCode<=57){
//取消文本框的默认行为
return false;
}
}
</script>
2)键盘按键控制DIV移动
缺点:按键持续按下时,第一次有明显的卡顿
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body >
<div style="width:100px;height: 100px;background-color: red; position: absolute;"></div>
</body>
<script>
var div=document.getElementsByTagName("div")[0];
document.onkeydown=function(event){
event=event||window.event;
//通过keyCode可以获取上下左右的码值
//左:37 上:38 右:39 下:40
console.log(event.keyCode)
//按下左键
if(event.keyCode==37){
div.style.left=(div.offsetLeft-10)+"px"
}
//按下上键
if(event.keyCode==38){
div.style.top=(div.offsetTop-10)+"px"
}
//按下右键
if(event.keyCode==39){
div.style.left=(div.offsetLeft+10)+"px"
}
//按下下键
if(event.keyCode==40){
div.style.top=(div.offsetTop+10)+"px"
}
//取消浏览器默认行为
return false;
}
</script>
</html>
三、JS常规事件全解
1、JS提供的事件方法在使用HTML标签事件绑定、JS事件绑定时,要加上on。
在使用事件监听方式绑定时,不需要加。
click 当用户单击元素时发生此事件。
dblclick 当用户双击元素时发生此事件。
keydown 当用户正在按下键时,发生此事件。
keypress 当用户按下键时,发生此事件。
keyup 当用户松开键时,发生此事件。
focus 在元素获得焦点时发生此事件。 FocusEvent
focusin 在元素即将获得焦点时发生此事件。 FocusEvent
focusout 在元素即将失去焦点时发生此事件。 FocusEvent
blur 当元素失去焦点时发生此事件。 FocusEvent
mousedown 当用户在元素上按下鼠标按钮时,发生此事件。 MouseEvent
mouseenter 当指针移动到元素上时,发生此事件。 MouseEvent
mouseleave 当指针从元素上移出时,发生此事件。 MouseEvent
mousemove 当指针在元素上方移动时,发生此事件。 MouseEvent
mouseout 当用户将鼠标指针移出元素或其中的子元素时,发生此事件。 MouseEvent
mouseover 当指针移动到元素或其中的子元素上时,发生此事件。 MouseEvent
mouseup 当用户在元素上释放鼠标按钮时,发生此事件。 MouseEvent
mousewheel 不推荐使用。请改用 wheel 事件。 WheelEvent
change 当form元素的内容、选择的内容或选中的状态发生改变时,发生此事件 Event
copy 当用户复制元素的内容时发生此事件。 ClipboardEvent
cut 当用户剪切元素的内容时发生此事件。 ClipboardEvent
paste 当用户将一些内容粘贴到元素中时,发生此事件。 ClipboardEvent
drag 拖动元素时发生此事件。 DragEvent
dragend 当用户完成拖动元素后,发生此事件。 DragEvent
dragenter 当拖动的元素进入放置目标时,发生此事件。 DragEvent
dragleave 当拖动的元素离开放置目标时,发生此事件。 DragEvent
dragover 当拖动的元素位于放置目标之上时,发生此事件。 DragEvent
dragstart 当用户开始拖动元素时发生此事件。 DragEvent
drop 当将拖动的元素放置在放置目标上时,发生此事件。 DragEvent
durationchange 媒体时长改变时发生此事件。 Event
input 当元素获得用户输入时,发生此事件。
load 在对象已加载时,发生此事件。
loadstart 当浏览器开始查找指定的媒体时,发生此事件。 ProgressEvent
reset 重置表单时发生此事件。 Event
scroll 滚动元素的滚动条时发生此事件。
submit 在提交表单时发生此事件。 Event
wheel 当鼠标滚轮在元素向上或向下滚动时,发生此事件。 WheelEvent
3.1 onload事件的变形
<body onload="load()">
</body>