JavaScript 事件

前言:编程

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

  二、事件不是 JavaScript 对象,不会出如今程序源代码中浏览器

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

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

  五、事件处理程序或事件监听程序是处理或响应事件的函数编程语言

  六、事件对象是与特定事件相关且包含有关该事件详细信息的对象;事件对象做为参数传递给事件处理程序函数(不包括 IE8 及以前版本);ide

     全部的事件对象都有用来指定事件类型的 type 属性和指定事件目标的 target 属性(IE8 及以前版本采用 srcElement 而非 target);函数

     每一个事件类型都为其相关事件对象定义一组属性性能

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

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

  九、事件传播的另外一种形式称为事件捕获,在容器元素上注册的特定处理程序有机会在事件传播到真实目标以前拦截(或“捕获”)它,

     IE8 及以前版本并不支持事件捕获

  十、事件处理程序能够经过返回一个适当的、调用事件对象的某个方法或设置事件对象的某个属性阻止默认操做的发生

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

  而捕获则是在其祖先元素先触发,而后再往其自身方向依次触发事件

 

事件类型:

  一、传统事件类型:

    ① 表单事件:

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

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

      c、当用户经过输入文字、选择选项或选择复选框来改变相应表单元素的状态时,这些一般维护某种状态的表单元素会触发 change 事件;

           对于文本输入域,只有用户和表单元素完成交互并经过 Tab 键或单击的方式移动焦点到其余元素上时才会触发 change 事件

      d、不管用户什么时候输入文字(经过键盘或剪切和粘贴)到 <textarea> 和其余文本输入表单元素,除 IE 外的浏览器都会触发 input 事件

      e、响应通过键盘改变焦点的表单元素在获得和失去焦点时会分别触发 focus 和 blur 事件,这两个事件

         不会冒泡(focusinfocusout 能够代替它们,且能够冒泡),但其余全部表单事件均可以

    

    ② 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、当用户移动鼠标指针从而悬停在新元素上或再也不悬停在某个元素上时,会触发 mouseovermouseout 事件(会“冒泡”)

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

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

 

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

      a、不管什么时候按下或释放按键(甚至是辅助键)都会触发 keydown 和 keyup 事件

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

      注:若按下键重复产生字符时,在 keyup 事件以前可能产生不少 keypress 事件


  二、DOM 事件:

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

    ② W3C 协会早在 1988 年就开始了 DOM 标准的制定,W3C DOM标准能够分为 DOM1, DOM2, DOM3 三个版本

     DOM1 主要定义的是 HTML 和 XML 文档的底层结构

      DOM2 和DOM3 则在这个结构的基础上引入了更多的交互能力,也支持了更高级的XML特性

注:API 是应用程序接口,它以编程语言提供的结构,容许开发人员更容易地建立复杂的功能。

   它们抽象出更复杂的代码,并提供一些简单的语法来使用。简而言之,API就是一种为你客户提供服务的方法

 

  三、HTML5 事件:

    ① HTML5 及相关标准定义了大量新的 Web 应用 API,其中许多 API 都定义了事件,

      如:getElementsByClassName() 方法和 querySelectorAll() 方法以及文档元素的 dataset 属性

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

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

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

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

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

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

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

 

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

    ① 强大的移动设备的普遍应用须要创建新的事件类型

    ② 手势事件:用于两个手指之间的缩放与旋转;手势开始时产生 gesturestart 事件,手势结束产生 gestureend 事件,

      在这两个事件之间是跟踪手势过程的 gesturechange 事件队列;这三个事件对象都有属性 scale(缩放比例)和 rotation(旋转角度)

      “捏紧”手势的 scale 值小于 1.0,“撑开”手势的 scale 值大于 1.0;rotation 指从事件开始手指旋转的角度正值表示顺时针旋转

    ③ 触摸事件:当手指触摸屏幕时,会触发 touchstart 事件,移动时会触发 touchmove 事件,手指离开时会触发 touchend 事件

      不像鼠标事件,触摸事件并不直接报告触摸的坐标。相反,触摸事件传递的事件对象有一个 changedTouches 属性,

      该属性是一个类数组对象,其每一个元素都描述触摸的位置

    ④ 横竖屏切换事件:当设备容许用户从竖屏旋转到横屏模式时会在 window 对象上触发 orientationchange 事件,

      window 对象的 orientatation 属性能给出当前方位,其值是 0,90,180 或 -90

相关文章
相关标签/搜索