JavaScript事件

一. JavaScript事件是什么？

       1. ① 定义：JavaScript使我们有能力创建动态页面，事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。

        ② 除此之外，事件是文档或者浏览器窗口中发生的特定的交互瞬间，是JavaScript和DOM之间交互的桥梁。

        2. 原理：当我们在某个元素上添加一个事件时，根据事件执行的前后可以把它当成一个事件流，例如在DOM事件中规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，然后是实际的目标接收到事件，最后是冒泡阶段，可以在这个阶段对事件做出响应。

        3. 应用：事件处理程序可以通过返回一个适当的值、调用事件对象的某个方法或设置事件对象的某个属性来阻止默认操作的发生。

       4. 事件的三要素：① 事件源：是指在哪个元素引发的事件，如：a标签、div标签；② 事件类型：事件的触发方式（如：单击、双击等）；③ 事件驱动程序（事件处理程序）：事件触发后要执行的代码（ 如：单击一个标签对象所执行的函数代码为标签对象.onclick = function(){} ）。

         5. 如何绑定JavaScript事件（以下用点击事件click作示范）：

                ① 行内绑定事件：

                ​​​​​​② 使用on绑定事件：

                ③ 使用事件监听的形式绑定事件：

 二. 事件流

        1. 事件流是指在一个对象（如网页元素）上触发事件（如点击或鼠标移动）时，该事件在  DOM（文档对象模型）中传播的路径。

        2. 事件流涉及三个主要阶段：事件捕获阶段、目标阶段和事件冒泡阶段。

                ① 在捕获阶段，事件从最不具体的级别（如顶层父元素或HTML元素）开始，向具体的元素传播，直到达到事件的目标元素；

                ②在目标阶段，事件到达预设了事件处理程序的特定目标元素；

                ③ 在冒泡阶段，事件从目标元素开始，反向传播至更不具体的元素，直到到达最初的元素或被取消。 

        3. 正常来讲，除了 onmouseleave和onmouseenter 是捕获事件流，其他的事件都是冒泡事件流。

        4. ① 冒泡流： 当你触发一个同类型事件时，先执行子元素的事件再执行父元素的事件，这个顺序就是冒泡事件流
            ② 捕获流： 当你触发一个同类型事件时，先执行父元素的事件再执行子元素的事件，这个顺序就是捕获事件流

三. 常见的JavaScript事件

          1. 分类：  javascript中的常用事件有：点击事件（onclick和ondblclick）；焦点事件（onblur和onfocus）；加载事件（onload）；鼠标事件；键盘事件；选择和改变事      件；表单事件。

        1）点击事件：

                        onclick 单击事件：（onclick并不是js中的方法，onclick只是浏览器提供js的一个dom接口，让js可以操作dom，所以onclick大小写都是没问题的，比如HTML代码就不用区分大小写）

                        ondblclick 双击事件：参数是图形单元类或页面类自身，该事件优先选择层次最深的图形单元执行，以下是示例代码：

        2）焦点事件：

                        onblur 失去焦点：该事件在元素失去焦点时触发。这个事件常用于输入字段（如文本框、下拉菜单等），以确保用户输入完毕后进行一些处理，比如数据验证、输入内容的保存等。以下是一个简单的HTML和JavaScript代码示例，展示了如何使用onblur事件：

                        onfocus 元素获得焦点：该事件属于JavaScript中HTML DOM Event对象 中的一个事件，onfocus 事件在对象获得焦点（光标）时发生，以下是示例代码：

        3）加载事件：

                        onload 一张页面或一幅图像完成加载：是一个事件监听器，它在一个窗口或一个特定的元素完成加载后触发。对于 JavaScript，它通常用于确保在执行代码之前页面的 DOM 已经完全加载，以下是示例代码：

        ​​​​​​​        ​​​​​​​       onresize 浏览器窗口大小改变：在 HTML 和 DOM 中，onresize 事件会在窗口或框架被调整大小时触发。它的作用是允许我们在页面大小改变时执行特定的 JavaScript 代码，以下是示例代码：

        4）鼠标事件：

                        onmousedown 鼠标按钮被按下：该事件是一个事件监听器，它会在用户用任何鼠标按钮按下的时候触发。这个事件最常用于跟踪鼠标的按下状态，并可以在按下时执行一些代码。以下是如何使用 onmousedown 事件的示例：

                        onmouseup 鼠标按键被松开：事件在用户释放鼠标按钮时触发。这个事件主要用于结束一个拖拽行为或者是一个点击行为，以下是如何使用onmouseup 事件的示例：

                        onmousemove 鼠标被移动：是 JavaScript 中的一个事件监听器，用于监听鼠标移动事件当用户在元素上移动鼠标时，会触发 onmousemove 事件。以下是使用 onmousemove 事件的示例代码：

                        onmouseover 鼠标移到某元素之上：该事件是一个属性，它在用户的鼠标指针移动到元素上时触发。这个属性通常用于在HTML元素上设置一个函数或代码块，当事件发生时执行。解释：

