zoukankan      html  css  js  c++  java
  • JavaScript中的事件

    首先明确的是JavaScript的事件驱动的

    JavaScript是基于对象的语言,而java是面向对象的语言

    基于对象的基本特征就是采用事件的驱动

    鼠标和基本的热键的动作我们称作是事件,由鼠标和热键引发的一连串程序的动作,称之为事件驱动。

    对事件处理的程序或者函数,我们称为事件处理程序

    有哪些事件处理程序


    常用的事件

    • onclick 单击
    • ondblclick 双击
    • onfocus 元素获得焦点
    • onblur 元素失去焦点

    • onmouseover 鼠标移到某元素之上
    • onmouseout 鼠标从某元素移开

    • onmousedown 鼠标按钮被按下
    • onmouseup 鼠标按键被松开

    • onkeydown 某个键盘按键被按下
    • onkeyup 某个键盘按键被松开
    • onkeypress 某个键盘按键被按下并松开

      下面用一个例子来说明基本的事件处理程序

      onmouseover 和 onmouseout 事件可用于在鼠标移至 HTML 元素上和移出元素时触发函数

    <html>
    <head></head>
    
    <body>
    <div style="background-color:green;200px;height:50px;margin:20px;padding-top:10px;color:#ffffff;font-weight:bold;font-size:18px;text-align:center;"
    
    onmouseover="this.innerHTML='good'"
    
    onmouseout="this.innerHTML='you have moved out'"
    
    >move your mouse to here</div>
    </body>
    
    </html>

    下面是另外一个 事件处理程序的实例

    onmousedown, onmouseup 是鼠标 压下 和 松开 的事件。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件。举例说明:

    <html>
    <head>
      <script>
    
        function mDown(obj)    // 按下鼠标 的 事件处理程序
        {
        obj.style.backgroundColor="#1ec5e5";
        obj.innerHTML="release your mouse"
        }
    
        function mUp(obj)     // 松开鼠标 的 事件处理程序
        {
        obj.style.backgroundColor="green";
        obj.innerHTML="press here"
        }
    
      </script>
    </head>
    
    <body>
    <div style="background-color:green;200px;height:35px;margin:20px;padding-top:20px;color:rgb(255,255,255);font-weight:bold;font-size:18px;text-align:center;"
    
    onmousedown="mDown(this)"
    
    onmouseup="mUp(this)"
    
    >press here</div>
    </body>
    
    </html>
  • 相关阅读:
    sky A800s手机恢复出厂设置操作
    SlimDx绘制点图元的问题
    自定义Token的CAS登录
    未来谁才是移动互联网的入口?
    [Oracle]Sqlplus连接成功,但pl/sql连接不成功,提示“ora-12145:无法解析指定的连接标识符”
    memcached分布式内存系统
    Android下结束进程的方法
    博客搬家啦~
    NOIp2013火柴排队
    NOIp2014 T2联合权值
  • 原文地址:https://www.cnblogs.com/wangshouchang/p/6640490.html
Copyright © 2011-2022 走看看