JS 03事件

2019-05-04 09:40:19来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

 

 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 {
        width: 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/p/10805141.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:JS 02 函数

下一篇:JS 04 Date_Math_String_Object