事件

绑定事件和解绑事件(禁用)

绑定

dom0 类型

box.onclick=function(){
    console.log("1111")
}

缺点：重复绑定之后会覆盖掉前面的

dom2类型

可以绑定多个事件处理函数 按照顺序执行k

box.addEventListener("click",function()
                    {
    console.log("11111111")
})
box.addEventListener("click",function()
                    {
    console.log("22222222")
})
box.addEventListener("click",function()
                     {
    console.log("3333333")
})

解绑

点击之后赋值为空（利用dom0的覆盖）

btn.onclick=function(){
    console.log("谢谢惠顾")
    this.onclick=null
}

dom2解绑

function handler()
                     {
    console.log("谢谢惠顾")
                         this.removeEventListener("click",handler)
})
​
​
btn.addEventListener("click",handler)
​
//btn.removeEventListener("click",handler)

事件类型

鼠标事件

click点击

dbclick双击

contextmenu 右键单击

clientx clienty 距离浏览器可视窗口的左上角的坐标值

pagex pagey距离页面文档流的左上角的坐标值

offsetx offsety 距离触发元素盒子（父元素）的左上角的坐标值

btn.ondblclick=function(){
    console.log("双击执行")
}
//btn"dom节点" on关键字 dblclick事件类型
​
document.oncontextmenu=function(){
    console.log("右键单击")
}
​

contextmenu 右键单击 应用场景自定义右键菜单

• mousedown鼠标按下
• mousemove鼠标移动
• mouseup鼠标抬起

应用于点击某个盒子后盒子跟随

mouseover mouseout 移入移出（在孩子身上也会触发）

mouseenter mouseleave 移入移除（在孩子身上不会触发）

box.onmouseover=function(){
 console.log("移入")
}
box.onmouseout=function(){
 console.log("移出")
}

键盘事件

keydown键盘按下

keyup键盘抬起

username.onkeydown=function(){
    console.log("按下键盘，判断是不是回车键")
}

表单事件

focus 获取焦点

bulr失去焦点

change获取焦点和失去焦点内容改变才会触发

input内容不一样（适用于类似百度那种下拉列表不一样的）

submit提交

reset重置

username.onfocus=function(){
    console.log("按下键盘，判断是不是回车键")
}
username.onblur=function(){
    console.log("按下键盘，判断是不是回车键")
}
username.onchange=function(){
    console.log("change")
}
username.onsubmit=function(){
    console.log("submit 校验表单内容")
    return false
}
username.onrest=function(){
    console.log("reset")
}

触摸事件

适用于手机端

touchstart触摸开始

touchmove触摸移动

touchend触摸移动

username.ontouchstart=function(){
    console.log("touchstart")
}

浏览器事件

load页面全部资源加载完毕

scroll浏览器滚动时触发

事件对象

username.ontouchstart=function(event){
    console.log("event")
}