除了加载文档的事件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. SOA架构设计的案例分析

    面向服务的架构(SOA)是一个组件模型,它将应用程序的不同功能单元(称为服务)进行拆分,并通过这些服务之间定义良好的接口和契约联系起来.接口是采用中立的方式进行定义的,它应该独立于实现服务的硬件平台. ...

  2. 论vue项目api相关代码的组织方式

    论vue项目api相关代码的组织方式 看了下项目组同事的代码,发现不同项目有不同的组织版本 版本一: ├─apis │ a.api.js │ b.api.js │ b.api.js │ d.api.j ...

  3. 消息队列Rabbit安装

    先安装elang 再安装Rabbit *Rabbit安装路径不能有空格 安装完成

  4. Java 代理学习笔记

    http://blog.csdn.net/mr_seaturtle_/article/details/52686516

  5. 万众创业,互联网+,WTO

    WTO的保护期,发展的非常繁荣.但大部分的资源都配置在了房地产这个支柱产业, 而被保护的行业小日子过得不错, 研发再投入?那是傻子才做的事情,别墅.豪车.美女.这才是生活. 但突然有一天,发现保护期要 ...

  6. JAVA经常使用数据结构及原理分析

    前不久面试官让我说一下怎么理解java数据结构框架,之前也看过部分源代码,balabala讲了一堆,如今总结一下. java.util包中三个重要的接口及特点:List(列表).Set(保证集合中元素 ...

  7. Android 删除新版安卓fragment_main.xml

    在新版本号的ADT中,创建androidproject时默认会产生两个xml文件--fragment_main和activity_main. 个人建议把fragment_main这个文件删除掉 1)将 ...

  8. luogu1920 成功密码

    题目大意:给出x∈(0,1)以及n∈(0,1e18),求sum foreach i(1<=i<=n) (x^i/i)保留四位小数的值. 用快速幂暴力求.考虑到题目只要求保留四位小数,而随着 ...

  9. B1108 [POI2007]天然气管道Gaz 贪心

    啊啊啊,这题有毒.我想了各种花式数据结构,最后告诉我贪心???受不了... 题干: Description Mary试图控制成都的天然气市场.专家已经标示出了最好的天然气井和中转站在成都的地图.现在需 ...

  10. Tomcat容器的Session管理

    Session管理是JavaEE容器比较重要的一部分,在app中也经常会用到.在开发app时,我们只是获取一个session,然后向session中存取数据,然后再销毁session.那么如何产生se ...