事件
某些组件被执行某些操作之后触发某些代码的执行
- 事件:某些操作 如单击 双击 键盘按下 鼠标移动
- 事件源:某些组件 如 按钮 文本框
- 监听器:某些代码
- 注册监听:将事件,事件源和监听器绑定在一起,当事件源上发生某个事件,则触发监听器
注册监听方式
参考简单事件入门
- 使用标签体内属性
<div onclick="alert('click')"></div>
- 通过元素对象设置属性
var div = document.getElementById("div");
div.onclick = function(){
alert("click");
}
常见事件
一. 点击事件
事件 | 描述 |
---|
onclick | 单击事件 |
ondbclick | 双击事件 |
<div id="div1"></div>
<script>
var div = document.getElementById("div1");
div.ondblclick = function () {
alert("div被双击");
}
</script>
二. 焦点事件
事件 | 描述 |
---|
onblur | 失去焦点 |
onfocus | 获得焦点 |
var input = document.getElementById("input1");
input.onblur = function () {
console.log("失去焦点");
}
input.onfocus = function () {
console.log("获得焦点");
}
三. 加载事件
在之前的JS学习中,我们知道JS代码可以插入到html文件的任何部分,但是在获取元素对象时,如果获取对象的代码在该对象之前,则会获取到null对象
<script>
alert(document.getElementById("div"));
</script>
<div id="div"></div>
这是因为在JS代码执行时,他下面的div元素并没有加载出来,当时我们通过将JS代码移到div元素之下解决,同样,我们可以使用onload方法在页面加载完成后执行JS代码
<script>
window.onload = function () {
alert(document.getElementById("div"));
}
</script>
<div id="div"></div>
四. 鼠标事件
事件 | 描述 |
---|
onmousedown | 鼠标按键被按下 |
onmouseup | 鼠标按键被松开 |
onmousemove | 鼠标被移动 |
onmouseover | 鼠标移到某元素之上 |
onmouseout | 鼠标从某元素移开 |
var div = document.getElementById("div1");
div.onmouseover = function () {
console.log("鼠标移动到div");
}
div.onmousedown = function () {
console.log("鼠标点击div");
}
div.onmouseout = function () {
console.log("鼠标离开div");
}
div.onmouseup = function () {
console.log("鼠标松开");
}
div.onmousemove = function () {
console.log("鼠标在div上移动");
}
五. 键盘事件
事件 | 描述 |
---|
onkeydown | 某个键盘按键被按下 |
onkeyup | 某个键盘按键被松开 |
onkeypress | 某个键盘按键被按下并松开 |
window.onkeydown = function () {
console.log("键盘按键按下");
}
window.onkeyup = function () {
console.log("键盘按键松开");
}
window.onkeypress = function () {
console.log("键盘按键按下并松开");
}
六. 选中/改变事件
事件 | 描述 |
---|
onchange | 文本被改变 |
onselect | 文本被选中 |
var input = document.getElementById("input1");
input.onchange = function () {
console.log("内容改变");
}
input.onselect = function () {
console.log("内容被选中");
}
该事件一般用于下拉选项框,实现联动事件
<select id="select">
<option>请选择</option>
<option>AAA</option>
<option>BBB</option>
<option>CCC</option>
</select>
<script>
var selection = document.getElementById("select");
selection.onchange = function () {
console.log("选项改变");
}
</script>
七. 表单事件
事件 | 描述 |
---|
onsubmit | 确认按钮被点击 |
onreset | 重置按钮被点击 |
var form = document.getElementById("from");
form.onsubmit = function () {
alert("表单提交");
}
onsubmit可以阻止表单提交,如果事件触发的方法返回true或无返回值,表单则被提交,如果返回false,则阻止表单提交