• onmouseover 事件可以用于任何HTML元素，当鼠标指针移入元素边界内时触发。

• 通常，onmouseover 事件可以用于显示提示信息、更改样式、显示下拉菜单等。

以下是代码示例：

                        onmouseout 鼠标从某元素移开 :该事件在鼠标指针移出元素时触发。这个事件常用于当鼠标指针移出元素时触发某些行为。以下是使用 onmouseout 事件的示例代码：

        5）键盘事件：

                        onkeydown 某个键盘按键被按下：该事件在用户按下键盘上的任何键时被触发。这个事件大多数时候用于监听用户的按键输入，并可以阻止默认行为，以下是示例代码：

                        onkeyup 某个键盘按键被松开：该事件在用户释放键盘按键时触发。这个事件大多数时候用于文本输入框，以便在用户每次按键后就能实时获取输入的内容。以下是一些使用onkeyup事件的方法：

                        onkeypress 某个键盘按键被按下并松开：该事件在用户按下并放开键盘上的键时被触发。它通常用于处理键盘事件，在用户按下按键时执行代码。以下是如何使用onkeypress 事件的示例：

注意：onkeypress和onkeydown的区别在于onkeypress是无法监听到功能按键的按下的。

        6）选择和改变事件：

                        onchange 域的内容被改变：该事件在 HTML 元素的内容改变且失去焦点时触发。这通常用在 <input>, <select> 和 <textarea> 元素上以监听内容的变化。以下是一个使用 onchange事件的例子：

                        onselect 文本被选中：事件是HTML DOM中的一个事件，它用于在文本框、文本域或可编辑元素中的文本被选择时发生。它可以用于获取用户选择的文本，以便进行进一步的处理，如拼写检查、文本替换等，以下是示例代码：

        7）表单事件：

                        onsubmit 确认按钮被点击：该事件是 HTML 表单元素的事件属性，当表单提交时触发。该事件可以用于在表单提交前验证或处理表单数据。该事件属性可以包含一个返回布尔值的函数。如果该函数返回 true，则表单会被提交；如果返回 false，则会阻止表单提交。以下是使用 onsubmit  事件的示例代码：

                        onreset 重置按钮被点击：该事件监听表元素何时被重置。当用户提交带有 reset 类型输入元素的表单，或调用 reset() 方法显式重置表单时，会触发此事件。以下是示例代码：

      8）文本事件（与文档内容变动有关的事件）：

                        textInput文本输入事件，在文档中输入新字符时触发​​​​​​​：该事件是一个在用户输入文本时触发的事件，通常在文本框（<input type="text">）或文本域（<textarea>）中输入文本时触发。在 JavaScript 中，你可以使用 addEventListener 方法来监听 textInput 事件。以下是一个示例代码：

四. 对于select标签对象的属性和方法补充

            (1) select标签对象的事件：onchange
            (2) select标签对象的方法
                       ① add(new,old);
                       ② new: 你要添加的新的option对象节点
                       ③ old: 添加新的option对象节点的参考节点，会添加到old节点之前；如果不写old节点，则默认添加到结尾

            (3) select标签对象的属性
                        ① options 返回所有的options对象节点
                        ② selectedIndex 返回或者设置当前选中的选项索引
                        ③ length 返回options选项的长度（个数）
            (4) 如何创建一个新的option对象
                        new Option(text, value);

            (5) 三级联动效果：三级联动是一种机制或效果，用于描述三个不同级别的联动，即三个级别相互依赖与嵌套。这种机制或效果可以应用于不同的领域和场景。
                ① 三级联动效果里的数据基本都是后台传输过来的数据
                ② 三级联动的例子：省市县、 商品分类
                ③ 三级联动的数据一般都是比较有特点的