当前位置：网站首页>DOM —— 事件类型

DOM —— 事件类型

2022-08-02 14:17:00 【z_小张同学】

鼠标事件：        

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

<body>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: aqua;
            cursor: pointer;
            overflow-y: scroll;
        }

    </style>

    <div class="box"></div>

    <script>

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

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

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

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

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

        box.addEventListener("mouseout",() => {
            console.log(" 鼠标离开被选元素区域内部");
        })

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

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

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

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


    </script>
</body>

键盘事件：        keydown、keyup、keypress

<body>  
      <input type="text" id="box2">
      <script>

        var box2 = document.querySelector("#box2")
        
        box2.addEventListener("keydown",() => {
            console.log("输入框的键盘按下");
        })

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

        box2.addEventListener("keypress",() => {
            console.log("输入框的键盘按下");
        })
     </script>

</body>

keydown和 keypress的区别：

        1) keydown可以响应任意按键(除了Fn键)，keypress只可以响应字符类键盘按键（event.charCode）

        2)keypress返回 ASCII码，可以转换成相应字符（String.fromCharCode(event.charCode)，区分大小写）

        3)keydown常用于绑定操作类事件处理，keypress常用于绑定字符类事件处理

输入框操作事件:        input、focus、blur、change

<body>  
      <input type="text" id="box2">

      <script>

        var box2 = document.querySelector("#box2")
        
        box2.addEventListener("input",() => {
            console.log("输入框的键盘按下");
        })

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

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

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

     </script>

</body>

其他事件:       

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

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

        window.onload：等待页面所有资源下载完成才执行,包括图片资源的下载，所以它是最慢的

        // onload  加载完毕时执行
        window.onload = function() {
            console.log("浏览器加载完毕: 5大BOM的功能加载完成");
        }

原网站

版权声明
本文为[z_小张同学]所创，转载请带上原文链接，感谢
https://blog.csdn.net/z_2532040197/article/details/125857779

边栏推荐

猜你喜欢

随机推荐