事件

【事件类型】

不同的事件类型具有不同的信息。

【UI事件】

指的是那些不一定与用户操作有关的事件。当用户与页面上的元素交互时触发。

load事件:当页面完全加载后,就会 触发window 上面的load事。

unload事件:这个事件在文档被完全卸载后触发。利用这个事件最多的情况是清除引用。

resize事件:当浏览器窗口被调整到一个新的高度或宽度时,就会触发resize事件。浏览器窗口最大化或者最小化时也会触发resize事件。

scroll事件:是在window对象上发生的,但是它实际表示的则是页面相应元素的变化。scroll事件也会在文档被滚动期间重复被触发。

【焦点事件】

在页面元素获得或者失去焦点时触发。利用这些事件并与document.hasFocus()方法及document.activeElement属性配合,可以知晓用户在页面上的行踪。

【鼠标与滚轮事件】

click:单击主鼠标时触发;

dblclick:双击主鼠标时触发;

mousedown:按下任意鼠标按钮时触发;

mouseenter:鼠标光标从元素外部首次移动到元素范围之内时触发;

mouseleave:在位于元素上方的鼠标光标移动到元素范围之外时触发;

mousemove:当鼠标指针在元素内部移动时重复地触发;

mouseout:在鼠标指针位于一个元素上方,然后用户将其移入另一个元素时触发;

mouseover:在鼠标指针位于一个元素外部,然后用户将其首次移入另一个元素边界之内时触发;

mouseup:释放鼠标按钮时触发。

【键盘与文本事件】

对键盘事件的支持主要遵循的是DOM0级。

keydown:按下键盘任意键时触发,而且如果按住不放的话,会重复触发此事件。

keypress:按下键盘上的字符键时触发,而且如果按住不放的话,会重复触发此事件。按下Esc键也会触发此事件。

keyup:释放键盘上的键时触发。

文本事件:textInput。这个事件是对keypress的补充,用意是在将文本显示给用户之前更容易拦截文本。在文本插入文本框之前会触发textInput事件。

【复合事件】

复合事件,用于处理IME的输入序列。IME(输入法编辑器)可以让用户输入在物理键盘上找不到的字符。通常需要按住多个键,但最终只输出一个字符。

compositionstart:在IME的文本复合系统打开时触发,表示要开始输入了;

compositionupdate:在向输入字段中插入新字符时触发。

compositionend:在IME的文本复合系统关闭时触发,表示返回正常键盘输入状态。

【变动事件】

DOM2级的变动事件能在DOM中的某一部分发生变化时给出提示。

删除节点:使用removeChild()和replaceChild()从DOM中删除节点。

插入节点:使用appendChild()、replaceChild()或insertBefore()方法向DOM中插入节点。

【HTML5事件】

HTML5详尽列出了浏览器应该支持的所有文件。

contextmenu事件:冒泡;用以表达何时应该显示上下文菜单,以便开发人员取消默认的上下文菜单而提供自定义的菜单。

beforeunload事件:让开发人员有可能在页面卸载前组织这一操作。将控制权交给用户。

DOMContentLoaded事件:支持在页面下载的早起添加事件处理程序。用户能够尽早地与页面进行交互。

readystatechane事件:其目的是提供与文档或元素加载状态有关的信息,支持readystatechane事件的每个对象都有一个readyState属性。包括uninitialized(未初始化),loading(正在加载),loaded(加载完毕),interactive(交互),complete(完成)这五个值。

【内存和性能】

事件委托:对“事件处理程序过多”问题的解决方案。利用了事件冒泡,只指定一个事件处理程序,就可以管理某一类型所有事件。

移除事件处理程序:

空事件处理程序:一种情况就是从文档中移除带有事件处理程序的元素。另一种是在卸载页面的时候。

【事件模拟】

模拟触发事件。有模拟鼠标事件、模拟键盘事件。IE有它自己的模拟事件的方式。

