定义:
响应用户操作、完成交互效果
组成:
触发谁的事件:事件源
触发的什么事件:事件类型
触发以后做什么:事件处理函数
事件绑定:
方式1:
box1.onclick=function(){
console.log("div1")
}
box1.onclick=function(){
console.log("div2")
}
以上这种方式进行事件绑定时,后面的会覆盖掉前面的,故最终单击元素时只会打印出div2
方式2:addEventListener()事件监听函数:可以绑定多事件函数,依次执行
box2.addEventListener("click",function(){
console.log("box2_1")
})
box2.addEventListener("click",function(){
console.log("box2_2")
})
此种方式可以给事件绑定多个事件处理函数,且不会被覆盖,依次执行
兼容性问题解决:主要是解决低版本ie浏览器的兼容性问题,但此方法ie11已经不支持了,此种绑定函数还需要在事件前面加上on,但使用addEventListener时已经不需要这样做了
box2.attachEvent("onclick",function(){
console.log("兼容性")
})
事件解绑
方式1:
box1.onclick=function(){
console.log("谢谢惠顾")
this.onclick=null
}
方式2:
function test(){
console.log("谢谢惠顾")
//解绑
this.removeEventListener("click",test)
}
box2.addEventListener("click",test)
兼容性问题解决:
function test2(){
console.log("谢谢惠顾")
解绑
box2.detachEvent("onclick",test2)
}
box2.attachEvent("onclick",test2)
事件类型:单击/双击事件
var div_0=document.querySelector("#div_0")
var div_1=document.querySelector("#div_1")
var div_2=document.querySelector("#div_2")
var div_3=document.querySelector("#div_3")
div_0.onclick=function(){
console.log("单击事件")
}
div_1.ondblclick=function(){
console.log("双击事件")
}
//mousedown mousemove mouseup
div_2.onmousedown=function(){
console.log("鼠标按下,不松手")
}
div_2.onmousemove=function(){
console.log("鼠标移动")
}
div_2.onmouseup=function(){
console.log("鼠标抬起")
}
//移入 移出mouseover mouseout:不仅在元素本身起作用,还会将事件绑定在子元素上
div_3.onmouseover=function(){
console.log("移入")
}
div_3.onmouseout=function(){
console.log("移出")
}
//移入 移出mouseenter mouseleave:仅仅在元素本身起作用,在其子元素上不起作用
div_3.onmouseenter=function(){
console.log("移入")
}
div_3.onmouseleave=function(){
console.log("移出")
}
键盘事件:
//keydown keyup
username.onkeydown=function(){
console.log("键盘按下")
}
username.onkeyup=function(){
console.log("键盘抬起")
}
表单事件:
//获取/失去焦点 focus blur
//change 对比获取焦点和失去焦点时里面内容不一样才会触发
username.onchange=function(){
console.log("change")
}
//input 只要内容不一样就触发
username.oninput=function(){
console.log("input")
}
//reset(重置事件) submit(提交事件):这两个事件必须在form表单中才能使用
var myform=document.querySelector("#myform")
myform.onreset=function(){
console.log("重置")
}
myform.onsubmit=function(){
console.log("提交")
return false
}
移动端的触摸事件:
//touchstart touchmove touchend
var div_1=document.querySelector("#div_1")
div_1.ontouchstart=function(){
console.log("touchstart")
}
div_1.ontouchmove=function(){
console.log("touchmove")
}
div_1.ontouchend=function(){
console.log("touchend")
}