DOM：事件类型

事件类型

鼠标事件

onclick  、ondblclick  、onmousedown、onmouseup、onmouseover、 onmousemove、onmouseleave  、onmouseenter、 onmouseout 、onwheel 、onscroll 、onload         

1、click、 mousedown、mousemove、mouseup、dblclick、 contextmenu、mouseover、mouseout、mouseenter(html5标准)、mouseleave(html5标准)

1. amousedown-->mouseup-->click
2. mousedown是鼠标按下一次就只触发一次；
3.  mousemove与 mousedown无关，相互独立；
4.  补充：移动端没有 mousedown事件，对应的是 touchstart--touchmove--touchend

2、DOM3标准规定：click事件只能监听左键，mousedown和 mouseup来判断鼠标键,event.button来区分鼠标的按键，0/1/2

 

设置样式：

<style>
            .box {
                width: 400px;
                height: 300px;
                background-color: brown;
                cursor: pointer;
                overflow-y: scroll;
            }
            .son{
                width: 200px;
                height: 400px;
                background-color: palegreen;
                cursor: pointer;
                margin: 20px;
                
            }
            /* .son:hover{} */
</style>
        <div class='box'>
            <div class="son">
                
            </div>
            
        </div>

事件：

1、click

子元素和父元素都生效

var box=document.querySelector(".box")
box.addEventListener("click",()=>{
    console.log("鼠标按下和松开时  鼠标指针在被选元素区域内部")
})    

2、dblclick

子元素和父元素都生效

box.addEventListener("dblclick",()=>{
    console.log("鼠标第一次按下和第二次松开时  鼠标指针在被选元素区域内部 并且时间间隔不能太长")
})

3、mousedown

子元素和父元素都生效

box.addEventListener("mousedown",()=>{
    console.log("鼠标在被选元素内按下")
})

4、mouseover

子元素和父元素都生效，且父元素进入子元素 ，子元素进入父元素也都生效

box.addEventListener("mouseover",()=>{
    console.log("鼠标进入被选元素")
})

5、mouseup

子元素和父元素都生效

box.addEventListener("mouseup",()=>{
     console.log("鼠标在被选元素内松开")
})

6、mouseout（区分子元素和父元素）

box.addEventListener("mouseout",()=>{
    console.log("鼠标从被选元素出去")
})

7、mouseleave（不区分子元素和父元素）

box.addEventListener("mouseleave",()=>{
    console.log("鼠标从被选元素出去")
})

8、mouseenter（不区分子元素和父元素）

box.addEventListener("mouseenter",()=>{
    console.log("鼠标从被选元素进去")
})

 9、scroll

box.addEventListener("scroll",function(){
    console.log("元素自己的滚动条滚动啦:单位时间内滚动条的位置发生变化")
})

10、wheel

box.onwheel=function(){
    console.log("鼠标滚轴滚动时 鼠标指针在被选元素内部")
}

 

键盘事件 

onkeydown、onkeyup、onkeypress         

1、keydown、keyup、keypress

a) keydown-->keypress-->keyup b) keydown在按键按下之后会一直不断被触发

2、keydown和 keypress的区别

a) keydown可以响应任意按键(除了Fn键)，keypress只可以响应字符类键盘按键（event.charCode） b)keypress返回 ASCII码，可以转换成相应字符（String.fromCharCode(event.charCode)，区分大小写） // keydown常用于绑定操作类事件处理，keypress常用于绑定字符类事件处理

1、keydown

box2.addEventListener("keydown",function(){
    console.log("输入框的键盘按下")

2、keyup

box2.addEventListener("keyup",function(){
   console.log("输入框的键盘松开")
})

3、keypress

box2.addEventListener("keypress",function(){
    console.log("输入框的键盘按下")
})

4、input

box2.addEventListener("input",function(){
    console.log("输入框在输入就触发")
})

5、change

box2.addEventListener("change",function(){
    console.log("输入框失焦并且value改变")
})

6、focus

box2.addEventListener("focus",function(){
    console.log("输入框获取焦时触发")
})

7、blur

box2.addEventListener("blur",function(){
    console.log("输入框失焦时触发")
})

 

 

输入框操作事件

oninput、onfocus、onblur、onchange

1、input监听 input框在聚焦状态下的文本变化，例：百度搜索

2、 change监听 input框在失焦后的文本变化（与前一次失焦状态的文本对比变化）

3、 focus和blur只在聚焦和失焦的一刻触发一次

 

其他事件  

1、scroll：常用于绑定在window对象上,滚动鼠标时触发 window.onscroll=function(){}

2、load load：等待网页资源下载完毕再执行

img.onload 图片节点加载完毕不会调用 要资源加载完毕就会调用

window.onload：等待页面所有资源下载完成才执行,包括图片资源的下载，所以它是最慢的 ​ 网页加载顺序：url-->下载页面-->domTree，cssTree并行-->渲染树renderTree-->绘制页面-->继续下载图片资源，下载完毕再放到页面上去onload domTree：domTree的形成，是先把元素翻译成的节点对象挂到 domTree上去，再把属性 img_src放到渲染树上去

window.onload=function(){
    console.log("浏览器加载完毕:5大BOM的功能加载完成")
    console.log(document.querySelector(".box"))
}