JavaScript(7)——事件2.0的更多相关文章

  1. jQuery $(document).ready()和JavaScript onload事件

    jQuery $(document).ready()和JavaScript onload事件 Why we need a right time? 对元素的操作和事件的绑定需要等待一个合适的时机,可以看 ...

  2. Javascript事件模型系列(四)我所理解的javascript自定义事件

    被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情,公司的个人的,搞的自己心烦意乱浮躁了一 ...

  3. javascript通用事件封装

    随着最近几年Html5的兴起,越来越多的应用采用html5进行实现,一个优秀的网页应用不但需要美观简洁的UI界面,更需要一个良好的交互.网页应用大部分的交互需要用javascript事件进行实现.虽然 ...

  4. JavaScript中事件绑定的方法总结

    最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看. JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScr ...

  5. JavaScript的事件监听、捕获和冒泡

    在前端开发中,我们经常需要对某些事件进行监听.这样只要在指定的元素上触发了该事件,就会执行一个回调函数来进行相关的操作. 而JavaScript中事件监听的方法总共有三种,分别如下: element. ...

  6. javascript之事件绑定

    曾经写过一篇随笔,attachEvent和addEventListener,跟本文内容有很多相似之处 本文链接:javascript之事件绑定 1.原始写法 <div onclick=" ...

  7. JavaScript键盘事件全面控制代码

    JavaScript键盘事件全面控制,它可以捕获键盘事件的输入状态,可以判断你敲打了键盘的那个键,ctrl.shift,26个字母等等,返回具体键盘值. <html> <head&g ...

  8. Javascript知识——事件

    O(∩_∩)O~~又是新的一周开始了,今天还是在继续学习Javascript知识,今天主要讲了事件的知识.现在就总结下吧. 事件 事件一般是用于浏览器和用户操作进行交互.最早是 IE 和 Netsca ...

  9. 理解的javascript自定义事件

    理解的javascript自定义事件 被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情, ...

  10. 走进javascript——DOM事件

    DOM事件模型 在0级DOM事件模型中,它只是简单的执行你为它绑定的事件,比如你为某个元素添加了一个onclick事件,当事件触发时,它只是去调用我们绑定的那个方法,不再做其他的操作. 在2级DOM事 ...

随机推荐

  1. win8,win10安装mysql

    以管理员身份进到命令窗口后,找到要安装的文件,执行msiexec /package mysql-installer-community-5.7.16.0.msi   回车即可

  2. Webdriver其他定位方式

    1.下拉框的定位 在遇到select下拉框的选择时,比如: <select id="nr" name="NR"> <option select ...

  3. ionic中$ionicPopover和$ionicModal

    Popover可点多个按钮弹出同一个浮动框但内容不一样.那想要在同一页面弹出不同的浮动框怎么办呢? 这事就用到了$ionicModal,他和$ionicPopover一样的用法. 请看图: html: ...

  4. css3学习01

    1.圆角边框(div的一个属性:border-radius) <!DOCTYPE html> <html> <head> <style> div { t ...

  5. Paxos算法简单介绍

    一种基于消息传递且具有高度容错特性的一致性算法.解决在存在宕机或者网络异常的集群中对某个数据的值达成一致性,并且保证无论在发生以上任何异常都不会破坏整个系统的一致性,具有容错性. Paxos算法实现的 ...

  6. ios @property

    参考资料 http://blog.csdn.net/pingchangtan367/article/details/14000315 http://blog.csdn.net/xdrt81y/arti ...

  7. [BZOJ2339][HNOI2011]卡农

    [BZOJ2339][HNOI2011]卡农 试题描述 输入 见"试题描述" 输出 见"试题描述" 输入示例 见"试题描述" 输出示例 见& ...

  8. RabbitMQ高可用配置(Haproxy + Keepalived)

    网络结构如下图: 共有104.105.106三台RabbitMQ Server,互为集群 其中104和105安装了Haproxy,每个Haproxy承担三台RabbitMQ server的负载均衡 两 ...

  9. 第八十二节,CSS3过渡效果

    CSS3过渡效果 学习要点: 1.过渡简介 2.transition-property 3.transition-duration 4.transition-timing-function 5.tra ...

  10. iOS开发怎么样做第三方登陆(友盟社会化分享)

    基于前一篇文章   自定义UI后 实现如下代码   即可 //第三方登陆 //    UMSocialSnsPlatform *snsPlatform = [UMSocialSnsPlatformMa ...