JavaScript 事件

更新日期: 2019-05-01阅读: 2.4k标签: 事件

前言:

1、客户端 JavaScript 程序采用了异步事件驱动编程模型

2、事件不是 JavaScript 对象,不会出现在程序源代码

3、事件类型是一个用来说明发生什么类型事件的字符串,有时会称之为事件名字

4、事件目标是发生的事件或与之相关的对象,当讲事件时,我们必须同时指明事件类型和事件目标

5、事件处理程序或事件监听程序是处理或响应事件的函数

6、事件对象是与特定事件相关且包含有关该事件详细信息的对象;事件对象作为参数传递给事件处理程序函数(不包括 IE8 及之前版本);所有的事件对象都有用来指定事件类型的 type 属性和指定事件目标的 target 属性(IE8 及之前版本采用 srcElement 而非 target);每个事件类型都为其相关事件对象定义一组属性

7、事件传播浏览器决定哪个对象触发其事件处理程序的过程,对于单个对象的特定事件(如 Window 对象的 load 事件),必须是不能传播的

8、当文档元素上发生某个类型的事件时,它们会在文档树上向上传播或“冒泡

9、事件传播的另一种形式称为事件捕获,在容器元素上注册的特定处理程序有机会在事件传播到真实目标之前拦截(或“捕获”)它,IE8 及之前版本并不支持事件捕获

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

注:冒泡和捕获定义了事件触发的顺序;冒泡是从内部事件对象本身开始触发事件,然后依次向其祖先元素冒泡触发事件,而捕获则是在其祖先元素先触发,然后再往其自身方向依次触发事件

 

事件类型:

1、传统事件类型:

① 表单事件:

  a、当提交表单和重置表单时,<form> 元素会分别触发 submit 和 reset 事件

  b、当用户和类按钮表单元素(包括单选按钮和复选框)交互时,它们会发生 click 事件

  c、当用户通过输入文字、选择选项或选择复选框来改变相应表单元素的状态时,这些通常维护某种状态的表单元素会触发 change 事件;对于文本输入域,只有用户和表单元素完成交互并通过 Tab 键或单击的方式移动焦点到其他元素上时才会触发 change 事件

  d、无论用户何时输入文字(通过键盘或剪切和粘贴)到 <textarea> 和其他文本输入表单元素,除 IE 外的浏览器都会触发 input 事件

  e、响应通过键盘改变焦点的表单元素在得到和失去焦点时会分别触发 focus 和 blur 事件,这两个事件不会冒泡(focusin 和 focusout 可以代替它们,且可以冒泡),但其他所有表单事件都可以

② Window 事件:指事件的发生与浏览器窗口本身而非窗口中显示的任何特定文档内容相关

  a、当文档和其他所有外部资源完全加载并显示给用户时会触发 load 事件

  b、当用户离开当前文档转向其他文档时会触发 unload 事件

  c、beforeunload 事件和 unload 类似,但它能提供询问用户是否确定离开当前页面的机会(该事件的处理程序如果返回字符串,则会在新页面加载之前展示给用户看,这样用户就有机会取消跳转)

  d、当图片(或其他网络资源)因为用户停止加载进程而导致失败就会触发 abort 事件(部分浏览器支持)

  e、当浏览器窗口从操作系统中得到或失去键盘焦点时会触发 focus 和 blur 事件

  f、当用户调整浏览器窗口大小或滚动它时会触发 resize 和 scroll 事件(scroll 事件也能在任何可以滚动的文档元素上触发)

注:Window 对象的 onerror 属性有点像事件处理程序,当 JavaScript 出错时会触发它,但它并不是真正的事件处理程序,因为它不能用不同的参数来调用

③ 鼠标事件:当用户在文档上移动或单击鼠标时都会产生鼠标事件,该类事件会“冒泡”

  a、用户每次移动或拖动鼠标时,会触发 mousemove 事件

  b、当用户按下或释放鼠标按键时,会触发 mousedown 和 mouseup 事件

  c、在 mousedown 和 mouseup 事件队列之后,浏览器也会触发 click 事件

  d、当用户在相当短的时间内连续两次单击鼠标按键,跟在第二个 click 事件之后就是 dblclick 事件

  e、在显示菜单之前,通常会触发 contextmenu 事件,而取消这个事件就可以阻止菜单显示

  f、当用户移动鼠标指针从而悬停在新元素上或不再悬停在某个元素上时,会触发 mouseover 和 mouseout 事件(会“冒泡”)

  g、IE 提供了不会冒泡版本的 mouseenter 和 mouseleavejquery 模拟非 IE 的浏览器中这些事件的支持

  h、当用户滚动鼠标滚轮时,浏览会触发 mousewheel 事件(在 Firefox 中是 domMouseScroll 事件)

④ 键盘事件:当键盘聚焦到 Web 浏览器时,用户每次按下或释放键盘上的按键时都会产生事件

  a、无论何时按下或释放按键(甚至是辅助键)都会触发 keydown 和 keyup 事件

  b、当 keydown 事件产生可打印字符时,在 keydown 和 keyup 之间会触发另一个 keypress 事件

注:若按下键重复产生字符时,在 keyup 事件之前可能产生很多 keypress 事件


2、DOM 事件:

① DOM 即文档对象模型,它是一种与编程语言及平台无关的 api ,借助于它,程序能够动态地访问和修改文档内容、结构或显示样式

