JavaScript（六）事件处理
常见HTML事件
| 事件 | 描述 |
|---|---|
| onchange | HTML 元素已被改变 |
| onclick | 用户点击了 HTML 元素 |
| onmouseover | 用户把鼠标移动到 HTML 元素上 |
| onmouseout | 用户把鼠标移开 HTML 元素 |
| onkeydown | 用户按下键盘按键 |
| onload | 浏览器已经完成页面加载 |
事件处理方式
-
HTML事件：html元素的属性使用JS代码，html代码和 JS 代码揉在一起
<button id="btn" onclick="clickhandle()">按钮</button>
<script>
function clickhandle(){
console.log("点击");
}
</script>
-
DOM0级事件：无法同时添加多个事件
<button id="btn">按钮</button>
<script>
var btn=document.getElementById("btn");
btn.onclick=function(){
console.log("dianji");
}
</script>
-
DOM2级事件：使用率最高
<button id="btn">按钮</button>
<script>
var btn=document.getElementById("btn");
btn.addEventListener("click",function(){
console.log("dom2");
});
</script>
鼠标事件
click, dbclick双击, mousedown按下, mousemove 移动, wheel 滚轮
Event事件对象
Event监听每个html元素的事件
-
Event.target 事件作用的当前元素
-
Event.type 事件类型
-
Event.preventDefault() 取消浏览器对当前事件的默认行为，比如点击链接会跳转到另一个页面，使用此方法就不会跳转了
-
Event.stopPropagation() 事件冒泡：阻止事件在DOM中继续传播，防止再触发定义在父节点上的监听函数。但是不包括在当前节点上其他的事件监听函数
<button id="btn">按钮</button>
<script>
var btn=document.getElementById("btn");
btn.addEventListener("click",function(event){
console.log(event.target);
});
</script>
键盘事件
事件类型：keydown, keypress, keyup
Event.keycode，键盘事件的唯一标识
表单事件
事件类型：
-
input 输入框。
-
select 输入框鼠标选中的值
-
change 输入框的值发生变化，失去焦点或enter后,
-
reset 重置表单的值
-
submit 提交
事件代理（事件委托）
由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点统一处理多个子元素的事件，这种方法叫做事件代理
定时器
js定时执行代码，有setTimeout() 和 setInterval()：
-
setTimeout()延迟执行某个函数或代码，返回值为定时器编号(整数)，用以取消定时器，setTimeout() 里使用this调用的是全局变量，不是局部变量
// 定义定时器
var timerId=setTimeout(func|code,delay)
// 取消定时器
clearTimeout(timerId)
-
setInterval()每间隔一定时间执行一次，用法与setTimeout()一致，取消 clearInterval()
防抖debounce
定义：对于短时间内连续触发的事件（如滚动事件），防抖的含义就是让某个时间期限内 事件处理函数只执行一次。利用 setTimeout()防抖算是性能优化，但是遇到的频率很高，处理不当或放任不管容易引起浏览器卡死。
节流throttle
