3.事件基础 · 2021 web前端工程师

[TOC] # 3.1事件概述 JavaScript使我们有能力**创建动态页面**,而事件是**可以被JavaScript侦测**到的行为。 **简单理解:触发---响应机制。** 网页中的每个元素都可以产生某些可以触发JavaScript的事件,例如,我们可以在用户**点击某按钮**时**产生一个事件**,然后去**执行某些操作**。 ## 点击一个按钮，弹出对话框 1.事件是有三部分组成事件源（id）事件类型事件处理程序 1、获取id 2、使用类型（如鼠标点击(onclick) ） 3、函数（ function() { }）（生成你想要做的事情） ~~~ <body> <button id="btn"> 唐伯虎</button> <script> // 1.事件是有三部分组成事件源事件类型事件处理程序我们也称为事件三要素 //(1)事件源事件被触发的对象谁按钮 var btn = document.getElementById('btn'); //(2) 事件类型如何触发什么事件比如鼠标点击(onclick) 还是鼠标经过还是键盘按下 //(3) 事件处理程序通过一个函数赋值的方式完成 btn.onclick = function() { alert('点秋香'); } </script> </body> ~~~ # 3.3执行事件的步骤 1.获取事件源 2.注册事件(绑定事件) 3.添加事件处理程序(采取函数赋值形式) ~~~ <div> 123< /div> <script> //执行事件步骤 //点击div控制台输出我被选中了 // 1.获取事件源 var div = document.querySelector('div'); // 2.绑定事件注册事件 // div. onclick // 3.添加事件处理程序 div.onclick = function() { console.1og('我被选中了'); } </script> ~~~ ### 3.3常见的鼠标事件（重点） **使用**变量名.鼠标事件 = function() { } (函数) | 鼠标事件 | 触发条件 | | --- | --- | | onclick | 鼠标点击左键触发 | | onmouseover | 鼠标经过触发 | | onmouseout | 鼠标离开触发 | | onfocus | 获得鼠标焦点触发 | | onblur | 失去鼠标焦点触发 | | onmousemove | 鼠标移动触发 | | onmouseup | 鼠标弹起触发 | | onmousedown | 鼠标按下触发 |