javascript事件
前言:原本这篇文章是打算6号书写出来的,但是基于某些私人原因,希望能够通过这篇文章尽可能的将事件讲解的更加详细和通俗易懂,因此,多花了一天时间,不多说了,接下来对“事件”来一个较为详细的介绍。
欢迎大家互相学习交流。独行冰海
需要了解事件的什么?
对于事件来讲,首先,我们需要了解这样几个概念:事件;事件处理程序;事件类型;事件流;事件冒泡;事件捕获;事件对象;事件方面的性能优化(事件委托、移除事件处理程序);常见的浏览器兼容问题。
事件的概念
事件:指的是文档或者浏览器窗口中发生的一些特定交互瞬间。我们可以通过侦听器(或者处理程序)来预定事件,以便事件发生的时候执行相应的代码。
事件处理程序
事件处理程序:我们用户在页面中进行的点击这个动作,鼠标移动的动作,网页页面加载完成的动作等,都可以称之为事件名称,即:click、mousemove、load等都是事件的名称。响应某个事件的函数则称为事件处理程序,或者叫做事件侦听器。
接下来我们用一段代码来再说明一下上面这两个抽象的概念,具体解释见代码注释:
<script><br> var main = document.getElementById('main');<br> // 此处click,点击,是一种事件的名称,是浏览器窗口中发生点击的瞬间。on这个单词,其实就是让click这个事件得以相应,因此,onclick就叫做事件处理程序。下面这段代码,我们通过处理程序(onclick)为main这个元素预定了点击(click),这样在点击(click)发生的时候,执行函数中的代码(弹出一个对话框)。<br> main.onclick = function(){<br> alert('点击了此处哦!');<br> }<br></script>
关于事件处理程序,从最初的发展到现在,经历了几次的变化。
事件处理程序的名字是以“on”开头,因此click事件的处理程序就是onclick。在最初,是使用HTML事件处理程序的,也就是说,某个元素(如div),支持的每一种事件,都可以使用一个与相应事件处理程序同名的HTML特性来制定(也就是标签的一个属性),这个特性的值就是能够执行的JavaScript代码。例如:
HTML事件处理程序
当然,我们也可以再onclick=””当中进行函数的调用。
但是,无论哪种方法,都暴露出来HTML事件处理程序的很多问题:
首先,HTML代码域JavaScript代码紧密的耦合在一起,没有实现相互分离,在进行代码的更新与维护的时候就显得异常困难。
第二,扩展事件处理程序的作用域链在不同浏览器当中会导致不同的结果。
第三,如果不采用调用函数的方式,而是像例子中那样直接书写代码,那么代码的通用性很差,会使得整站的代码量很大,通用性差。如果提取出来,存放在函数当中,那么,会面临另一个问题——当函数还没有被定义,只是HTML、CSS代码加载完毕,用户进行点击,会完全没有反应。
基于上面的这些问题,人们逐渐的去完善了事件处理程序,此时出现了DOM0级事件处理程序。(第四代WEB浏览器中出现)
DOM0级事件处理程序是什么样子的呢?其实它就是我们平时最为常用的事件绑定,如下面这个例子:
DOM0级事件处理程序
<script><br> var btn = document.getElementById('btn');<br> btn.onclick = function(){<br> alert(this.innerHTML);<br> }<br></script>
在DOM0级事件处理程序推出之后,广为各个用户的使用,但是,却出现了这样一个问题,当我希望为同一个元素/标签绑定多个同类型事件的时候(如,为上面的这个p标签绑定3个点击事件),是不被允许的。那么,此时,出现了另一种事件处理程序,就是DOM2级的事件处理程序,在DOM2级当中,定义了两个基本方法,用于处理指定(即绑定)和删除事件处理程序的操作,分别是addEventListener()和removeEventListener(),IE9+、FireFox、Safari、Chrome和Opera都是支持DOM2级事件处理程序的。对于IE8-,则使用的是IE专有的事件处理程序:两个类似的方法——attachEvent()与detachEvent()。
具体实例代码如下:(以addEventListener为例,给出了两种书写方式)
DOM0级事件处理程序
<script><br> var btn = document.getElementById('btn');<br> btn.addEventListener("click", test, false);<br> function test(){<br> alert(this.innerHTML);<br> }<br></script>
DOM0级事件处理程序
<script><br> var btn = document.getElementById('btn');<br> btn.addEventListener("click", function(){<br> alert(this.innerHTML); <br> }, false);<br></script>
addEventListener()和removeEventListener()中的第三个参数,表示的是在哪个事件阶段进行事件处理,如果是false,则指的是冒泡阶段;如果是true,则指的是捕获阶段。
在事件方面,IE与FF存在着一系列的兼容问题,具体问题可查看博文《IE浏览器与FF火狐浏览器在事件上的兼容问题》
关于如何创建一个兼容全部浏览器的事件侦听器,我们在下一篇博文《跨浏览器的事件处理函数——处理DOM2级事件兼容 》当中再做详细的介绍和代码示范。
事件类型
之前在课程的讲解当中,我们把事件分为了三大类,分别是一般事件、表单事件和页面事件。当前我们可以再做细分:
UI事件:如load、unload、error、resize、scroll、select、DOMActive,是用户与页面上的元素交互时触发的。
焦点事件:如blur、DOMFocusIn、DOMFocusOut、focus、focusin、focusout,在元素获得或失去焦点的时候触发,这些事件当中,最为重要的是blur和focus,有一点需要引起注意,这一类事件不会发生冒泡!
鼠标与滚轮事件:如click、dblclick、mousedown、mouseenter、mouseleave、mousemove、mouseout、mouseover、mouseup,是当用户通过鼠标在页面执行操作时所触发的。
滚轮事件:mousewheel(IE6+均支持)、DOMMouseScroll(FF支持的,与mousewheel效果一样)。是使用鼠标滚轮时触发的。
文本事件:textInput,在文档中输入文本触发。
键盘事件:keydown、keyup、keypress,当用户通过键盘在页面中执行操作时触发。
合成事件:DOM3级新增,用于处理IME的输入序列。所谓IME,指的是输入法编辑器,可以让用户输入在物理键盘上找不到的字符。compositionstart、compositionupdate、compositionend三种事件。
变动事件:DOMsubtreeModified、DOMNodeInserted、DOMNodeRemoved、DOMAttrModified、DOMCharacterDataModified等,当底层DOM结构发生变化时触发。IE8-不支持。
变动名称事件:指的是当元素或者属性名变动时触发,当前已经弃用!
对于事件的基本类型,随着HTML5的出现和发展,又新增了HTML5事件、设备事件、触摸事件、手势事件等各种事件,在后面我们再详细介绍。
事件流
事件流:描述的是从页面中接收事件的顺序。
IE与原来的NetScape(网景),对于事件流提出的是完全不同的顺序。IE团队提出的是事件冒泡流;NetScape的事件流是事件捕获流。
事件冒泡
事件冒泡:表示的是,事件开始的时候由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)。
事件捕获
事件捕获:表示的是,事件开始的时候由最不具体的节点接收,然后逐级向下传播到最具体的节点。
来看一个实例:
理解事件的基本概念
如果单击了p标签,那么,如果是事件冒泡流的事件流机制,则click事件将按照如下顺序进行执行:p —— div —— body —— html —— document。
如果采用捕获流的事件流机制,则click事件的执行顺序为:document —— html —— body —— div —— p
对于冒泡流的事件流机制,存在如下的兼容问题:
<=IE5.5 p -> div -> body -> document
>=IE6.0 p -> div -> body -> html -> document
>=Mozilla 1.0 p -> div -> body -> html -> document -> window
欢迎大家互相学习交流。独行冰海
事件对象
事件对象:在触发DOM上的某个事件的时候,会产生一个事件对象event,而在这个对象当中会包含着所有与事件有关的信息。我们书写如下基本代码:
<script><br> var main = document.getElementById('main');<br> main.onclick = function(event){<br> console.log(event);<br> }<br></script>
使用console.log打印出的结果如下图。
JavaScript事件 详细讲解 - 独行冰海 - 独行冰海
其中有两个信息,我们最为常用,分别是type和target。
type表示的是被触发事件的类型;
target表示的是事件的目标。
其他信息,如:
bubbles:表示事件是否冒泡
cancelable:表示是否可以取消事件的默认行为
currentTarget:表示事件处理程序当前正在处理事件的那个元素
defaultPrevented:表示是否调用了preventDefault()
detail:表示的是与事件相关的细节信息
eventPhase:调用事件处理处理程序的阶段:1表示捕获阶段、2表示处于目标、3表示冒泡阶段
在其中还有一些其他信息,在此就不再一一列举了。
事件方面性能优化
谈一谈事件方面如何优化性能——事件委托和事件处理程序的移除
在JavaScript代码当中,添加到页面中的事件越多,页面的性能也就越差。导致这一问题的原因主要有:
每个函数都是对象,都会占用内存。内存中对象越多,性能也就越差。
必须事先指定所有事件处理程序而导致的DOM访问次数,会延迟整个页面的交互就绪时间。
为了进行页面的性能优化,因此我们会采用两种方法,就是上面提到的——事件委托和事件处理程序的移除。
事件委托
很多人问我,什么时候使用事件委托,其实,简单来说,当时一个页面事件处理程序比较多的时候,我们通常情况下会使用它。
事件委托主要利用了事件冒泡,只指定一个事件处理程序,就可以管理一个类型的所有事件。例如:我们为整个一个页面制定一个onclick事件处理程序,此时我们不必为页面中每个可点击的元素单独设置事件处理程序(onclick)。还是,看一个例子。
效果:点击不同的元素执行不同的操作。
不使用事件委托:
左
1
2
3
右
<script><br> var left = document.getElementById('left');<br> var first = document.getElementById('first');<br> var second = document.getElementById('second');<br> var third = document.getElementById('third');<br> var right = document.getElementById('right');<br> left.addEventListener("click", function(){<br> alert('点击的是左这个字,执行相关操作'); <br> }, false);<br> first.addEventListener("click", function(){<br> alert('要执行第一个序号对应的相关操作'); <br> }, false);<br> second.addEventListener("click", function(){<br> alert('要执行第二个序号对应的相关操作'); <br> }, false);<br> third.addEventListener("click", function(){<br> alert('要执行第三个序号对应的相关操作'); <br> }, false);<br> right.addEventListener("click", function(){<br> alert('点击的是右这个字,执行相关操作'); <br> }, false);<br></script>
不难看出,我们使用了5个事件侦听器,每设置一个就需要绑定一个。
使用事件委托:
左
1
2
3
右
<script><br> var control = document.getElementById('control');<br> control.addEventListener("click", function(e){<br> // 注意,此处没有考虑IE8-的浏览器,如果想书写兼容全部浏览器的事件处理程序,请查看下一篇博文<br> var target = e.target;<br> // 在此使用的是switch语句,也可以采用if进行判断<br> switch(target.id){<br> case "left" : {<br> alert('点击的是左这个字,执行相关操作');<br> break;<br> }<br> case "first" : {<br> alert('要执行第一个序号对应的相关操作');<br> break;<br> }<br> case "second" : {<br> alert('要执行第二个序号对应的相关操作');<br> break;<br> }<br> case "third" : {<br> alert('要执行第三个序号对应的相关操作');<br> break;<br> }<br> <br> case "right" : {<br> alert('点击的是右这个字,执行相关操作');<br> break;<br> }<br> }<br> }, false);<br></script>
简要的总结一下所谓的事件委托:给元素的父级或者祖级,甚至页面绑定事件,然后利用事件冒泡的基本原理,通过事件目标对象进行检测,然后执行相关操作。其优势在于:
大大减少了事件处理程序的数量,在页面中设置事件处理程序的时间就更少了(DOM引用减少——也就是上面我们通过id去获取标签,所需要的查找操作以及DOM引用也就更少了)。
document(注:上面的例子没有绑定在document上,而是绑定到了父级的div上,最为推荐的是绑定在document上)对象可以很快的访问到,而且可以在页面生命周期的任何时点上为它添加事件处理程序,并不需要等待DOMContentLoaded或者load事件。换句话说,只要可单击的元素在页面中呈现出来了,那么它就立刻具备了相应的功能。
整个页面占用的内存空间会更少,从而提升了整体的性能。
移除事件处理程序
每当将一个事件处理程序指定给一个元素时,在运行中的浏览器代码与支持页面交互的JavaScript代码之间就会建立一个连接。连接数量也直接影响着页面的执行速度。所以,当内存中存在着过时的“空事件处理程序”的时候,就会造成Web应用程序的内存和性能问题。
那么什么时候会造成“空事件处理程序”的出现呢?
文档中元素存在事件,通过一些DOM节点操作(removeChild、replaceChild等方法),移除了这个元素,但是DOM节点的事件没有被移除。
innerHTML去替换页面中的某一部分,页面中原来的部分存在事件,没有移除。
页面卸载引起的事件处理程序在内存中的滞留。
解决方法:
合理利用事件委托;
在执行相关操作的时候,先移除掉事件,再移除DOM节点;
在页面卸载之前,先通过onunload事件移除掉所有事件处理程序。

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

本文提供国内安全下载欧易OKX App的详细指南。由于国内应用商店限制,建议用户通过欧易OKX官方网站下载App,或使用官网提供的二维码扫描下载。下载过程中,务必核实官网地址,检查应用权限,安装后进行安全扫描,并启用双重验证。 使用过程中,请遵守当地法律法规,使用安全网络环境,保护账户安全,警惕诈骗,理性投资。 本文仅供参考,不构成投资建议,数字资产交易风险自负。

Coinbase安全登录指南:如何避免钓鱼网站和诈骗? 网络钓鱼和诈骗日益猖獗,安全访问Coinbase官方登录入口至关重要。本文提供实用指南,帮助用户安全地找到并使用Coinbase最新官方登录入口,保护数字资产安全。我们将介绍如何识别钓鱼网站,以及如何通过官方网站、移动应用或可信第三方平台安全登录,并提供加强账户安全的建议,例如使用强密码和启用双重验证。 避免因错误登录导致资产损失,请务必仔细阅读本文!

欧易OKX作为全球领先的数字资产交易平台,以其丰富的交易产品、强大的安全保障和便捷的用户体验吸引众多投资者。然而,网络安全风险日益严峻,如何安全注册欧易OKX官方账户至关重要。本文将提供欧易OKX官方网站最新注册入口,并详细讲解安全注册的步骤和注意事项,包括如何识别官方网站、设置强密码、开启双重验证等,帮助您安全便捷地开启数字资产投资之旅。请注意,数字资产投资存在风险,请谨慎决策。

本文提供安全可靠的币安交易所App下载指南,帮助用户解决在国内下载币安App的难题。由于国内应用商店限制,文章推荐优先从币安官网下载APK安装包,并详细介绍了官网下载、第三方应用商店下载以及朋友分享等三种方法,同时强调了下载过程中的安全注意事项,例如验证官网地址、检查应用权限、使用安全软件扫描等。此外,文章还提醒用户了解当地法律法规,注意网络安全,保护个人信息,谨防诈骗,理性投资,安全交易。 文章最后再次强调,下载和使用币安App需遵守当地法律法规,风险自负,不构成任何投资建议。

本文提供安全可靠的指南,帮助用户访问BitMEX交易所的最新官方网站,并提升交易安全。由于监管和网络安全威胁,识别BitMEX官方网站至关重要,避免钓鱼网站窃取账户信息和资金。文章介绍了通过可信加密货币平台、官方社交媒体、新闻媒体以及订阅官方邮件等方法查找官方网站入口,并强调了核对域名、使用HTTPS连接、检查安全证书等安全提示,以及启用双重验证、定期更改密码的重要性。 记住,加密货币交易高风险,请谨慎投资。

Coinbase交易所网页版因其便捷性广受欢迎,但安全访问至关重要。本文旨在指导用户安全登录Coinbase官方网页版,避免钓鱼网站和黑客攻击。 我们将详解如何通过搜索引擎、可信第三方平台及官方社交媒体验证官方入口,并强调检查地址栏安全锁、启用双重验证、避免公共Wi-Fi、定期更改密码及警惕钓鱼邮件等安全措施,保障您的数字资产安全。 正确访问Coinbase官方网站是保护您的数字货币的第一步,本文将助您安全开启数字货币交易之旅。

BitMEX作为老牌加密货币衍生品交易平台,其官方网站入口的准确性至关重要。由于钓鱼网站猖獗,误入假冒网站可能导致账户被盗和资金损失。本文旨在指导用户安全访问BitMEX官方网站,提供通过可信加密货币信息平台(如CoinMarketCap、CoinGecko)、官方社交媒体、验证现有地址及官方支持渠道等多种方法,并强调启用双重验证、定期更改密码及使用安全软件等安全措施,帮助用户有效规避风险,保障账户安全。

在Node.js环境中解决第三方接口返回403的问题当我们在使用Node.js调用第三方接口时,有时会遇到接口返回403错误�...
