DOM —— 事件类型

最新推荐文章于 2022-12-13 08:04:20 发布

z_小张同学

最新推荐文章于 2022-12-13 08:04:20 发布

阅读量142

点赞数 1

分类专栏： DOM 文章标签： javascript 前端

本文链接：https://blog.csdn.net/z_2532040197/article/details/125857779

版权

DOM 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

鼠标事件：

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_小张同学

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
DOM —— 事件类型

DOM中的事件的类型及使用
复制链接

扫一扫

专栏目录

DOM —— 事件类型

“相关推荐”对你有帮助么？