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

相关推荐
yinke小琪14 分钟前
JavaScript DOM节点操作(增删改)常用方法
前端·javascript
爱编程的喵21 分钟前
从XMLHttpRequest到Fetch:前端异步请求的演进之路
前端·javascript
豆苗学前端27 分钟前
手把手实现支持百万级数据量、高可用和可扩展性的穿梭框组件
前端·javascript·面试
yinke小琪29 分钟前
JavaScript 事件冒泡与事件捕获
前端·javascript
gzzeason41 分钟前
Ajax:现代JS发起http通信的代名词
前端·javascript·ajax
iphone1081 小时前
一次编码,多端运行:HTML5多终端调用
前端·javascript·html·html5
iccb10131 小时前
我是如何实现在线客服系统的极致稳定性与安全性的
前端·javascript·后端
宇宙全栈Link1 小时前
当 React 组件调用自定义 hooks,hooks 又调用其他 hooks 时,状态变化如何传播?
前端·javascript·react.js
南方kenny1 小时前
从0到1理解JS事件委托:让你的代码性能提升一个level
前端·javascript
西瓜树枝1 小时前
用 iframe 实现前端批量下载的优雅方案 —— 从原理到实战
前端·javascript