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>
  • 相关阅读:
    CCF CSP 题解
    CCF CSP 2019032 二十四点
    CCF CSP 2018121 小明上学
    CCF CSP 2019092 小明种苹果(续)
    CCF CSP 2019091 小明种苹果
    CCF CSP 2019121 报数
    CCF CSP 2019031 小中大
    CCF CSP 2020061 线性分类器
    CCF CSP 2020062 稀疏向量
    利用国家气象局的webservice查询天气预报(转载)
  • 原文地址:https://www.cnblogs.com/wangshouchang/p/6640490.html
Copyright © 2011-2022 走看看