② W3C 协会早在 1988 年就开始了 DOM 标准的制定,W3C DOM标准可以分为 DOM1DOM2DOM3 三个版本

 DOM1 主要定义的是 html 和 XML 文档的底层结构, DOM2 和DOM3 则在这个结构的基础上引入了更多的交互能力,也支持了更高级的XML特性

注:API 是应用程序接口,它以编程语言提供的结构,允许开发人员更容易地创建复杂的功能。它们抽象出更复杂的代码,并提供一些简单的语法来使用。简而言之,API就是一种为你客户提供服务的方法


3、HTML5 事件:

① HTML5 及相关标准定义了大量新的 Web 应用 API,其中许多 API 都定义了事件,如:getElementsByClassName() 方法和 querySelectorAll() 方法以及文档元素的 dataset 属性

② 广泛推广的 HTML5 特性之一是加入用于播放音频和视频的 <audio> 和 <video> 元素

③ HTML5 的拖放 API 允许 JavaScript 应用参加基于操作系统的拖放操作,实现 Web 和原生应用间的数据传输

④ HTML5 为 HTML 表单定义了大量的新特性,也定义了表单验证机制

⑤ HTML5 定义了历史管理机制,它允许 Web 应用同浏览器的返回和前进按钮交互 

⑥ HTML5 包含了对离线 Web 应用的支持

⑦ HTML5 及相关标准定义了一些不在窗口、文档和文档元素的对象上触发的事件

⑧ HTML5 及相关标准定义了少量庞杂的事件类型

 

4、触摸屏和移动设备事件

① 强大的移动设备的广泛应用需要建立新的事件类型

② 手势事件:用于两个手指之间的缩放与旋转;手势开始时产生 gesturestart 事件,手势结束产生 gestureend 事件,在这两个事件之间是跟踪手势过程的 gesturechange 事件队列;这三个事件对象都有属性 scale(缩放比例)和 rotation(旋转角度),“捏紧”手势的 scale 值小于 1.0,“撑开”手势的 scale 值大于 1.0;rotation 指从事件开始手指旋转的角度正值表示顺时针旋转

③ 触摸事件:当手指触摸屏幕时,会触发 touchstart 事件,移动时会触发 touchmove 事件,手指离开时会触发 touchend 事件,不像鼠标事件,触摸事件并不直接报告触摸的坐标。相反,触摸事件传递的事件对象有一个 changedTouches 属性,该属性是一个类数组对象,其每个元素都描述触摸的位置

④ 横竖屏切换事件:当设备允许用户从竖屏旋转到横屏模式时会在 window 对象上触发 orientationchange 事件,window 对象的 orientatation 属性能给出当前方位,其值是 0,90,180 或 -90


链接: https://www.fly63.com/article/detial/3164

js中addEventListener事件监听器参数详解

我们都知道addEventListener() 的参数约定是:useCapture是可选参数,默认值为false,目前DOM 规范做了修订:addEventListener() 的第三个参数可以是个对象值了。passive就是告诉浏览器我可不可以用stopPropagation...

js监听浏览器返回,pushState,popstate 事件,window.history对象

在WebApp或浏览器中,会有点击返回、后退、上一页等按钮实现自己的关闭页面、调整到指定页面、确认离开页面或执行一些其它操作的需求。可以使用 popstate 事件进行监听返回、后退、上一页操作。

CSS中的pointer-events属性实现点穿效果

具有层级关系的结构中,使用了pointer-events:none 属性将会使当前元素中的事件不会被捕获,从而实现了点穿的效果。而当代码示例中假如top元素具有子元素且显示指定pointer-events属性不为none的时候,top元素注册的事件将会被捕获/冒泡触发

js鼠标事件参数,获取鼠标在网页中的坐标

事件对象 event,JavaScript 将事件event作为参数传递,IE中把 event 事件对象作为全局对象 window 的一个属性,获取鼠标在网页中的坐标 = 鼠标在视窗中的坐标 + 浏览器滚动条坐标

js事件冒泡和默认事件处理(原生js、vue)

何为默认事件?比如 a 会跳转页面,submit 会提交表单等。普通js方法:e.preventDefault()函数。Vue.js方法: .prevent 是vue 的内置修饰符,调用了 event.preventDefault()阻止默认事件

js keyup、keypress和keydown事件 详解

js keyup、keypress和keydown事件都是有关于键盘的事件,当一个按键被pressed 或released在每一个现代浏览器中,都可能有三种客户端事件。

深入nodejs-核心模块Events详解(事件驱动)

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O的模型,使其轻量又高效。比如,文件操作中的fs事件流,网络编程所用到的tcp,http模块等,当你回想自己写的程序后,会发现很多操作都基于事件驱动,Events类。

纯CSS实现点击事件展现隐藏div菜单列表/元素切换

在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况,最常见的方法当然还是前端框架直接调用,省心省力,不易出错;当然还有使用纯JS实现的小代码段。我这里整理了纯CSS实现方式,给需要的人和给自己做个笔记:实现原理利用CSS伪类:target

关于鼠标移动太快导致moseleave事件不触发的问题

我做的是一个table的编辑功能,当移入某行的时候展示编辑状态,在移出某行的时候显示的是原始状态,此时遇到一种情况,就是.当mousenter事件触发之后,由于鼠标移动得太快,同一个tr上绑定的mouseleave事件压根儿就没有执行。

Js事件传播流程

js事件传播流程主要分三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。在我们平常用的addEventListener方法中,一般只会用到两个参数,一个是需要绑定的事件,另一个是触发事件后要执行的函数

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!