js事件
HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。
常用事件
- onload 加载完成事件： 页面加载完成之后触发，常用于初始化操作
- onclick 单击事件： 常用于按钮的点击操作。
- onblur 失去焦点事件： 常用用于输入框失去焦点后验证其输入内容是否合法。
- onchange 内容发生改变事件： 常用于下拉列表和输入框内容发生改变后操作
- onsubmit 表单提交事件： 常用于表单提交前，验证表单项是否合法，如：是否填写登录名
事件注册（事件绑定）
告诉浏览器，当触发事件时，要执行的函数
有以下方式：
- html标签绑定
- 直接绑定（DOM0级）
- 事件监听（DOM2级）
html标签绑定
通过 html 标签的事件属性，指定 触发事件时，要执行的函数
例子
<script>
function test() {
alert("点击按钮");
}
</script>
<button onclick="test();">按钮</button>
通过 标签的 onclick 属性，指定 点击事件调用 test() 函数
直接绑定（DOM0级）
通过 js 代码，指定 触发事件时，要执行的函数
例子
<script>
function test() {
alert("点击按钮");
}
//页面加载完成之后，执行此函数
window.onload=function(){
//获取 id 是btn的对象
var btnObj = document.getElementById("btn");
//绑定onclick事件
btnObj.onclick = test
}
</script>
<button id="btn">按钮</button>
事件监听（DOM2级）
符合DOM2的规定，绑定后可以设定事件流的顺序
dom对象.addEventListener(eventType,fun,eventFlow);
形参：
- eventType：事件类型，例如
click（没有on），字符串类型。 - fun：响应函数，可以为匿名函数，但使用匿名函数 无法解除绑定，在函数中
this指向当前 dom对象。 - eventFlow：控制事件在冒泡时触发还是在捕获时触发
false：事件在冒泡阶段触发，默认值true：事件在捕获阶段执行
例子
<script>
function test() {
alert("点击按钮");
}
//页面加载完成之后，执行此函数
window.onload=function(){
//获取 id 是btn的对象
var btnObj = document.getElementById("btn");
//绑定onclick事件
btnObj.addEventListener("click",test)
}
</script>
<button id="btn">按钮</button>
事件解除绑定
dom对象.removeEventListener(eventType,fun);
形参：
- eventType:事件类型，例如
click（没有on），字符串类型。 - fun：响应函数名，匿名函数无法解除
例子
<script>
function test() {
alert("点击按钮");
}
//页面加载完成之后，执行此函数
window.onload=function(){
//获取 id 是btn的对象
var btnObj = document.getElementById("btn");
//绑定onclick事件
btnObj.addEventListener("click",test)
//获取 id 是btn的对象
var btnObj2 = document.getElementById("btn2");
//绑定onclick事件
btnObj2.addEventListener("click",function(){
btnObj.removeEventListener("click",test)
})
}
</script>
<button id="btn">按钮</button>
<button id="btn2">解除事件监听</button>