<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. LeetCode31 Next Permutation and LeetCode60 Permutation Sequence

    Implement next permutation, which rearranges numbers into the lexicographically next greater permuta ...

  2. 3.linux 别名 查找 压缩与解压缩

    1.别名     alias  别名=‘定义命令内容’     alias grep=‘grep --color’       vim  ~/.bashrc     关掉终端再开一次!!!!才能生效 ...

  3. equal numbers

    给你一个n长度的数组,让你修改0到n次,问每次修改后能剩下不同个数的最小数是多少: 这里有了两种做法,一种是变成他们的lcm这样的话,修改后答案应该是减去改过的个数然后在加一 另一种就是数字修改成序列 ...

  4. PHP中定义常量的区别,define() 与 const

      正文 在PHP5.3中,有两种方法可以定义常量: 使用const关键字 使用define()方法 const FOO = 'BAR'; define('FOO','BAR'); 这两种方式的根本区 ...

  5. es6对象复制合并 Object.assign

    对象的复制 var obj= { a: 1 }; var copy = Object.assign({}, obj); console.log(copy); //{ a: 1 } 对象的合并和封装 v ...

  6. Function mysql_db_query() is deprecated 错误解决

    方法一:@ 在任何错误语句之前加上@符号,即可屏蔽! 方法二:error_reporting 在PHP文件第一行加上:error_reporting(0); 即可屏蔽! 方法三:display_err ...

  7. 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_10-SpringSecurityOauth2研究-校验令牌&刷新令牌

    3.5校验令牌 Spring Security Oauth2提供校验令牌的端点,如下: Get: http://localhost:40400/auth/oauth/check_token?token ...

  8. python命令行参数解析OptionParser类用法实例

    python命令行参数解析OptionParser类用法实例 本文实例讲述了python命令行参数解析OptionParser类的用法,分享给大家供大家参考. 具体代码如下:     from opt ...

  9. (八)Centos之文件搜索命令locate

    一.文件搜索命令locate locate优点是 搜索速度快 ,缺点是只能按文件名搜索: 1.1 新建一个文件   1.2 更新数据库 locate命令搜索的是 /var/lib/mlocate 下的 ...

  10. springboot-mybatis-pagehelper(分页插件)

    依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://m ...