JavaScript 事件监听

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

事件监听三要素:

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

事件类型:

  • **鼠标事件:**click (点击)、mouseenter (鼠标经过)、mouseleave (鼠标离开)
  • **焦点事件:**focus (获得焦点)、blur (失去焦点)
  • **键盘事件:**keydown (键盘按下触发)、keyup (键盘抬起触发)
  • **文本事件:**input (用户输入事件)
html 复制代码
<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>

要隐藏一个盒子(元素),有以下几种常见css的方法可以实现:

1)display: none

2)visibility: hidden;

3)opacity: 0

相关推荐
fruge4 分钟前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
neter.asia12 分钟前
vue中如何关闭eslint检测?
前端·javascript·vue.js
光影少年32 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
Rattenking37 分钟前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
熊的猫2 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
别拿曾经看以后~3 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
川石课堂软件测试3 小时前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
JerryXZR4 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
problc4 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter
Gavin_9154 小时前
【JavaScript】模块化开发
前端·javascript·vue.js