zoukankan      html  css  js  c++  java
  • JS 03事件

     1 <script type="text/javascript">
     2 
     3     function getUserInput() {
     4         //获取用户输入的内容
     5         var val = document.getElementById("userinput").value
     6         //根据用户输入的内容播放相应的动画
     7         playAnimate(val);
     8     }
     9  function playAnimate(str){
    10      if(str=="黑洞"){
    11          alert("播放反转的动画")
    12      }else if(str=="反转"){
    13          alert("播放反转动画");
    14      }
    15  }
    16 </script>
    17 <body>
    18 <input id="userinput" type="text"/>
    19 <input type="button" value="百度一下" onclick="getUserInput();">
    20 
    21 </body>

    onclick单机事件

     1  //一个事件可以触发多个函数
     2               function test1() {
     3  //单击事件onclick:常用html标签是button标签、a标签、img标签
     4             alert('nihao')
     5                 }
     6         function test2() {
     7             alert("世界");
     8                 }

    9 <button type="button" onclick="test();">点我测试</button> 10 <a href="javascript:void(0);" onclick="test1();test2();">点我测试2</a>

     ondblick双击事件

    1     //一个html元素可以绑定多个事件
    2         function testDouble() {
    3             //双击事件ondblclick:常用html标签是button标签、a标签、img标签
    4             alert("我被双击了!")
    5         }
    6 <input type="button" value="点我测试双击" ondblclick="testDouble()">
    7 <button type="button" ondblclick="testDouble();">点我测试双击</button>

    onfocus成为焦点,onblur失去焦点

        function testFocus() {
         //获取焦点事件onfocus:常用的HTML标签有<input type="text">
                console.log("万众瞩目");
            }
      function testOnblur(){
         //丢失焦点事件onblur: 常用的html标签有<input type="text">
            console.log("无人问津")
        }
    <input type="text" onfocus="testFocus();" onblur="testOnblur()"/>

    onchange选中对象的值发生变化

           function testOnchange() {
                //html的value发生变化的事件:常用html标签有select
                  console.log("用户重新选择了城市")
              }
        <select onchange="testOnchange()">
            <option value="1">广州</option>
            <option value="2">上海</option>
            <option value="3">北京</option>
        </select>
    <input type="text" onchange="testOnchange()"/>

    onload页面装载

    function testOnload() {
        //页面加载事件:常用的html标签是body
        console.log("页面加载...")
    }
    <body onload="testOnload()">

    onmousemove鼠标移动

    <style type="text/css">
        #myDiv {
             300px;
            height: 500px;
            border: 1px solid grey;
            background-image: url("timg.jpg");
        }
    </style>
    <script type="text/javascript">
        function fj(eve) {
            var e = window.event || eve;
            var x = e.pageX || e.x;
            var y = e.pageY || e.y;
            console.log(x + "--" + y);
        }
    </script>
    <div id='myDiv' onmousemove="fj(event);">  </div>

    onmouseeout 出去

    onmousewheel滑动滚轮

    onkeydown按键盘

    关注博客 https://www.cnblogs.com/aknife/
  • 相关阅读:
    五秒原则,做一件事之前数 5 秒,1,2,3,4,5 立马去做。比如睡觉:数五秒,立马放下手机,闭眼。
    Perl 安装 JSON 包
    Perl: hash散列转换为Json报错集, perl.c,v $$Revision: 4.0.1.8 $$Date: 1993/02/05 19:39:30 $
    叫法: 表名 表字段名 定义每个表字段
    失误1: 把i放到循环体内部,i++失效
    沈南鹏@《遇见大咖》: A轮没投,投了8个月以后就证明了张一鸣是对了,在美国都没有张一鸣这种模式
    xshell通过xftp传输Windows文件到Linux:在输入put后,再摁 TAB 键,可显示当前文件夹的文件
    LeetCode84 Largest Rectangle in Histogram
    全排列问题及其引申问题
    LeetCode Weekly Contest 8
  • 原文地址:https://www.cnblogs.com/aknife/p/10805141.html
Copyright © 2011-2022 走看看