语法:元素对象.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