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

相关推荐
前端君5 小时前
实现最大异步并发执行队列
javascript
知识分享小能手6 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队7 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
萌萌哒草头将军7 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
Qlittleboy8 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
林_深时见鹿8 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
GDAL8 小时前
Knockout.js 任务调度模块详解
javascript·knockout
椒盐螺丝钉8 小时前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~8 小时前
v-model与-sync的演变和融合
前端·javascript·vue.js
GW_Cheng8 小时前
分享一个vue2的tinymce配置
开发语言·javascript·ecmascript