在学习函数的时候会遇见很多的函数事件，本篇将对其进行详细的讲解。
什么是事件？
JavaScript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器（或处理程序）来预定事件，以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式的模型，支持页面的行为（JavaScript）与页面的外观（HTML与CSS）之间的松散耦合。
事件流
事件流描述的是从页面中接受事件的顺序。假设如下代码：
nbsp;html>Document
登录后复制
点击div，这个点击不仅仅发生在div上，其父容器body也会被点击。那到底谁先被点击或者说事件是怎么传播的？事件流描述的就是这样一个接受事件的顺序。
IE事件流（事件冒泡）
IE事件流也叫事件冒泡，即事件开始时由最具体的元素（文档中嵌套层最深的那个节点）接收，然后逐级传播到较为不具体的节点（文档）。
以上面的代码为例，如果你点击了div元素，那么这个click事件会按如下顺序进行传播：
1.2.3.4.document就是说，click事件首先发生在div元素上，而这个元素就是我们单击的元素，然后click事件沿DOM树向上传播，在每一级节点上都会发生，直到传播到document对象。
所有的现代浏览器都支持事件冒泡，但是有一些差别。IE5.5及更早版本中的事件冒泡会跳过html元素，从body直接到document。IE9、Firefox、Chrome和Safari则将事件一直冒泡到window对象。（旧IE浏览器只支持事件冒泡）。
事件捕获
事件捕获的思想是不太具体的节点应该更早接收到事件，而具体的节点应该最后接收到事件，正好与事件冒泡相反，再以上面的例子为例，点击div，事件捕获的事件触发顺序如下：
1.document2.3.4.在事件捕获过程中，document对象首先接受到click事件，然后事件沿DOM树依次向下，一直传播到事件的实际目标。
IE9，Firefox、Chrome、Safari和Opera都支持事件捕获。虽然DOM2级事件规范要求事件应该从document对象开始传播，但这些浏览器都是从window对象开始捕获事件的。
DOM事件流
DOM2级事件规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，为截取事件提供机会。然后是实际的目标接受到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。
在DOM事件流中，实际的目标在捕获阶段不会接受到事件。这意味着在捕获阶段，事件从document到html再到body就停止了。下一阶段是处于目标阶段，于是事件在div上发生，并在事件处理中被看成冒泡阶段的一部分。然后，冒泡阶段发生，事件传回ducument。
但实际上，IE9，Firefox、Chrome、Safari和Opera9.5及更高版本都会在捕获阶段触发事件对象上的事件。结果就是有两个机会在目标对象上面操作事件。（IE8及更早版本不支持DOM事件流）。事件处理程序
事件就是用户或浏览器自身执行的某种动作。像是click、load和mousover，都是事件的名字。响应某个事件的函数叫做事件处理程序（事件监听器）。事件处理程序的名字以"on"开头，因此click事件的事件处理程序就是onclick，load事件的处理程序就是onload。有下面几种为事件指定处理程序的方法。
HTML事件处理程序
某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的HTML属性来指定。这个属性的值应该是能够执行的JavaScript代码，示例：
//定义了一个按钮，点击时会显示一个警告框；登录后复制
在HTML中定义事件处理程序可以包含要执行的具体动作，也可以调用在页面其他地方定义的脚本，示例：
//点击按钮就会调用showMsg()函数； function showMsg() { alert('Hello world!')}登录后复制
通过HTML指定事件处理程序有两个缺点：1.时差问题，因为用户可能会在HTML元素一出现页面就触发相应事件，但此时事件处理程序有可能尚不具备执行条件；2.HTML与JavaScript代码紧密耦合，如果要更换事件处理程序，就要改动HTML代码和JavaScript代码。
DOM0级事件处理程序
通过JavaScript指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。每一个元素都有自己的事件处理程序属性，这些属性通常全部小写，如onclick。将这种属性的值设置为一个函数，就可以指定事件处理程序，示例：
var btn = document.getElementById('myButton'); btn.onclick = function() { alert("Clicked") }登录后复制
使用DOM0级方法指定的事件处理程序被认为是元素的方法。因此，这时候事件处理程序是在元素的作用域中运行；换句话说，程序中的this引用当前元素。
也可以通过DOM0级方法删除事件处理程序，示例：btn.onclick = null; //删除事件处理程序；DOM2级事件处理程序登录后复制
DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点都包含这两个方法，并且它们都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后的布尔值如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。示例：
var btn = document.getElementById('myButton'); //为按钮添加了click事件和处理程序； btn.addEventListener('click',function() { alert(this.id) }，false)登录后复制
与DOM0级方法一样，这里添加的事件处理程序也是在其依附的元素的作用域中运行的。使用DOM2级方法添加事件处理程序可以添加多个事件处理程序，示例：
var btn = document.getElementById('myButton'); //为按钮添加了多个click事件和处理程序； btn.addEventListener('click',function() { alert(this.id); }，false); var btn = document.getElementById('myButton'); ； btn.addEventListener('click',function() { alert('hello world!'); }，false);登录后复制
这里为按钮添加了2个事件处理程序。这两个事件处理程序会按照添加它们的顺序触发。
通过addEventListener()添加的事件处理程序只能用removeEventListener()来移除；移除时传入的参数与添加处理程序时使用的参数相同，意味着addEventListener()添加的匿名函数无法移除：//该代码无法运行；btn.removeEventListener('click',function() { alert(this.id);}，false);//该代码工作正常；//removeEventListener()和addEventListener()使用了相同函数；var btn = document.getElementById('myButton'); var function handler() { alert(this.id); }btn.addEventListener('click',handler,false);btn.removeEventListener('click',handler,false);登录后复制
本篇对js事件进行了总结，更多相关内容请关注【创想鸟】。
相关推荐：
关于正则表达式的相关理解
Javascript中关于this的用法
关于Math、数组、Date的相关例子
以上就是对于函数事件的总结的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2760178.html
赞 (0)关于作者
jquery ajax实现文件上传功能（附有代码）上一篇 2025年3月8日 09:04:34如何通过JavaScript使用基本工资计算和打印奖金和总额？下一篇 2025年3月7日 18:02:58AD推荐 黄金广告位招租... 更多推荐
相关推荐
jQuery 能做什么？
本篇对jquery的使用做出了相关的总结。 jQuery是一个小巧的，快速的，功能强大的JavaScript库。它通过一些易用的API简化了许多事情，例如：DOM操作、事件监听、动画、AJAX等等。jQuery能做的事情，原生JS都能做到，…
ES5与ES6环境内处理函数默认参数步骤详解
这次给大家带来ES5与ES6环境内处理函数默认参数步骤详解，ES5与ES6环境内处理函数默认参数的注意事项有哪些，下面就是实战案例，一起来看一下。 函数默认值是一个很提高鲁棒性的东西（就是让程序更健壮） MDN关于函数默认参数的描述：函数默…
JavaScript DOM元素增删改步骤详解
这次给大家带来JavaScript DOM元素增删改步骤详解，JavaScript DOM元素增删改的注意事项有哪些，下面就是实战案例，一起来看一下。 DOM概念 DOM（Document Object Model）：文档对象模型。 通过开…
如何让node中promise替代回调函数
这次给大家带来如何让node中promise替代回调函数，如何让node中promise替代回调函数的注意事项有哪些，下面就是实战案例，一起来看一下。 在学习 Node.js 过程中接触到了如何使用 async 来控制并发（使用 async…
Vue按键修饰符处理事件步骤详解
这次给大家带来vue按键修饰符处理事件步骤详解，vue按键修饰符处理事件的注意事项有哪些，下面就是实战案例，一起来看一下。 按键修饰符 在 PC 端开发时, 我们常常会遇到类似的需求, 比如用户按下 enter 键时提交表单, 没有用按键修…
前端中如何阻止事件传播
这次给大家带来前端中如何阻止事件传播，前端中阻止事件传播的注意事项有哪些，下面就是实战案例，一起来看一下。 做一个小demo，点击按钮出现浮层，点击其它地方关闭浮层，写一个简单css .wrapper{ position:relative;…
javascript作用域底层作用分析
这次给大家带来javascript作用域底层作用分析，javascript作用域底层使用的javascript有哪些，下面就是实战案例，一起来看一下。 标签： javascript 什么是作用域（Scope）？ 作用域产生于程序源代码中ja…
JavaScript+Regex实现身份证号正则验证步奏详解
这次给大家带来JavaScript+Regex实现身份证号正则验证步奏详解，JavaScript+Regex实现身份证号正则验证的注意事项有哪些，下面就是实战案例，一起来看一下。 身份证号码说明 居民身份证号码，正确、正式的称谓应该是“公民…
JavaScript基于Ajax实现不刷新在网页上动态显示文件内容
这篇文章主要介绍了javascript基于ajax实现不刷新在网页上动态显示文件内容,可实现实时显示服务器上txt文件内容的功能,是ajax基本应用,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了JavaScript基于Ajax…
jquery动态添加点击事件步奏详解
这次给大家带来jquery动态添加点击事件步奏详解，jquery动态添加点击事件的注意事项有哪些，下面就是实战案例，一起来看一下。 当我们试图绑定一些事件到DOM元素上的时候，通常会使用以下的四个方法bind(),on(),live(),d…
