JS学习笔记第十四期--（DOM编程三）

DOM事件绑定

DOM0级别事件绑定

DOM0级别：DOM最早版本的事件绑定方式，被所有浏览器兼容，绑定方式分为两种，一种是HTML绑定，一种是JS绑定。

HTML绑定

<input type="button" id="btn" value="click me" onclick="show()">

JS绑定

document.getElementById("btn").onclick = show

function show(){
	console.log(1)
}

JS绑定事件时，不能加()，否则会在页面加载时立即执行，同时函数可以替换为匿名函数

DOM2级别事件绑定

DOM2级别：添加了两个监听方法来添加和移除事件处理程序

addEventListener()

document.getElementById("btn").addEventListener("click",show)

第一个参数为事件名，不加on
第二个参数为函数名，不加引号，同时可以绑定匿名函数

removeEventListener()

document.getElementById("btn").removeEventListener("click",show)

此方法用于移除事件绑定，但是无法移除匿名添加的函数

DOM0级事件和DOM2级事件区别

DOM0级事件只能绑定一个函数，如尝试绑定多个，前面的函数会被覆盖

document.getElementById("btn").onclick = function(){
console.log(1)}
document.getElementById("btn").onclick = function(){
console.log(2)}
document.getElementById("btn").onclick = function(){
console.log(3)}

结果为：

DOM2级事件只能可以绑定多个函数，且有执行顺序

document.getElemenyById("btn").addEvevtListener("click",function(){
console.log('a')})
document.getElemenyById("btn").addEvevtListener("click",function(){
console.log('b')})
document.getElemenyById("btn").addEvevtListener("click",function(){
console.log('c')})

结果：

同时，DOM0级事件和DOM2级事件互不影响

function show(){
console.log("show")}
document.getElementById("btn").onclick = show
document.getElemenyById("btn").addEvevtListener("click",show)

结果为：

常用事件表

事件	说明
onload	页面完成加载
onclick	用户点击了HTML元素
onchange	HTML元素已被改变
onkeyup	用户按下键盘按钮松开后
onblur	元素失去焦点
onfocus	元素获得焦点
onmouseover	用户把鼠标移动到HTML元素上
onmouseout	用户把鼠标移开HTML元素
onmousemove	用户移动鼠标