除了加载文档的事件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. 2.3 SVN在myeclipse中的使用

    一.将svn插件文件夹复制到myeclipse的dropins目录下,并重启myeclipse 二.从SVN中检查项目到myeclipse  2.打开myeclipse,点击window的show v ...

  2. HDU 1704 Rank

    Rank Time Limit: 1000ms Memory Limit: 32768KB This problem will be judged on HDU. Original ID: 17046 ...

  3. elasticsearch Suggester实现搜索建议(八)

    Completion Suggester 智能提示 { "settings": { }, "mappings": { "doc": { &q ...

  4. 0804关于mysql 索引自动优化机制: 索引选择性(Cardinality:索引基数)

    转自http://blog.csdn.net/zheng0518/article/details/50561761 1.两个同样结构的语句一个没有用到索引的问题: 查1到20号的就不用索引,查1到5号 ...

  5. ExtJs之ExtJs.Model验证

    没有搞好,但知道意思和配置,并且好像4和3的没有兼容性语法,所以网上找了新语法才出来了点东东. <!DOCTYPE html> <html> <head> < ...

  6. Tarjan算法各种&RMQ& POJ 3694

    关于tarjan 的思想可以在网上搜到,具体我也不太清楚,应该说自己理解也不深,下面是做题经验得到的一些模板. 其中有很多转载,包括BYVoid等,感谢让我转...望各路大神愿谅 有向图求连通分量的一 ...

  7. swing Jlable中存放变量显示问题

    java swing 学习 在做一个ATM机系统小案例中.碰到JLable中存放变量,变量发生改变.而JLable中还是显示原来的值,网上寻找答案,用updateUI()和revalidate();方 ...

  8. Codeforces Round #377 (Div. 2) D. Exams

    Codeforces Round #377 (Div. 2) D. Exams    题意:给你n个考试科目编号1~n以及他们所需要的复习时间ai;(复习时间不一定要连续的,可以分开,只要复习够ai天 ...

  9. Odoo(OpenERP)开发实践:数据模型学习

    作者:苏州-微尘 Odoo中,在Python类里定义的模型及字段信息,可在系统中直接查看.为用户开启技术特性权限后,就可以通过菜单 [设置->技术->数据结构->模型] 进入列表视图 ...

  10. 【五】注入框架RoboGuice使用:(Your First POJO Injection)

    上一篇我们简单的介绍了一下RoboGuice的使用([四]注入框架RoboGuice使用:(Your First System Service Injection)),今天我们来看下普通Java对象的 ...