JavaScript事件是什么意思

这篇文章主要介绍JavaScript事件是什么意思，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！ JavaScript事件是指在文档或者浏览器中发生的一些特定交互瞬间，比如打开某一个网页，浏览器加载完成后会触发load事件，当鼠标悬浮于某一个元素上时会触发hover事件，当鼠标点击某一个元素时会触发click事件等等。本文操作环境：Windows7系统、javascript1.8.5版、DELL G3电脑JavaScript事件是指什么？JavaScript 事件详解事件是指在文档或者浏览器中发生的一些特定交互瞬间，比如打开某一个网页，浏览器加载完成后会触发 load 事件，当鼠标悬浮于某一个元素上时会触发 hover 事件，当鼠标点击某一个元素时会触发 click 事件等等。事件处理就是当事件被触发后，浏览器响应这个事件的行为，而这个行为所对应的代码即为事件处理程序。浏览器会根据一些事件作出相对应的事件处理，事件处理的前提是需要监听事件，监听事件的方法主要有以下三种：即在 HTML 元素里直接填写与事件相关的属性，属性值为事件处理程序。示例如下：onclick 对应着 click 事件，所以当按钮被点击后，便会执行事件处理程序，即控制台输出 You clicked me!。不过我们需要指出的是，这种方式将 HTML 代码与 JavaScript 代码耦合在一起，不利于代码的维护，所以应该尽量避免使用这样的方式。通过直接设置某个 DOM 节点的属性来指定事件和事件处理程序，上代码：上面示例中，首先获得 btn 这个对象，通过给这个对象添加 onclick 属性的方式来监听 click 事件，这个属性值对应的就是事件处理程序。这段程序也被称作 DOM 0 级事件处理程序。标准的事件监听函数如下：上面的示例表示先获得表示节点的 btn 对象，然后在这个对象上面添加了一个事件监听器，当监听到 click 事件发生时，则调用回调函数，即在控制台输出 You clicked me!。addEventListener 函数包含了三个参数 false，第三个参数的含义在后面的事件触发三个阶段之后再讲解。这段程序也被称作 DOM 2 级事件处理程序。IE9+、FireFox、Safari、Chrome 和 Opera 都是支持 DOM 2 级事件处理程序的，对于 IE8 及以下版本，则用 attacEvent() 函数绑定事件。所以我们可以写一段具有兼容性的代码：在为某个元素绑定了一个事件后，如果想接触绑定，则需要用到 removeEventListener 方法。看如下例子：需要注意的是，绑定事件的回调函数不能是匿名函数，必须是一个已经被声明的函数，因为解除事件绑定时需要传递这个回调函数的引用。同样，IE8 及以下版本也不支持上面的方法，而是用 detachEvent 代替。同样，可以写一段具有兼容性的删除事件函数：事件流描述了页面接收事件的顺序。现代浏览器（指 IE6-IE8 除外的浏览器，包括 IE9+、FireFox、Safari、Chrome 和 Opera 等）事件流包含三个过程，分别是捕获阶段、目标阶段和冒泡阶段，下图形象地说明这个过程：下面就详细地讲解这三个过程。当我们对 DOM 元素进行操作时，比如鼠标点击、悬浮等，就会有一个事件传输到这个 DOM 元素，这个事件从 Window 开始，依次经过 docuemnt、html、body，再不断经过子节点直到到达目标元素，从 Window 到达目标元素父节点的过程称为捕获阶段，注意此时还未到达目标节点。捕获阶段结束时，事件到达了目标节点的父节点，最终到达目标节点，并在目标节点上触发了这个事件，这就是目标阶段。需要注意的是，事件触发的目标节点为最底层的节点。比如下面的例子：你猜，目标在这里还是那里。当我们点击“那里”的时候，目标节免费云主机、域名点是，点击“这里”的时候，目标节点是

，而当我们点击

区域之外，

区域之内时，目标节点就是

。当事件到达目标节点之后，就会沿着原路返回，这个过程有点类似水泡从水底浮出水面的过程，所以称这个过程为冒泡阶段。针对这个过程，wilsonpage 做了一个 DEMO，可以非常直观地查看这个过程。现在再看 addEventListener(eventName, handler, useCapture) 函数。第三个参数是 useCapture，代表是否在捕获阶段进行事件处理， 如果是 false， 则在冒泡阶段进行事件处理，如果是 true，在捕获阶段进行事件处理，默认是 false。这么设计的主要原因是当年微软和 netscape 之间的浏览器战争打得火热，netscape 主张捕获方式，微软主张冒泡方式，W3C 采用了折中的方式，即先捕获再冒泡。上面我们讲了事件的冒泡机制，我们可以利用这一特性来提高页面性能，事件委托便事件冒泡是最典型的应用之一。何谓“委托”？在现实中，当我们不想做某件事时，便“委托”给他人，让他人代为完成。JavaScript 中，事件的委托表示给元素的父级或者祖级，甚至页面，由他们来绑定事件，然后利用事件冒泡的基本原理，通过事件目标对象进行检测，然后执行相关操作。看下面例子：上面的例子中，5 个列表项的点击事件均委托给了父元素

