事件:当程序观测到某一件事发生,或某一个状态改变,那么这时候就说,有一个事件发生了. 事件处理器:当事件发生时,事件处理器能够接收到事件发生的这个消息,可以在处理器中做各种各样的事情. 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对象中就含有该事件发生时的信息. 为了写出的js代码能更好的兼容不同的浏览器,下面是两种不同的处理事件的方式.
当时间触发时,会自动把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对象中是否有该属性.
