JavaScript入门指南---（八）、响应事件

来源：互联网发布：cassandra数据库下载编辑：程序博客网时间：2024/05/24 02:07

一,什么是事件

事件:当程序观测到某一件事发生,或某一个状态改变,那么这时候就说,有一个事件发生了.
事件处理器:当事件发生时,事件处理器能够接收到事件发生的这个消息,可以在处理器中做各种各样的事情.
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>

3 0