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

onmouseeout 出去

onmousewheel滑动滚轮

onkeydown按键盘

JS 03事件的更多相关文章

  1. 探讨Js的事件的冒泡阶段

    近来看到了一个新的知识点叫Js的事件冒泡,因此决定自己来研究一番. 大家应该都知道,Js中的事件处理分为三个阶段,1:事件的捕获阶段,2:处于目标阶段,3:事件的冒泡阶段.那么什么是事件的捕获和冒泡呢 ...

  2. 浅谈js的事件冒泡机制

    很多人都听说过,js的事件冒泡机制,其实,这个说法还是比较生动形象的,就是一个水泡在水底下,冒泡到水面的过程. 那js的事件冒泡机制呢,就是一个DOM树,一级一级向上冒的过程,最终是到document ...

  3. js键盘事件全面控制详解

      js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件 ...

  4. Js 冒泡事件阻止

    Js 冒泡事件阻止   1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览 ...

  5. js event 事件兼容浏览器 ie不需要 event参数 firefox 需要

    js event 事件兼容浏览器    ie不需要 event参数   firefox 需要 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

  6. JS通用事件监听函数

    JS通用事件监听函数 版本一 //把它全部封装到一个对象中 var obj={ readyEvent:function (fn){ if(fn==null){ fn=document; } var o ...

  7. js键盘事件全面控制

    js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...

  8. js键盘事件全面控制详解【转】

    js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...

  9. js 鼠标事件的抓取代码

    js 鼠标事件的抓取代码,分享给大家. 1.通过ele.setCapture();设置鼠标事件的抓取. 2,应用可以通过单.双击文字来获取时间. <html> <head> & ...

随机推荐

  1. javasript模块化

    模块概述 随着一个网站越来越大,html页面文件越来越多,由<script src='xxx.js'></script>引入的js文件越来越多,我们的单个js文件很大,上几万行 ...

  2. arcgis python 不知道一个工具怎么用

    完整的工具帮助信息 import arcpy print(arcpy.Usage("Buffer_analysis")) print(arcpy.Usage("MakeF ...

  3. arcgis python 参数类型和含义

    数据类型 datatype 关键字 描述 地址定位器 DEAddressLocator 用于地理编码的数据集,存储地址属性.关联的索引以及用于定义将地点的非空间描述转换为空间数据这一过程的规则. 地址 ...

  4. 002-创建型-03-单例模式（Singleton）【7种】、spring单例及原理

    一.概述 保证一个类仅有一个实例,并提供一个全局访问点 私有构造器.线程安全.延迟加载.序列化和反序列化安全.反射攻击 1.1.适用场景 1.在多个线程之间,比如servlet环境,共享同一个资源或者 ...

  5. spark "main" java.lang.ArrayIndexOutOfBoundsException: 10582

    升级 你的 paranamer 到2.8 ,这是由于你的jdk版本1.8导致 <!-- https://mvnrepository.com/artifact/com.thoughtworks.p ...

  6. 使用Tomcat搭建基于域名的虚拟机

    Tomcat搭建基于域名的虚拟主机,实际就是实现了同一个Tomcat部署多个项目(网站/应用程序).端口可以使用同一个,也可以不同. (1).在tomcat的conf文件夹下存在Tomcat的配置文件 ...

  7. spark osx：WARN NativeCodeLoader:62 - Unable to load native-hadoop library for your platform

    spark-env.sh文件中增加,确保${HADOOP_HOME}/lib/native目录下有libhadoop.so文件 export JAVA_LIBRARY_PATH=${HADOOP_HO ...

  8. NodeJs本地搭建服务器，模拟接口请求，获取json数据

    最近在学习Node.js,虽然就感觉学了点皮毛,感觉这个语言还不错,并且也会一步步慢慢的学着的,这里实现下NodeJs本地搭建服务器,模拟接口请求,获取json数据. 具体的使用我就不写了,这个博客写 ...

  9. Python3之返回函数

    参考:https://www.cnblogs.com/mzc1997/p/7641995.html Python中函数不仅可以作为参数还可以作为结果返回 >>> def pro1(c ...

  10. 01.轮播图之二 ：tableView 轮播

    在做这个tablevew轮播的时候,重要的就是修改frame 和view 的翻转了:::: 也是不难的,概要的设计和scroll 轮播是一致的: 首先是 .h 的文件 @interface Table ...