常见的 HTML 事件
常见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
类似防抖,如输入框实时搜索
标签:事件处理,setTimeout,定时器,JavaScript,HTML,事件,btn,Event From: https://www.cnblogs.com/yjh1995/p/17529616.html