除了加载文档的事件onload和鼠标相关的一些事件如onclick,onmouseover等。js还有一些相对不常用的事件,这些事件也有各自的应用场景,本文就介绍 onkeydown,oncontextmenu,onhashchang,onreadychange。可以发现,js中的事件没有采用驼峰表示法,字母组合全部小写。

1.onkeydown事件

  外部输入设备鼠标有很多对应事件,键盘也有对应的事件,这就是onkeydown。例子:事件对象的keyCode属性可以弹出按下键盘上字母的编码。

  

<script>
document.onkeydown = function(ev){
var oevent = ev||event;
alert(oevent.keyCode); }
</script>

2. oncontextmenu事件

  这个事件其实也是鼠标事件,比较特殊。当我们点击网页的右键,不同的浏览器会弹出自己的右键菜单,有 刷新(refresh)、查看网页源代码等选项。这就是oncontextmenu事件不加修改的话事件是浏览器的默认行为。列子:禁用浏览器的右键菜单,让事件函数返回false即可:

  

<script>
document.oncontextmenu=function(){
return false;
}
</script>

   其实,上面的onkeydown也属于浏览器的默认事件,在<input>标签里,键盘按键会输入。我们还可让<input>只能输入数字,禁止其他字符。

  3.onhashchang事件

  关于hash属性的介绍资料已经很多了,这篇讲的很好http://www.ruanyifeng.com/blog/2011/03/url_hash.html,。这里介绍跟hash相关的事件- onhashchang,注意,当hash发生改变时,触发这个事件。

这是H5新增的事件。

  4.onreadychange事件

  ajax过程中事件,XMLHttpRequest的 readyState发生改变,会触发这个事件。

Js中的4个事件的更多相关文章

  1. js中的点击事件(click)的实现方式

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  2. JS中的异步以及事件轮询机制

    一.JS为何是单线程的? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊.(在JAVA和c#中的异步 ...

  3. JS中双击和单击事件冲突解决

    在JS中代码中同一功能块中通常同时会用到单击.双击事件,但通常会遇到一个问题,就是在双击的时候即执行了一次双击事件,而且还执行了两次单击事件.此类冲突在ZTree.DHTMLX中经常遇到. 想要解决两 ...

  4. 为什么JS是单线程?JS中的Event Loop(事件循环)?JS如何实现异步?setimeout?

    https://segmentfault.com/a/1190000012806637 https://www.jianshu.com/p/93d756db8c81 首先,请牢记2点: (1) JS是 ...

  5. JS中onpropertychange和onchange事件区别小结

    当一个HTML元素的属性用js改变的时候,都能通过onpropertychange来捕获.例如一个文本text对象的value属性被页面的脚本修改的时候,onchange无法捕获到,而onproper ...

  6. node.js中对Event Loop事件循环的理解

    javascript是单线程的,所以任务的执行都需要排队,任务分为两种,一种是同步任务,一种是异步任务. 同步任务是进入主线程上排队执行的任务,上一个任务执行完了,下一个任务才会执行. 异步任务是不进 ...

  7. bootstrap table 生成的表格里动态添加HTML元素按钮,JS中添加点击事件,点击没反应---解决办法

    bootstraptable中onExpandRow属性---js  方法添加的 html代码,然后给这代码里面的 元素 添加 事件,却获取不该元素.(称之为未来元素),由于是未来的 所以现在没有这个 ...

  8. js中关于动态添加事件,不能使用循环变量的问题

    在编写事件的时候,我们难免会遇到以下这种情况:<!DOCTYPE html><html lang="en"><head> <meta ch ...

  9. 关于js中的表单事件

    表单结构如下所示: <form > <input type="text" name="txt" id="txt" valu ...

随机推荐

  1. [luogu1640 SCOI2010]连续攻击游戏 (二分图最大匹配)

    传送门 Description lxhgww最近迷上了一款游戏,在游戏里,他拥有很多的装备,每种装备都有2个属性,这些属性的值用[1,10000]之间的数表示.当他使用某种装备时,他只能使用该装备的某 ...

  2. [luogu1397 NOI2013] 矩阵游戏 (数学)

    传送门 Description 婷婷是个喜欢矩阵的小朋友,有一天她想用电脑生成一个巨大的n行m列的矩阵(你不用担心她如何存储).她生成的这个矩阵满足一个神奇的性质:若用F[i][j]来表示矩阵中第i行 ...

  3. Hexo系列(五) 撰写文章

    在利用 Hexo 框架搭建一个属于我们自己的博客网站后,下面我们就来谈谈怎样在网站上书写我们的第一篇博客吧 一.创建文章 在站点文件夹中打开 git bash,输入如下命令创建文章,其中 title ...

  4. Python实现8中常用排序算法

    L = [2,6,4,7,9,1,3,5,8] # 1.插入排序 def insert_sort(List): n = len(List) for i in range(1,n): # 得到索引 j ...

  5. 通过Sqoop实现Mysql / Oracle 与HDFS / Hbase互导数据

    通过Sqoop实现Mysql / Oracle 与HDFS / Hbase互导数据\ 下文将重点说明通过Sqoop实现Mysql与HDFS互导数据,Mysql与Hbase,Oracle与Hbase的互 ...

  6. ExtJs之Ext.comboBox的远程数据源读取程序

    既然可以测试本地AJAX,那就把书前面的代码作一次学习吧. <!DOCTYPE html> <html> <head> <title>ExtJs< ...

  7. EF--code first数据迁移命令

    原文推荐!点我点我! 添加Migrations文件夹,并生成类文件Configuration.cs PM> Enable-Migrations -EnableAutomaticMigration ...

  8. android中常见的内存泄漏和解决的方法

    android中的内存溢出预计大多数人在写代码的时候都出现过,事实上突然认为工作一年和工作三年的差别是什么呢.事实上干的工作或许都一样,产品汪看到的结果也都一样,那差别就是速度和质量了. 写在前面的一 ...

  9. SRM 622 D2L3: Subsets, math, backtrack

    题目:http://community.topcoder.com/stat?c=problem_statement&pm=10554&rd=15855 符合条件的集中非1的元素个数是非 ...

  10. 国内物联网平台初探(一) ——百度物接入IoT Hub

    物接入IoT Hub - 架构 全托管的云服务,帮助建立设备与云端之间安全可靠的双向连接 支撑海量设备的数据收集.监控.故障预测等各种物联网场景 物接入IoT Hub - 功能 通信协议:支持MQTT ...