JavaScript——事件Event对象

事件

某些组件被执行某些操作之后触发某些代码的执行

• 事件：某些操作 如单击 双击 键盘按下 鼠标移动
• 事件源：某些组件 如 按钮 文本框
• 监听器：某些代码
• 注册监听：将事件，事件源和监听器绑定在一起，当事件源上发生某个事件，则触发监听器

注册监听方式

参考简单事件入门

1. 使用标签体内属性

<div onclick="alert('click')"></div>

2. 通过元素对象设置属性

var div = document.getElementById("div");
div.onclick = function(){
    alert("click");
}

常见事件

一. 点击事件

事件	描述
onclick	单击事件
ondbclick	双击事件

<div id="div1"></div>
<script>
    var div = document.getElementById("div1");
    /*
       div.onclick = function () {
          alert("div被单击");
       }
     */
    div.ondblclick = function () {
        alert("div被双击");
    }
</script>

二. 焦点事件

事件	描述
onblur	失去焦点
onfocus	获得焦点

var input = document.getElementById("input1");
input.onblur = function () {
    console.log("失去焦点");
}
input.onfocus = function () {
    console.log("获得焦点");
}

三. 加载事件

事件	描述
onload	页面或图片加载完成

在之前的JS学习中，我们知道JS代码可以插入到html文件的任何部分，但是在获取元素对象时，如果获取对象的代码在该对象之前，则会获取到null对象

<script>
    alert(document.getElementById("div"));  // 弹出null
</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，则阻止表单提交