事件
事件是在编程时系统内发生的动作或者发生的事情，比如用户在网页上一个
事件监听
①就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 注册事件
元素.addEventListener('事件', 要执行函数)
②事件监听三要素：
- 事件源： 那个dom元素被事件触发了，要获取dom元素
- 事件： 用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等
- 事件调用的函数： 要做什么事
③注意：
- 事件类型要加引号
- 函数是点击之后再去执行，每次点击都会执行一次
let btn = document.querySelector('button');
btn.addEventListener('click', function () {
console.log('被点击了');
});
事件监听版本
①DOM L0
- 事件源.on事件 = function() { }
②DOM L2
- 事件源.addEventListener(事件， 事件处理函数)
③发展史：
- DOM L0 ：是 DOM 的发展的第一个版本； L：level
- DOM L1：DOM级别1 于1998年10月1日成为W3C推荐标准
- DOM L2：使用addEventListener注册事件
- DOM L3： DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件类型
事件类型
①鼠标事件：鼠标触发
Ⅰ、click 鼠标点击
- mouseenter 鼠标经过
- mouseleave 鼠标离开
<body>
<div></div>
<script>
// 获取div元素
let div = document.querySelector('div');
// 绑定不同的事件
div.addEventListener("click",function () {
console.log("click 鼠标点击事件");
})
// 鼠标经过元素
div.addEventListener("mouseenter",function () {
console.log("mouseenter 鼠标经过");
})
// 鼠标离开元素
div.addEventListener("mouseleave",function () {
console.log("mouseleave 鼠标离开");
})
// 鼠标经过
div.addEventListener("mouseover",function () {
console.log("mouseover 鼠标经过");
})
// 鼠标离开
div.addEventListener("mouseout",function () {
console.log("mouseout 离开");
})
</script>
</body>
②焦点事件：表单获得光标
- focus 获得焦点
- blur 失去焦点
<body>
<!-- 只有表单 元素 有获得焦点 失去焦点事件 -->
<input type="text" />
<script>
// 获得焦点
input.addEventListener("focus",function () {
console.log("输入框 获得焦点 ");
document.body.style.backgroundColor='#000'
})
// 失去焦点
input.addEventListener("blur",function () {
console.log("输入框 失去焦点");
document.body.style.backgroundColor='#fff'
})
</script>
</body>
③键盘事件：键盘触发
- Keydown 键盘按下触发
- Keyup 键盘抬起触发
<body>
<script>
// 键盘按下事件 div不行 表单可以
// 给body标签添加比较多
document.body.addEventListener("keydown",function () {
console.log("keydown 按下");
})
// 键盘抬起
document.body.addEventListener("keyup",function () {
console.log("keyup 抬起");
})
</script>
</body>
④文本事件：表单输入触发
- input 用户输入事件
<body>
<input type="text" />
<script>
// 输入事件 输入框
input.addEventListener("input",function () {
console.log("只要你在我的输入框输入了内容，我就触发");
})
</script>
</body>
批量给标签绑定事件
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<script>
// 点击每一个li标签 都可以输出 你好
// 获取li标签数组
let liList=document.querySelectorAll("li");
// 循环
for (let index = 0; index < liList.length; index++) {
// 给每一个li标签绑定点击事件
liList[index].addEventListener("click",function () {
console.log("你好");
})
}
</script>
绑定事件的补充
以下两种方式都不推荐 了解即可
<body>
//<!-- <button onclick="console.log(123)" >点击</button> -->
//<!-- <button onclick="show()">点击</button> -->
<button>点击</button>
<script>
// 1 获取dom元素
let btn = document.querySelector('button');
// 使用旧方式 L0 第一个版本的方式绑定点击事件 on+事件类型 = 匿名函数
// on也可以是在 行内 绝对不推荐
btn.onclick = function () {
console.log('事件触发啦');
};
btn.onclick = function () {
console.log('事件触发啦');
};
btn.onclick = function () {
console.log('事件触发啦');
};
btn.onclick = function () {
console.log('事件触发啦');
};
// addEventListener 对一个事件类型 绑定多个处理函数
// on+事件 对一个事件类型 只能绑定一个处理函数
// btn.onclick = show;
// function show() {
// console.log('show');
// }
// btn.addEventListener("click",function () {
// console.log("show");
// });
// btn.addEventListener("click",function () {
// console.log("show");
// });
// btn.addEventListener("click",function () {
// console.log("show");
// });
// btn.addEventListener("click",function () {
// console.log("show");
// });
</script>
</body>
