js的事件机制
解释:当我们的行为动作满足了一定的条件后,会触发某事务的执行。
内容:
1.单双击事件
  单击:onclick 当鼠标单击时候会触发
  双击:ondbclick 当鼠标双击时候会触发

2.鼠标事件
  onmouserover 当鼠标悬停在某个HTML元素上的时候触发
  onmousermove 当鼠标在某个HTML元素上移动的时候触发
  onmouseout 当鼠标在某个HTML元素上移除的时候触发
3.键盘事件
  onkeyup 当鼠标在某个HTML元素上弹起的时候触发
  onkeydown 当鼠标在某个HTML元素上下压的时候触发
4.焦点事件
  onfocus 当某个HTML元素获取焦点的时候触发
  onblur 当某个HTML元素失去焦点的时候触发
5.页面加载事件
  onload 当页面加载成功后
注意:
  js中添加事件的第一种方式:
  在HTML上直接使用事件操作进行添加,操作值为监听的函数。
  js中的事件只有在当前HTML元素中有效。
  一个HTML元素可以添加多个不同的事件。
  一个事件 可以触发多个函数的执行,但是不同的函数要使用分号隔开。

实现代码

<h3>js的单击事件机制</h3>
<hr />
<input type="button" id="" value="单击事件" onclick="testOnclick()"/>
<input type="button" id="" value="单击事件" onclick="testdbclick()"/>
<hr /><br />
<div id="showdiv" onmouseover="testOnmouseover();" onmousemove="testOnmousemove();"
onmouseout="testOnmouseout();">
</div>
<hr />
键盘事件学习:<br />
键盘弹起事件: <input type="text" name="" id="" value="" onkeyup="testOnkeyup();"/>
<br />
键盘下压事件: <input type="text" name="" id="" value="" onkeyup="testOnkeydown()"/>
<hr />
焦点事件学习:<hr />
获取焦点:
<input type="text" name="" id="" value="" onfocus="testOnfocus();"/>
失去焦点:
<input type="text" name="" id="" value="" onfocus="testOnblur()"/>

js的事件机制的更多相关文章

  1. js的事件机制二

    js的事件机制二 1.给合适的HTML标签添加合适的事件 onchange-----select下拉框 onload-----body标签 单双击-----用户会进行点击动作的HTML元素 鼠标事件 ...

  2. 一张图看懂 JS 的事件机制

    一.为什么 JavaScript 单线程 假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准? 为了避免复杂性, JS ...

  3. 我也来说说js的事件机制

    原文链接:http://www.w3cfuns.com/notes/17398/8062de2558ef495ce6cb7679f940ae5c.html 学js,不懂事件机制,基本可以说学了js,就 ...

  4. node.js 的事件机制

    昨天到今天, 又看了一边node 的事件模块,  觉得很神奇~  分享一下  - -> 首先, 补充下对node 的理解: nodeJs 是一个单进程单线程应用程序, 但是通过事件和回调支持并发 ...

  5. 初步理解JS的事件机制

    一.事件流(捕获,冒泡)   事件流:指从页面中接收事件的顺序,有冒泡流和捕获流. 当页面中发生某种事件(比如鼠标点击,鼠标滑过等)时,毫无疑问子元素和父元素都会接收到该事件,可具体顺序是怎样的呢?冒 ...

  6. js内部事件机制--单线程原理

    原文地址:https://www.xingkongbj.com/blog/js/event-loop.html http://www.haorooms.com/post/js_xiancheng ht ...

  7. node.js之事件机制

    EventEmitter类 方法名与参数 描述 参数说明 addListener(event,listener) 对指定的事件绑定事件处理函数 参数一是事件名称,参数二是事件处理函数 on(event ...

  8. JS之事件机制

    一.绑定事件的3种方式 1.内联绑定事件 2.on+事件名,绑定事件程序 3.通过addEventListener/removeEventListener绑定事件 不支持ie9之前的浏览器,ie9之前 ...

  9. JavaScript 详说事件机制之冒泡、捕获、传播、委托

    DOM事件流(event  flow )存在三个阶段:事件捕获阶段.处于目标阶段.事件冒泡阶段. 事件捕获(event  capturing):通俗的理解就是,当鼠标点击或者触发dom事件时,浏览器会 ...

随机推荐

  1. 架构之路:nginx与IIS服务器搭建集群实现负载均衡

    http://blog.csdn.net/zhanghan18333611647/article/details/50811980

  2. spring4-2-bean配置-4-bean之间的关系

  3. 安装运行okvis odometry

    源码链接https://github.com/ethz-asl/okvis 1. 安装依赖项 sudo apt-get install cmake sudo apt-get install libgo ...

  4. pcl知识

    1.pcl/io/pcd_io.h pcl/io/ply_io.h pcl::PLYReader reader; pcl::PCDWriter pcdwriter; 读取ply pcd 2.voidl ...

  5. Hadoop权威指南文摘

    第1章 初识Hadoop 1.1 数据!数据! 1.2 数据的存储与分析 HDFS实现数据的存储,MapReduce实现数据额分析与处理 1.3 相较于其他系统的优势 MapReduce是一个批量查询 ...

  6. RMAN备份(转)

    原文:http://blog.csdn.net/leshami/article/details/6032739 一.数据库备份与RMAN备份的概念 1.数据库完全备份:按归档模式分为归档和非归档 归档 ...

  7. CSS 实现等高布局以及多行文本垂直居中

    将display属性设置为table-cell,具有table的特点. 1.同行等高. 2.宽度自动调节. 相当于表格是td, <style type="text/css"& ...

  8. 解决NIOS II工程移动在磁盘上位置后project无法编译问题

    说明:本文档于2017年3月4日由小梅哥更新部分内容,主要是增加了讲解以Quartus II13.0为代表的经典版本和以15.1为代表的更新版本之间,解决问题的一些小的差异. 如果用户只是想快速解决问 ...

  9. crontab基本操作部分

    一.cron服务 cron是一个linux下 的定时执行工具,可以在无需人工干预的情况下运行作业. service crond start    //启动服务 service crond stop  ...

  10. 了解entity framework其他query方式之Entity SQL,Raw Sql分析

    一:linq 对ef来说不是唯一性的query... 二:Entity Sql 1. esql => entity sql... [类sql的语言] 和sql差不多,但是呢,不是sql... u ...