JavaScript 事件类型
JavaScript 可以处理的事件类型有很多,常见的有UI事件、焦点事件、鼠标事件、滚轮事件、文本事件、键盘事件。还有专门为触摸设备和移动设备准备的触摸事件、手势事件、屏幕方向改变等。
注:冒泡事件即:事件会从层级高的传递给层级低的。
具体事例解释如下:
1、onload事件
load事件会在页面或图像加载完成立即执行。
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
//方法1:给window的onload属性设置函数
window.onload = function () { // 函数在页面执行完毕之后自动执行。
alert("页面加载完毕")
};
</script>
</head >
<!--方法2: HTML事件处理: 给body 的onload属性直接设置 JavaScript代码, 也可以调用函数-->
<body οnlοad="alert('页面加载完毕!')">
<img src="test.jpg" οnlοad="{alert(' 图像加载完毕!')}">
</body>
</html>
2、onscroll事件
onscroll事件,当滚动条或滚动式触发。事件在window上面触发。由于滚动过程中,会重复多次调用,所以,处理逻辑和代码不能过于复杂,否则会影响用户滚动效果。
<script type="text/javascript">
window.onscroll = function () {
console.log("开始滚动...");
//获取滚动距离。
//document.body.scrollTop: 只支持chorme,火狐和ie不支持, document.documentElement.scrollTop ie和火狐支持 chrome不支持
//得滚动的距离(兼容所有浏览器)
console.log(document.documentElement.scrollTop || document.body.scrollTop);
}
</script>
3、onresize事件
当浏览器窗口被调整到一个新的高度或宽度时,就会触发 resize 事件。这个事件在 window (窗
口)上面触发。所以也可以在body元素中使用 onresize 属性来指定事件处理程序
<script type="text/javascript">
//当窗口发生变化的时候,可以获取浏览器新的可视宽和高做相应的操作
window.onresize = function () {
var width = window.innerWidth || document.documentElement.clientWidth ;
var height = window.innerHeight || document.documentElement.clientHeight;
console.log("窗口发生了变化" + "宽:" + width + ";高:" + height);
}
</script>
4、onfocus(获得焦点)事件
当元素获得焦点时触发。这个事件可以发生在任何的元素上,但一般情况下只有输入框才有焦点。
这个事件不会冒泡( 也就是不会再往上层传递 )
<body>
<div id="div1">
<input id="input1" name="user">
</div>
<p id="p1">上面的文本框获得焦点后会我会变成红色</p>
<script type="text/javascript">
var p1 = document.getElementById("p1");
var textInput = document.getElementById("input1");
textInput.onfocus = function () {
p1.style.color = "red";
};
var div1 = document.getElementById("div1");
//当div中input获取焦点后,不会冒泡到上层div,所以这个函数不会执行。
div1.onfocus = function () {
div1.style.backgroundColor = "#000";
}
</script>
</body>
onfocusin(获得焦点)事件 (冒泡版)
注意: 在 Firefox 浏览器中不支持 onfocusin 事件,且在 Chrome, Safari 和 Opera 15+ 浏览器中使用 onfocusin 事件可能无法正常工作。 但是,他作为一个 HTML 元素,通过使用 addEventListener() 方法(后面讲解)可以正常工作。
<body>
<div id="div1">
<input id="input1" name="user">
</div>
<p id="p1">上面的文本框获得焦点后会我会变成红色</p>
<script type="text/javascript">
var p1 = document.getElementById("p1");
var textInput = document.getElementById("input1");
textInput.onfocusin = function () {
p1.style.color = "red";
};
var div1 = document.getElementById("div1");
//当div中input获取焦点后,并且会冒泡到上层div,所以这个函数也会执行。
div1.onfocusin = function () {
div1.style.backgroundColor = "#000";
}
</script>
</body>
5、onblur(失去焦点)事件
当元素失去焦点是触发。和onfucs对应。(不冒泡事件)
<body>
<div id="d"></div>
<p id="p1">上面的文本框获得焦点后会我会变成红色,失去焦点会变成蓝色</p>
<script type="text/javascript">
var p1 = document.getElementById("p1");
var d = document.getElementById("d");
d.onfocus = function () {
p1.style.color = "red";
};
d.onblur = function () {
p1.style.color = "green";
};
</script>
</body>
onfocusout(失去焦点)事件
onblur的(冒泡版)
注意: 在 Firefox 浏览器中不支持 onfocusout 事件,且在 Chrome, Safari 和 Opera 15+ 浏览器中使用 onfocusout 事件可能无法正常工作。 但是,他作为一个 HTML 元素,通过使用 addEventListener() 方法(后面讲解)可以正常工作。
<body>
<div id="div1">
<input id="input1" name="user">
</div>
<p id="p1">上面的文本框获得焦点后会我会变成红色</p>
<script type="text/javascript">
var p1 = document.getElementById("p1");
var textInput = document.getElementById("input1");
textInput.onfocusin = function () {
p1.style.color = "red";
};
var div1 = document.getElementById("div1");
//当div中input获取焦点后,并且会冒泡到上层div,所以这个函数也会执行。
div1.onfocusin = function () {
div1.style.backgroundColor = "#000";
}
// 给div1设置失去焦点事件
div1.onfocusout = function () {
div1.style.backgroundColor = "#f0f";
}
</script>
</body>
6、onclick事件处理程序
鼠标单击事件(鼠标按下放开后触发),一般是鼠标左键。
<body>
<div id="single">单击触发</div>
<script type="text/javascript">
var single = document.getElementById("single");
single.onclick = function () {
alert("onclick事件");
};
</script>
</body>
7、ondblclick事件处理程序
一般是鼠标左键双击。双击放开后触发。
<body>
<div id="double">双击触发</div>
<script type="text/javascript">
var double = document.getElementById("double");
double.ondblclick = function () {
alert("你双击了div");
}
</script>
</body>
8、onmousedown事件处理程序
当用户 按下任意鼠标按钮 时触发。按下即刻触发。
<body>
<div id="down">按下鼠标即刻触发</div>
<script type="text/javascript">
var down = document.getElementById("down");
down.onmousedown = function () {
alert("你按下鼠标键");
}
</script>
</body>
9、onmouseup事件处理程序
用户释放鼠标按钮时触发,放开鼠标即刻触发。
<body>
<div id="up">在此元素上方放开鼠标即刻触发</div>
<script type="text/javascript">
var up = document.getElementById("up");
up.onmouseup = function () {
alert("在这里放开鼠标键");
}
</script>
</body>
10、onmouseover事件
onmouseover当鼠标移动到一个元素的上方时触发。(冒泡事件)
<body>
<div id="color">当鼠标移动到我上方时,字体颜色变为红色</div>
<script type="text/javascript">
var color = document.getElementById("color");
//当鼠标移动到div的上方时触发
color.onmouseover = function () {
color.style.color = "red";
};
</script>
</body>
11、onmouseout事件
onmouseout当鼠标从一个元素的上方移走的时候触发。(冒泡事件)
<body>
<div id="color">当鼠标移动到我上方时,字体颜色变为红色;当鼠标从我上方移开时,变回黑色</div>
<script type="text/javascript">
var color = document.getElementById("color");
//当鼠标移动到div的上方时触发
color.onmouseover = function () {
color.style.color = "red";
};
//当鼠标从div的上方离开时触发
color.onmouseout = function () {
color.style.color = "black";
}
</script>
</body>
注意:
onmouseover事件和onmouseout事件这两个事件均是冒泡事件:
此案例中,鼠标移入span和离开span的时候,span和div动会同时触发onmouseover和onmouseout事件,而如果鼠标只是移入 div和离开div时,只有 div会触发onmouseover和onmouseout事件。
<body>
<div id="color">
当鼠标移动到我上方时,我就变色;当鼠标从我上方移开时,我就褪色
<br>
<span id="span">
我是子元素的区域
</span>
</div>
<script type="text/javascript">
var color = document.getElementById("color");
//当鼠标移动到div的上方时触发
color.onmouseover = function () {
color.style.color = "red";
};
//当鼠标从div的上方离开时触发
color.onmouseout = function () {
color.style.color = "black";
};
var span = document.getElementById("span");
//当鼠标移动到div的上方时触发
span.onmouseover = function () {
span.style.color = "yellow";
};
//当鼠标从div的上方离开时触发
span.onmouseout = function () {
span.style.color = "green";
}
</script>
</body>
12、键盘事件
三个键盘事件:
keydown:当用户按下键盘上的任意键时触发,而且如果按住不放的话,会重复触发此事件。
keypress:当用户按下键盘上的字符键时触发,而且如果按住不放的话,会重复触发此事件。
keyup:当用户释放键盘上的任意键时触发。
三个事件的响应处理程序:
<body >
<div><input id="test"></div>
<script type="text/javascript">
//如果想要整个页面都响应,则将事件设置给body标签即可
var test = document.getElementById("test");
test.onkeydown = function () {
console.log("你按下了任意键");
};
// test.onkeypress = function () {
// console.log("你按下了字符键");
// };
test.onkeyup = function () {
console.log('你松开了键盘');
};
</script>
</body>
获取键盘按下的具体按键:
<body id="body">
<script type="text/javascript">
var body = document.getElementById("body");
body.onkeypress = function (e) {
console.log("你按下了字符键:" + e.keyCode);
};
body.onkeyup = function (e) {
console.log('你松开了按键:' + e.keyCode);
};
body.onkeydown = function (e) {
// if(e.ctrlKey&&e.altKey){
// alert("同时按下了ctrl和alt键");
// }
if (e.ctrlKey) {
alert("按下了ctrl键")
} else if (e.shiftKey) {
alert("按下了shift键")
} else if (e.altKey) {
alert("按下了alt键")
}
};
</script>
</body>