JavaScript 事件

时间: 2019-05-01阅读: 172标签: 事件

前言:

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 和 mouseleave,JQuery 模拟非 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


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

如何在React中优雅的处理doubleClick?

上午楼主遇到一个需要处理双击事件的需求,在这里介绍下如何在触发doubleCLick时间的时候, 不触发click事件的解决办法, 顺便分享给大家。解决办法也很简单: 延迟 click事件的处理, 直到判断这个click 不在 doubleClick 中。

jquery的on绑定点击事件执行两次的解决办法

jquery中用.on()给页面中新加的元素添加点击事件时,点击事件源,绑定的事件执行两次,这里的alert会执行两次,相应地数组删除也执行两次,具体代码如下

js事件委托(事件代理)

js中事件冒泡我们知道,子元素身上的事件会冒泡到父元素身上,事件代理就是本来加载子元素身上的事件,加在其父元素身上,其问起产生了,那么多的子元素怎么区分事件本应该是哪个子元素的。 答案就是event对象记录的事件源

vue事件修饰符

在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符,从而转变为使用 change事件进行同步;如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符:

vue.js事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。

对JS事件机制的深入理解

发生一个事件时,事件及事件处理句柄会被放入浏览器的事件队列,事件可归为以下几类:浏览器事件:window.load、document.DomContentLoaded等,网络请求事件:ajax、websocket

js事件概念和事件监听

JavaScript使我们有能力创建动态页面,网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。我们可以认为事件是可以被JavaScript侦测到的一种行为。HTML元素大都包含了自己的默认行为,例如:超链接、提交按钮等。

vue中的事件修饰符(.stop、.prevent、.self、.capture、.once)

使用.stop阻止事件的冒泡行为。使用.prevent阻止事件的默认行为。使用.self实现只有点击当前元素才会触发事件处理函数。使用.capture实现捕获触发事件的机制,即从外部事件开始执行。使用.once实现事件的触发次数为一次。

网页浏览器缩放监听

这里的缩放不是指resize事件(改变浏览器窗口大小),而是指浏览器本身的缩放功能,一般使用以下方式进行缩放:ctrl配合鼠标滚轮;ctrl配合-/+/0进行缩放。

原生JS实时监听input框输入值

利用原生JS实时监听input框输入值,原生JS中可以使用oninput,onpropertychange,onchange,oninput,onpropertychange,onchange的用法

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

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全