JavaScript（六）事件处理

常见的 HTML 事件

常见HTML事件

事件处理方式

• 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

类似防抖，如输入框实时搜索