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

最新推荐文章于 2023-06-26 20:10:15 发布

george_zyf

最新推荐文章于 2023-06-26 20:10:15 发布

阅读量487

点赞数 3

分类专栏： H5+CSS+JS 文章标签： javascript 处理器 js事件

本文链接：https://blog.csdn.net/android_zyf/article/details/65633354

版权

H5+CSS+JS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一,什么是事件

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

george_zyf

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
JavaScript入门指南---（八）、响应事件

一,什么是事件事件:当程序观测到某一件事发生,或某一个状态改变,那么这时候就说,有一个事件发生了. 事件处理器:当事件发生时,事件处理器能够接收到事件发生的这个消息,可以在处理器中做各种各样的事情. onclick,mouseover.mouseout,onload等都是事件处理器. 事件处理器相应的事件 onBlur 用户离开了字段 onChange 用户修改了
复制链接

扫一扫