当前位置：首页 > news >正文

JS-第十九天-事件（一）

news 2025/8/2 17:04:31

一、事件基础概念

1.1 事件三要素

事件源：触发事件的元素
事件类型：事件的种类（如click、mouseover等）
事件处理程序：响应事件的函数

1.2 事件流机制

事件传播分为三个阶段：

捕获阶段：事件从顶层开始，经过所有祖先节点，直至触发目标节点
目标阶段：事件到达目标节点并触发
冒泡阶段：事件从目标节点开始，经过所有祖先节点，直至顶层Window对象

二、事件绑定方式

2.1 三种绑定方法对比

方法	语法	添加数量	移除方式	特点
HTML行内	`onclick="console.log('点击')"`	1个	直接删除属性	简单但耦合度高
DOM属性	`ele.onclick = function(){}`	1个	`ele.onclick = null`	简单，但只能绑定一个
addEventListener	`ele.addEventListener(event, fn, options)`	多个	`removeEventListener()`	推荐，功能最强大

2.2 推荐使用 addEventListener

// 添加事件监听器
element.addEventListener('click', function(event) {console.log('点击事件');
}, false);

// 移除事件监听器
element.removeEventListener('click', handlerFunction);

三、常用事件类型

3.1 鼠标事件

click - 单击
dblclick - 双击
contextmenu - 右键菜单
mouseover/mouseout - 鼠标移入/移出（会冒泡）
mouseenter/mouseleave - 鼠标进入/离开（不冒泡）
mousedown/mouseup - 鼠标按下/释放
mousemove - 鼠标移动

重要区别：mouseenter/mouseleave 不会冒泡，不受子元素影响；mouseover/mouseout 会冒泡，受子元素影响。

  <script>//  click 鼠标点击//  dblclick 鼠标双击document.ondblclick = function () {console.log('鼠标双击');}// contextmenu 右击菜单document.oncontextmenu = function () {console.log('右键');document.oncontextmenu('.right').style.display = 'block'// 事件原本的功能【阻止默认行为】event.preventDefault()}// mouseover/mouseout 鼠标移入/移出（会冒泡）document.querySelector('.box').onmouseover = function () {console.log('over鼠标滑上去');}document.querySelector('.box').onmouseout = function () {console.log('out鼠标滑出去');}// mouseenter/mouseleave 鼠标移入/移出（不会冒泡）document.querySelector('.box').onmouseenter = function () {console.log('enter鼠标滑走');}document.querySelector('.box').onmouseleave = function () {console.log('leave鼠标滑离开');}// mousedown/mouseup 鼠标按下/释放document.querySelector('.box').onmousedown = function () {console.log('down鼠标按下');}document.querySelector('.box').onmouseup = function () {console.log('up鼠标释放');}// mousemove 鼠标移动document.querySelector('.box').onmousemove = function () {console.log('move鼠标移动');}</script>

3.2 键盘事件

keydown - 键盘按下
keyup - 键盘弹起
keypress - 按到有效字符

    // keydown 键盘按下document.onkeydown = function () {console.log('down')}// keyup 键盘弹起document.onkeyup = function () {console.log('keyup')}// keypress 按到有效字符document.onkeypress = function (e) {//函数有个参数代表事件的对象console.log('press')console.log(e.key)console.log(e.keyCode)}

3.3 表单事件

submit - 表单提交
focus/blur - 获得/失去焦点
change - 值发生改变
input - 输入事件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.tip {color: darkgreen;}.err {color: red;}</style>
</head><body><!-- 表单 --><form id="form" action="https://www.baidu.com">用户名:<input type="text" name="n"><br>密码:<input type="password" name="p"><br><span class="tip" hidden>请输入密码</span><br><span class="err" hidden>密码不正确</span><br><button id="btn" type="submit">按钮</button></form><script>form.onsubmit = function (e) {e.preventDefault();//阻止提交}// 输入document.querySelector('input')[0].oninput = function () {console.log('输入')}// 获取焦点，失去焦点 focus/blurdocument.querySelectorAll('input')[1].onfocus = function () {document.querySelector('.tip').hidden = falsedocument.querySelector('.err').hidden = true}document.querySelectorAll('input')[1].onblur = function () {document.querySelector('.tip').hidden = truedocument.querySelector('.err').hidden = false}// change 当值发生改变时触发document.querySelectorAll('input')[1].onchange = function () {console.log('变了。')}</script><!-- 以下全部适合用change监听 --><input type="checkbox"><input type="radio"><select name="" id=""></select>
</body></html>

查看全文

http://www.xdnf.cn/news/1226521.html