通知短信+运营短信,5秒速达,支持群发助手一键发送🚀高效触达和通知客户 广告
[TOC] # 案例1:为网页中所有按钮添加点击事件 ![](https://img.kancloud.cn/51/7e/517ebb38a78ca51dd3f78ad31d163c80_378x340.gif) ## 知识点1:事件三要素 1. 事件源 2. 事件 3. 事件处理程序 * [ ] 直接为事件源添加事件并调用**处理程序function** * [ ] 为事件源绑定事件并赋值**处理程序function** * [ ] 为事件源添加事件监听并设置监听**回调函数function** ## 知识点2:事件监听 很多DOM元素可以被设计接收(或者监听) 这些事件, 并且执行代码去响应(或者处理)它们。通过`EventTarget.addEventListener()`方法可以将事件处理函数绑定到不同的`HTML elements`上 (比如`<button>`,`<div>`,`<span>`等等) 。除此之外,通过正确使用`removeEventListener()`方法,这些事件处理函数也能被移除。 1. EventTarget.addEventListener() 2. EventTarget.removeEventListener() ## 知识点3:事件模型 * [ ] 事件模型 1. 冒泡型(默认) 2. 捕获型 ## 试一试:事件监听与移除监听 ![](https://img.kancloud.cn/15/bc/15bc14c3a9a28ca84a2f928a685192f7_376x336.gif) # 案例2:输出按钮信息 ![](https://img.kancloud.cn/9f/4f/9f4f31486b706f3563a6202d8ed755e8_388x358.gif) ## 知识点:事件对象 * [ ] 事件对象 1. `event` 表示在 DOM 中出现的事件。 2. `event.type`事件的类型,不区分大小写。 3. `event.target`指向最初触发事件的目标。 4. `event.currentTarget`总是指向事件绑定的元素。 # 案例3: 悬停染色 ![](https://img.kancloud.cn/4f/3d/4f3d119ae0ee3fb2259c60a9dc4856cc_600x398.gif) ## 知识点1:常见事件 | 事件 | 名称 | | --- | --- | | onclick | 鼠标单击 | | ondblclick | 鼠标双击 | | onmouseenter | 鼠标进入元素 | | onmouseover | 鼠标悬停元素(会产生事件冒泡) | | onmouseout | 鼠标移出元素 | ## 知识点2:over和enter的区别 ![](https://img.kancloud.cn/3e/4e/3e4e727663e83228d14a3131496cbd15_463x236.png) ## 扩展:event.target和event.currentTarget > 子元素受父元素绑定事件的影响(事件委托) * [ ] e.target 触发事件的元素 * [ ] e.currentTarget 绑定事件的元素 ![](https://img.kancloud.cn/10/b6/10b6c198aa738934ad25ef3d9581bfb7_610x231.png) ![](https://img.kancloud.cn/d1/e9/d1e9ad05999053909ed29e9c4109a519_578x394.gif) ## 试一试:阻止冒泡 `event.stopPropagation`阻止事件在 DOM 中继续冒泡 ![](https://img.kancloud.cn/57/cc/57cc23938c0728ed33e4293779c248a9_600x398.gif) > **js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远指向触发事件的DOM元素本身;因此,this会产生冒泡,而event.target不会产生冒泡。** # 案例4:只能输入数字 > 当输入非数字时立即给出提示,并阻止输入内容 ![](https://img.kancloud.cn/e6/36/e63646887c793290791dc9fa8a81f519_470x370.gif) ## 知识点1:常见键盘事件 | 事件 | 名称 | | --- | --- | | onkeydown | 键盘按下 | | onkeyup | 键盘弹起 | | onkeypress | 键盘按下并释放 | ## 知识点2:取消默认事件 > `event.preventDefault`取消默认事件 # 案例5:禁止粘贴复制 ![](https://img.kancloud.cn/df/0b/df0b6dd58b53935f1e9c8c41dfa266ee_470x370.gif) ## 知识点1:常见表单事件 | 事件 | 名称 | | --- | --- | | onsubmit | 表单提交 | | onreset | 表单重置 | | onchange | 内容被改变并失去焦点 | | onblur | 失去焦点 | | onfocus | 获得焦点 | | oncopy | 内容复制 | | onpaste | 内容粘贴 | ## 知识点2:键盘keyCode ``` event.keyCode 0-9:48-57 a-z:97-122 A-Z:65-90 ``` # 案例6:验证用户名是否被注册 ![](https://img.kancloud.cn/a9/d7/a9d735e63a509b0ee13f8b203d278b25_443x235.gif) ## 知识点:常见页面事件 | 事件 | 名称 | | --- | --- | | onload | 页面加载完毕 | * [ ] 用于初始化数据 * [ ] 用于自动运行脚本