JavaScript 事件监听

velpro_!

已于 2023-07-26 23:30:29 修改

阅读量317

点赞数

文章标签： javascript

于 2023-07-25 22:10:12 首次发布

本文链接：https://blog.csdn.net/weixin_52053631/article/details/131907308

版权

语法：元素对象.addEventListener("事件类型",要执行的函数)

事件监听三要素：

事件源：哪个dom元素被触发了，要获取dom元素
事件类型：用什么方式触发，eg:鼠标单击click、鼠标经过mouseover登
事件调用的函数：要做什么事

事件类型：

鼠标事件：click (点击)、mouseenter (鼠标经过)、mouseleave (鼠标离开)
焦点事件：focus (获得焦点)、blur (失去焦点)
键盘事件：keydown (键盘按下触发)、keyup (键盘抬起触发)
文本事件：input (用户输入事件)

鼠标事件：

<body>
<button>按钮</button>
<script>
    // 元素对象.addEventListener("事件类型",要执行的函数)
    // 事件源:按钮    事件类型：click   事件调用的函数：弹出对话框

    const btn = document.querySelector("button")
    // 鼠标点击
    btn.addEventListener("click",function (){
        console.log("鼠标点击")
    })
    const div = document.querySelector("div")
    // 鼠标经过
    div.addEventListener("mouseenter", function () {
        console.log("鼠标经过")
    })
    // 鼠标离开
    div.addEventListener("mouseleave", function () {
        console.log("鼠标离开")
    })
</script>
</body>

焦点事件：

<body>
<input type="text">
<script>
    const input =document.querySelector("input")
    input.addEventListener("focus",function (){
        console.log("获取焦点")
    })
    input.addEventListener("blur",function (){
        console.log("失去焦点")
    })
</script>
</body>

键盘事件：

<input type="text">

<script>
  const input = document.querySelector("input")
  input.addEventListener("keydown",function (){
    console.log("键盘按下了")
  })
  input.addEventListener("keyup",function (){
    console.log("键盘弹起了")
  })
</script>
</body>

文本事件：

<body>
<input type="text">
<script>
  const input = document.querySelector("input")
  input.addEventListener("input",function (){
    console.log("用户输入文本事件")
    console.log(input.value)   // 拿取用户输入的内容
  })
</script>
</body>

要隐藏一个盒子（元素），有以下几种常见css的方法可以实现：
1）display: none
2）visibility: hidden;
3）opacity: 0