除了加载文档的事件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. BABEL转码解惑

    众所周知,解决Nodejs异步问题的终极方案就是使用async/await方案,但是每次在项目中配置都会或多或少有些问题,每次都会被几个组件 babel-core babel-polyfill bab ...

  2. Game with a Strip

    Game with a Strip Time limit: 2.0 secondMemory limit: 64 MB There is a strip 1 × n with two sides. E ...

  3. Spring Cloud Stream(十三)

    说明 对Spring Boot 和 Spring Integration的整合,通过Spring Cloud Stream能够简化消息中间件使用的复杂难度!让业务人员更多的精力能够花在业务层面 简单例 ...

  4. 洛谷 P1903 BZOJ 2120 清橙 A1274【模板】分块/带修改莫队(数颜色)(周奕超)

    试题来源 2011中国国家集训队命题答辩 题目描述 墨墨购买了一套N支彩色画笔(其中有些颜色可能相同),摆成一排,你需要回答墨墨的提问.墨墨会像你发布如下指令: 1. Q L R代表询问你从第L支画笔 ...

  5. J - Assign the task

    J - Assign the task HDU - 3974 思路:一眼秒思路<(* ̄▽ ̄*)/ dfs序+线段树. 通过dfs序把树上问题转化成线段上的问题.然后用线段树解决.    错因:都 ...

  6. POJ 2914

    无向图全局最小割算法 求 G=(V, E)中任意 s-t 最小割的算法: 定义w(A, x) = ∑w(v[i], x),v[i]  A ∈  定义 Ax 为在x 前加入 A 的所有点的集合(不包括 ...

  7. 使用Html5和Js进行拖动

    function init() {             var source = document.getElementById("dragme");             ...

  8. BZOJ 3514 Codechef MARCH14 GERALD07加强版 Link-Cut-Tree+划分树

    题目大意: 给定n个点m条边的无向图.求问当图中仅仅有[编号在[l,r]区间内]的边存在时图中的联通块个数 强制在线 注意联通块是指联通了就是同一块,不是Tarjan求的那种块 看到这题的那一刻我就想 ...

  9. 为Android开发人员定制的搜索引擎

    我在谷歌上定制了一个专门针对Android开发人员的搜索引擎.载入慢的童鞋考虑FanQiang吧,作为技术人员使用Google才是王道. 在此推荐给大家:cx=01590883735180208228 ...

  10. 【JavaScript】——JS入门

    结束XML之旅,開始JavaScript的学习,看视频.了解了她的前世今生,还是为她捏了把汗啊! 看了部分视 频了,简单的总结一下吧! JavaScript是什么? JavaScript是一种基于面向 ...