webapi 事件简单说明
事件
事件：用户操作所触发的行为
为用户操作添加一个事件监听，当用户真正进行某个操作的时候，就会触发某个行为
语法：dom.addEventListener(事件类型，处理函数)
常见事件类型
-
click:单击事件
-
mouseenter:鼠标进入，当鼠标进入到该元素的范围就会自动触发
-
mouseleave:鼠标离开，鼠标离开该元素的范围就会自动触发
-
input:文本输入框内容变化所触发的事件，只要内容变化就会触发
-
fcous:文本框聚焦事件，文本框获取焦点，焦点就是光标点
-
change:文本框失焦事件，前提是内容改变了
-
blur:文本框的失焦事件，只要失焦就会触发，不关注内容是否变化
-
keydown:键按下时自动触发
-
keyup:键松开时自动触发
-
change:对于表单元素file而言，它 是用户选择好文件之后触发
-
事件：用户执行的操作 事件监听：监听用户是否进行了某个操作 事件处理：如果监听到用户真的进行某个操作，我们就进行相应的处理,
我们只是传递一个当事件触发之后的处理函数，但是函数并不是开发者直接调用的，
而是事件处理机制监听到事件触发之后再调用的
点击事件的基本语法和解析
<body>
<button>点我啊</button>
<script>
// 1.获取元素
let btn = document.querySelector('button')
// 2.为元素绑定单击事件
// btn.addEventListener(事件类型，事件处理函数)
// click:单击事件：鼠标左键单击
let opt = function() {
console.log(123)
}
// 函数后面如果带(),说明在调用函数
// 我们只是传递一个当事件触发之后的处理函数，但是函数并不是开发者直接调用的，而是事件处理机制监听到事件触发之后再调用的
// 我们传入的是一个函数的声明
btn.addEventListener('click', function() {
console.log(123)
})
</script>
</body>
事件点击事件小demo，了解如何获取元素，创建单击事件调用函数
<body>
<p>这里显示名字</p>
<button>随机点名</button>
<script>
// 1.模拟数据
let names = ['王军', '刘露', '阳超', '王雅', '王敏']
// 2.获取两个元素
let p = document.querySelector('p') // 显示姓名
let button = document.querySelector('button') // 绑定单击事件
// 3.为元素绑定单击事件
button.addEventListener('click', function() {
// 4.生成一个合理的索引
let index = parseInt(Math.random() * names.length)
// 5.获取索引位置对应的姓名
let name = names[index]
// 6.将当前索引位置的元素删除
names.splice(index, 1)
// 7.将姓名填充到指定的元素中
p.innerText = name
// 8.判断数组是否长度为0--为0说明删除了所有的元素
if (names.length === 0) {
button.disabled = true
}
})
</script>
</body>
\
