当用户的某个行为影响到整个浏览器窗口时,窗口事件就发生了。最常见的窗口事件是通过简单地打开一个网页来加载窗口。关闭、移动窗口或者将窗口置于其他窗口的后面等事件也能触发相应的event hanlder。

">
立诚勿怠,格物致知
It's all about connecting the dots

JavaScript中的事件

1. 窗口事件

当用户的某个行为影响到整个浏览器窗口时,窗口事件就发生了。最常见的窗口事件是通过简单地打开一个网页来加载窗口。关闭、移动窗口或者将窗口置于其他窗口的后面等事件也能触发相应的event hanlder。

使用event handler的时候,你会发现dot语法在把event handler与相应的对象连接起这件事上是非常有用的,下面是一些例子。

  • window.onfocus
  • window.onload
  • document.onmousedown

注意,当你像上面示例那样将event handler作为对象的一部分时,event handler中的所有字母都是小写的。下面是一些常见的窗口事件。

onload事件:
当用户打开你的网页,并且该网页所有元素都加载完毕的时候,onload事件就会被触发。
onunload事件:
当用户离开你的网页时,onunload事件就被触发了。
onresize事件:
Netscape 4.x浏览器有个著名的bug——当网页尺寸被重新调整后,其中的动态内容不会被重新绘制。不过,这个bug在Netscape 6+浏览器中已经不存在了。
onmove事件:
移动窗口的时候会触发onmove事件。
onabort事件:
当用户取消网页上图片的加载时,会触发onabort事件。这个事件并不常用,并且似乎也不是所有的浏览器都完全支持onabort事件。
onerror事件:
当JavaScript在网页上报错时,可能会触发onerror事件。在放到网络中的复杂页面里,可以设定onerror = null来使得页面表现得较为友好,在这种情况下,浏览器会不在网页上对某些错误信息进行报错,但具体不显示哪些错误信息是取决于浏览器的。
onfocus事件:
onfocus事件和onblur事件是相反的两个事件。当某个网页成为位于最前面的激活窗口时,会触发onfocus事件。
onblur事件:
当用户将网页置于其他网页的后面时,就会触发onblur事件。

2. 鼠标事件

用户与网页的许多交互行为是通过鼠标的移动和点击来实现的。JavaScript为这些事件设定了一套handler(处理器)。

onmousedown事件:
O(∩_∩)O哈哈~
onmouseup事件:
与onmousedown事件相似。当用户按下鼠标按钮然后放开时,会触发onmouseup事件。
onmousemove事件:
当访问网页的用户移动其鼠标的时候,就会触发onmousemove事件。
onmouseover事件:
当鼠标移入绑定了onmouseover事件的区域时,会触发onmouseover事件。
onmouseout事件:
在onmouseover事件之后,总是会有onmouseout事件。当用户将鼠标移出绑定了onmouseout事件的区域时,会促发onmouseout事件。
ondblclick事件:
O(∩_∩)O哈哈~
onclick事件:
onclick事件与ondblclick事件非常相似,除了只用单击而非双击就可以触发onclick事件。onclick事件与onmouseup事件也很像,区别在于onclick事件需要用户按下再松开鼠标按键才能触发,而onmouseup只需要后面松开鼠标按键的操作就可以触发了。

3. 表单事件

在验证表单时,你会想到使用表单事件的。借助下面列出的事件,你就可以处理用户对表单采取的任何行为了。

onsubmit事件:
当用户点击提交(Submit)按钮以结束表单填写时,会触发onsubmit事件。另外,根据具体的浏览器,有时候当用户退出表单中最后一个文本输入区域时,也会触发onsubmit事件。若一个脚本含有onsubmit handler(处理器),并且该handler返回的结果为false时,表单将不会被发送给服务器。
onreset事件:
当用户点击重置(Reset)按钮(当有该按钮时)时,会触发onreset事件。
onchange事件:
当用户更改表单字段时,会触发onchange事件。
onselect事件:
当用户选中input或textarea表单中的文本时,会触发onselect事件。
onclick事件:
当用户点击复选框(check box)或单选按钮(radio button)时,会触发onclick事件。
onblur事件:
注意:当用户在更改完了某个表单字段里的内容后离开该表单字段时,会同时触发onblur事件和onchange事件。当用户未改变表单字段中的内容并离开该表单字段时,将只触发onblur事件。
onfocus事件:
O(∩_∩)O哈哈~

4. 按键事件

除了鼠标,其他的主要输入设备就是键盘了——至少在非常酷的计算机思维控制装置奏效之前是这样的。

onkeydown事件:
O(∩_∩)O哈哈~
onkeyup事件:
onkeyup事件跟onkeydown事件是几乎相同的两个事件,区别在于onkeyup事件是在用户已经按下按键,现在要让按键恢复到它被按下之前的状态时触发的。
onkeypress事件:
当用户按下按键并松开按键时,会触发onkeypress事件(onkeyup是由松开按键这个行为触发的,onkeypress是由按下按键和松开按键这两个行为都执行后才触发的。)

以上编译自:JavaScript Visual QuickStart Guide (8th Edition)

赞(0) 打赏
文章名称:《JavaScript中的事件》
文章链接:https://www.orzzone.com/javascript%e4%b8%ad%e7%9a%84%e4%ba%8b%e4%bb%b6.html
商业联系:yakima.public@gmail.com

本站大部分文章为原创或编译而来,对于本站版权文章,未经许可不得用于商业目的,非商业性转载请以链接形式标注原文出处。
本站内容仅供个人学习交流,不做为任何投资、建议的参考依据,因此产生的问题需自行承担。

评论 抢沙发

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力提供更多优质内容!

支付宝扫一扫打赏

微信扫一扫打赏

登录

找回密码

注册