。先看看事件委托的可行性。有人会问，当事件不是加在某个元素上的，如何在这个元素上触发事件呢？我们就是利用事件冒泡的机制，事件流到达目标元素后会向上冒泡，此时父元素接收到事件流便会执行事件执行程序。有人又会问，被委托的父元素下面如果有很多子元素，怎么知道事件流来自于哪个子元素呢？这个我们可以从事件对象中的 target 属性获得。事件对象下面会详细讲解。我们再来看看为什么需要事件委托。减少事件绑定。上面的例子中，也可以分别给每个列表项绑定事件，但利用事件委托的方式不仅省去了一一绑定的麻烦，也提升了网页的性能，因为每绑定一个事件便会增加内存使用。可以动态监听绑定。上面的例子中，我们对 5 个列表项进行了事件监听，当删除一个列表项时不需要单独删除这个列表项所绑定的事件，而增加一个列表项时也不需要单独为新增项绑定事件。看了上面的例子和解释，我们可以看出事件委托的核心就是监听一个 DOM 中更高层、更不具体的元素，等到事件冒泡到这个不具体元素时，通过 event 对象的 target 属性来获取触发事件的具体元素。事件委托是事件冒泡的一个应用，但有时候我们并不希望事件冒泡。比如下面的例子：我们本意是当点击 ele 元素区域时显示 “ele-click”，点击其他区域时显示 “document-click”。但是我们发现点击 ele 元素区域时会依次显示 “ele-click” “document-click”。那是因为绑定在 ele 上的事件冒泡到了 document 上。想要解决这个问题，只需要加一行代码：我们还能用 e.cancelBubble = true 来替代 e.stopPropagation()。网上的说法是 cancelBubble 仅仅适用于 IE，而 stopPropagation 适用于其他浏览器。但根据我实验的结果，现代浏览器（IE9 及 以上、Chrome、FF 等）均同时支持这两种写法。为了保险起见，我们可以采用以下代码：Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。当一个事件被触发的时候，就会创建一个事件对象。我们用下面的代码打印出事件对象：chrome 49 的运行结果如下：下面介绍一些比较常用的属性和方法。target 与 srcElement 完全相同；target 指触发事件的元素， currentTarget 指事件所绑定的元素；relatedTarget： 与事件的目标节点相关的节点。对于 mouseover 事件来说，该属性是鼠标指针移到目标节点上时所离开的那个节点。对于 mouseout 事件来说，该属性是离开目标时，鼠标指针进入的节点。
对于其他类型的事件来说，这个属性没有用；fromElement 和 toElement 仅仅对于 mouseover 和 mouseout 事件有效。以上面的例子说明，当点击

时，target 就是

元素，而 currentTarget 是

。上图：offsetX/Y： 点击位置相对于所处元素左上角的位置；clientX/Y： 点击位置相对于浏览器内容区域左上角的位置；screenX/Y： 点击位置相对于屏幕左上角的位置；pageX/Y： 点击位置相对整张页面左上角的位置；pageX/Y 与 clientX/Y 一般情况下会相同，只有出现滚动条时才不一样。altKey： 返回当事件被触发时，”ALT” 是否被按下；ctrlKey： 返回当事件被触发时，”CTRL” 键是否被按下；shiftKey： 返回当事件被触发时，”SHIFT” 键是否被按下；type： 返回当前 Event 对象表示的事件的名称bubbles： 返回布尔值，指示事件是否是起泡事件类型；cancelable： 返回布尔值，指示事件是否可拥可取消的默认动作；eventPhase： 返回事件传播的当前阶段，有三个值： Event.CAPTURING_PHASE、 Event.AT_TARGET、 Event.BUBBLING_PHASE，对应的值为 1、2、3，分别表示捕获阶段、正常事件派发和起泡阶段；path： 冒泡阶段经过的节点；preventDefault()： 通知浏览器不要执行与事件关联的默认动作；stopPropagation()： 阻止冒泡；以上是“JavaScript事件是什么意思”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注云技术行业资讯频道！

相关推荐: react项目中怎么运行vue组件

本篇内容介绍了“react项目中怎么运行vue组件”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！先看实现效果vue组件在reat中正常渲染了，并且我还点击了按钮…