JavaScript事件
事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字。
事件是javaScript和DOM之间交互的桥梁。
你若触发,我便执行——事件发生,调用它的处理函数执行相应的JavaScript代码给出响应。
典型的例子有:页面加载完毕触发load事件;用户单击元素,触发click事件。
概念:某些组件被执行了某些操作后,触发某些代码的执行。
前言
* 事件:某些操作。如: 单击,双击,键盘按下了,鼠标移动了
* 事件源:组件。如: 按钮 文本输入框…
* 监听器:代码。
* 注册监听:将事件,事件源,监听器结合在一起。 当事件源上发生了某个事件,则触发执行某个监听器代码。
提示:以下是本篇文章正文内容,下面案例可供参考
一、常见的事件
1.点击事件
- onclick:单击事件
- ondblclick:双击事件
<input type="text" id="onclick" >
<input type="text" id="ondblclick">
<script>
//单击时执行
document.getElementById("onclick").onclick = function() {
alert("被点击了。")
}
//双击时执行
document.getElementById("ondblclick").ondblclick = function() {
alert("被双击了。")
}
</script>
2.焦点事件
- onblur:失去焦点
- onfocus:元素获得焦点。
<input type="text" id="onblur" >
<input type="text" id="onfocus">
<script>
//失去鼠标焦点时执行
document.getElementById("onblur").onblur = function() {
alert("失去焦点。")
}
//获得鼠标焦点时执行
document.getElementById("onfocus").onfocus = function() {
alert("获得焦点。")
}
</script>
3.加载事件
- onload:一张页面或一幅图像完成加载。
//加载完页面后执行
window.onload = function () {
alert("加载完成")
}
4.鼠标事件
- onmousedown 鼠标按钮被按下。
- onmouseup 鼠标按键被松开。
- onmousemove 鼠标被移动。
- onmouseover 鼠标移到某元素之上。
- onmouseout 鼠标从某元素移开。
- 参数:左键 1、中间 0、右键2
<input type="text" id="onmousedown">
<input type="text" id="onmouseup">
<input type="text" id="onmousemove">
<input type="text" id="onmouseover">
<input type="text" id="onmouseout">
<script>
document.getElementById("onmousedown").onmousedown = function ( event ) {
if(event == 0){
document.write("鼠标左键被点击");
}else if (event ==1){
document.write("鼠标中间键被点击");
}else {
document.write("鼠标右键被点击");
}
}
document.getElementById("onmouseup").onmouseup = function () {
alert("鼠标被松开");
}
document.getElementById("onmousemove").onmousemove = function () {
alert("鼠标被移动");
}
document.getElementById("onmouseover").onmouseover = function () {
alert("鼠标被移动到某元素上");
}
document.getElementById("onmouseout").onmouseout = function () {
alert("鼠标从某元素移开");
}
</script>
5.键盘事件
- onkeydown 某个键盘按键被按下。 (不区分大小写)
- onkeyup 某个键盘按键被松开。(不区分大小写)
- onkeypress 某个键盘按键被按下并松开。(区分大小写)
<input type="text" id="onkeydown">
<input type="text" id="onkeyup">
<input type="text" id="onkeypress">
<script>
document.getElementById("onkeydown").onkeydown = function (event) {
alert("键盘"+event.keyCode+"键被按下");
}
document.getElementById("onkeyup").onkeyup = function (event) {
alert("键盘"+event.keyCode+"键被松开");
}
document.getElementById("onkeypress").onkeypress = function (event) {
alert("键盘"+event.keyCode+"键被按下并松开");
}
</script>
6.选择和改变
- onchange 域的内容被改变。
- onselect 文本被选中。
<input type="text" id="onchange">
<input type="text" id="onkeyup">
<script>
document.getElementById("onchange").onchange = function () {
alert("域的内容被改变");
}
document.getElementById("onkeyup").onkeyup = function () {
alert("文本被选中");
}
</script>
7.表单事件
- onsubmit 确认按钮被点击。
- onreset 重置按钮被点击。
<form id="onsubmit">
<input type="text" name="username" >
<select >
<option>--爱好--</option>
<option>唱</option>
<option>跳</option>
<option>rap</option>
</select>
<input type="submit" value="提交">
</form>
<script>
//可以阻止表单提交,多用于表单校验
document.getElementById("onsubmit").onsubmit = function () {
var flag = false;
return flag;
}
</script>