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. 为什么要用Android Studio?

    为什么要用Android Studio 本书节选自<Android Studio实用指南> 作者: 毕小朋 目前本书已上传到百度阅读,在百度中搜索[Anroid Studio实用指南]便可 ...

  2. Maven面试宝典啊

    一.Maven有哪些优点和缺点 优点如下: 简化了项目构建.依赖管理: 易于上手,对于新手可能一个"mvn clean package"命令就可能满足他的工作 便于与持续集成工具( ...

  3. Openssl speed命令

    一.简介 speed命令用于测试库的性能 二.语法 openssl speed [md2] [mdc2] [md5] [hmac] [sha1] [sha256] [sha512] [whirlpoo ...

  4. 创建一个实例&创建一个线程。。

    using System; using System.Threading; namespace WorkerThread02 { class ThreadTest { bool done; stati ...

  5. 原型设计工具Mockplus新年送福利,见者有份

    为感谢大家对Mockplus的喜爱与支持,给大家送福利了! 送送送,见者有份! 参与活动,三分钟时间,均可最高获赠专业版1个月使用时间.见者有份! 领福利步骤: 1. 扫码关注微信公众号:Mockpl ...

  6. nginx在windows平台下的使用笔记

    nginx主要提供反向代理及负载均衡的能力,重定向报文代理及报文数据替换也是常用功能.(参考https://www.cnblogs.com/fanzhidongyzby/p/5194895.html) ...

  7. ORACLE B-TREE(B树)索引

    内容简介: 1.普通B-TREE 索引; 2.唯一B-TREE 索引; 3.复合索引; ORACLE 默认的索引类型为B-TREE 索引,表中的行标识符(ROWID)和行相关的列值被存储在一个平衡树的 ...

  8. Node.js基本使用(超基础)

    Node.js是什么 Node.js是一个能够在服务器端运行JavaScript的开放源代码.跨平台JavaScript运行环境 Node采用Google开发的V8引擎运行js代码,使用事件驱动.非阻 ...

  9. javascript的caller,callee,call,apply[转]

    在提到上述的概念之前,首先想说说javascript中函数的隐含参数:arguments Arguments 该对象代表正在执行的函数和调用它的函数的参数. [function.]arguments[ ...

  10. 分布式缓存系统Memcached简介与以及在.net下的实践(转)

    缘起: 在数据驱动的web开发中,经常要重复从数据库中取出相同的数据,这种重复极大的增加了数据库负载.缓存是解决这个问题的好办法.但是ASP.NET中的虽然已经可以实现对页面局部进行缓存,但还是不够灵 ...