JS 03事件

 <script type="text/javascript">

     function getUserInput() {

         //获取用户输入的内容

         var val = document.getElementById("userinput").value

         //根据用户输入的内容播放相应的动画

         playAnimate(val);

     }

  function playAnimate(str){

      if(str=="黑洞"){

          alert("播放反转的动画")

      }else if(str=="反转"){

          alert("播放反转动画");

      }

  }

 </script>

 <body>

 <input id="userinput" type="text"/>

 <input type="button" value="百度一下" onclick="getUserInput();">

 </body>

onclick单机事件

  //一个事件可以触发多个函数

               function test1() {

  //单击事件onclick：常用html标签是button标签、a标签、img标签

             alert('nihao')

                 }

         function test2() {

             alert("世界");

                 }

 <button type="button" onclick="test();">点我测试</button>

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

ondblick双击事件

     //一个html元素可以绑定多个事件

         function testDouble() {

             //双击事件ondblclick：常用html标签是button标签、a标签、img标签

             alert("我被双击了！")

         }

 <input type="button" value="点我测试双击" ondblclick="testDouble()">

 <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>

巴特西

JS 03事件

onclick单机事件

ondblick双击事件

onfocus成为焦点，onblur失去焦点

onchange选中对象的值发生变化

onload页面装载

onmousemove鼠标移动

onmouseeout 出去

onmousewheel滑动滚轮

onkeydown按键盘

最新文章

热门文章