事件监听器的类型

Meat_doll

于 2022-07-20 16:06:40 发布

阅读量324

点赞数 1

CC 4.0 BY-SA版权

分类专栏： DOM 文章标签： css html css3

本文链接：https://blog.csdn.net/Meat_doll/article/details/125859145

DOM 专栏收录该内容

9 篇文章

订阅专栏

这篇博客详细介绍了JavaScript中常见的交互事件，包括点击、双击、鼠标进入离开元素、滚动以及键盘事件。通过示例代码展示了如何监听并响应这些事件，为网页增加动态交互效果。同时，还提及了输入框焦点类型和页面加载完成时的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

公用部分

    <script>
//点击
var box=document.querySelector(".box")
  box.addEventListener("click",function(){
    console.log("鼠标按下松开")
  })

1、点击事件

    <script>
//点击
var box=document.querySelector(".box")
  box.addEventListener("click",function(){
    console.log("鼠标按下松开")
  })

2、双击

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

3、元素进去，出来

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

  box.addEventListener("mouseout",function(){
    console.log("鼠标被选元素出去")
  })
  
box.addEventListener("ouseleave",function(){
    console.log("鼠标出去被选元素")
  })
  
box.addEventListener("mouseenter",function(){
    console.log("鼠标进入被选元素")
  })

4、滚动 onwheel scroll (单位时间内滚动条发生的变化)

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

5、键盘事件

6、输入框焦点的类型

7、onload 加载完毕时执行