JavaScript入门指南---(八)、响应事件
2017-03-24 16:57
357 查看
一,什么是事件
事件:当程序观测到某一件事发生,或某一个状态改变,那么这时候就说,有一个事件发生了.事件处理器:当事件发生时,事件处理器能够接收到事件发生的这个消息,可以在处理器中做各种各样的事情.
onclick,mouseover.mouseout,onload等都是事件处理器.
事件处理器 | 相应的事件 |
---|---|
onBlur | 用户离开了字段 |
onChange | 用户修改了值,正要离开 |
onClick | 用户点击 |
onDblClick | 用户双击了鼠标 |
onFocus | 用户进入字段(点击它或跳转它) |
onKeydown | 当元素激活时,一个按键被按下 |
onKeyup | 当元素激活时,一个按键被释放 |
onKeypress | 当元素激活时,一个按键被按下,然后被释放 |
onLoad | 对象加载完毕 |
onMousedown | 鼠标按钮在一个对象上被按下 |
onMouseup | 鼠标按钮被释放 |
onMouseover | 鼠标移动到了对象上 |
onMousemove | 鼠标在对象上方移动 |
onMouseout | 鼠标离开对象 |
onReset | 用户充值了表单 |
onSelect | 用户选择了对象的一些内容 |
onSubmit | 用户提交表单 |
onUnload | 用户关闭浏览器窗口 |
添加事件处理器
添加内联事件处理器<input type="button" name="button1" value="button1" onclick="alert(我是内联事件处理器)">
注:这种写法不推荐,因为这样写,js与html耦合度太高,下面的写法会更好些
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>事件处理器示例</title> <script type="text/javascript"> function onButtonClick(){ alert("u clicked a button"); } </script> </head> <body> <input type="button" name="button1" id="myButton" value="点我点我" /> <!-- 将script代码写在这里而没有些在head标签中,是因为head会先加载 当head加载时,执行document.getElementById("myButton")方法是找不到myButton的 因为body标签还没有加载 --> <script type="text/javascript"> document.getElementById("myButton").onclick = function() { alert("这是通过js设置的监听事件喔"); } //也可以这么写 //不过要注意后面只是一个方法名,不带圆括号 document.getElementById("myButton").onclick = onButtonClick; </script> </body> </html>
删除事件处理器
将onclick属性赋值null即可.document.getElementById("xx").onclick = null;
二,更改标签的默认操作
一般情况下,特定HTML元素的时间处理器是在元素默认操作之前执行的.示例:实际会跳转到新浪
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>修改默认操作</title> </head> <body> <a href="http://www.baidu.com" id="toBaidu">百度</a> <script type="text/javascript"> document.getElementById("toBaidu").onclick = function(){ this.href = "http://www.sina.com"; } </script> </body> </html>
禁止默认操作
如果将标签onclick的方法的返回值修改成false,那么该标签的默认操作将不会执行.<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>修改默认操作</title> </head> <body> <a href="http://www.baidu.com" id="toBaidu">百度</a> <script type="text/javascript"> document.getElementById("toBaidu").onclick = function(){ this.href = "http://www.sina.com"; //下面的返回false加上后,a标签的超链接点击跳转特性就不会再执行了 return false; } </script> </body> </html>
三,event对象
event对象中封装了事件对象,它是由浏览器自动生成的.当一个事件发生时,就会产生一个对象的event对象,event对象中就含有该事件发生时的信息.为了写出的js代码能更好的兼容不同的浏览器,下面是两种不同的处理事件的方式.
W3C方式
当时间触发时,会自动把event对象作为参数传递给事件处理器,所以我们可以给事件处理器加一个参数,来接收这个event对象.var mElement = document.getElementById("xx"); mElement.onclick = function(e){ <!-- TODO: 可以在这里使用e这个对象,这个e就是event对象 --> }
微软方式
微软的方式,是给window对象设计了一个event属性,它包含最近一次被触发事件的细节.var mElement = document.getElementById("xx"); mElement.onclick = function(e){ <!-- TODO: 使用window的event对象 --> alert(window.event.type); <!-- 这里还在参数列表中设置一个参数e,是为了判断e是否存在,如果e不存在,则说明是微软方式,否则是W3C方式. --> }
尴尬的是
微软方式和W3C方式中event对象包含的属性还不同,所以在使用某一个属性之前,还应该先判断一下event对象中是否有该属性.列出onclick事件的属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>点击事件中属性示例</title> <script type="text/javascript"> function gogo() { window.document.getElementById("showBtn").onclick = function(e) { var showResult = ""; if(!e) { alert("e is false"); e = window.event; } for(i in e) { showResult += i + ":" + e[i] + "<br />"; } window.document.getElementById("showPropertyDic").innerHTML = showResult; } } window.onload = gogo; </script> </head> <body> <input type="button" id="showBtn" value="查看event对象的属性" /> <div id="showPropertyDic"></div> </body> </html>
相关文章推荐
- Javascript学习指南(第2版)笔记(四) 表单、表单事件及校验
- javascript 中响应鼠标和键盘事件
- V8 JavaScript Engine 入门指南 3 -- 一个简单的V8应用
- 关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
- 一个javascript小技巧:在webForm中接收回车后激发一个按钮的服务器端响应事件
- V8 JavaScript Engine 入门指南 4 -- 基本概念
- V8 JavaScript Engine 入门指南 1 -- 编译V8
- javascript中用Jquery注册button的click事件不能响应
- V8 JavaScript Engine 入门指南 4.1 -- 基本概念(Handle,Scope,Context)
- Javascript学习笔记13——关于响应事件
- [转]一个javascript小技巧:在webForm中接收回车后激发一个按钮的服务器端响应事件
- JavaScript学习(4)事件响应
- JavaScript入门教程(11) js事件处理
- Java版SLG游戏开发入门[0]--让绘制的窗口响应鼠标事件
- JavaScript之响应按钮点击事件
- Javascript学习指南(第2版)笔记(三) 排错、调试、事件捕获
- ASP.NET页面中用javascript响应文本框的回车事件
- 关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
- 取消按回車后就响应Button事件的JavaScript