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. jquery入门 动态调整div大小,使其宽度始终为浏览器宽度

    有时候我们需要设置宽度为整个浏览器宽度的div,当然我们可以使用相对布局的方式做到这一点,不过我们也可以用jquery来实现. <!doctype html> <html> & ...

  2. 14-python登入教务网(python+bs4)

    用request先得到到session对象,用其去放送请求,会自动保存cookie. 模拟有验证码的登入步骤: 1.发送请求登入页面: 2.分析验证码的地址,以及要将登入请求发往的地址(可以先输入错的 ...

  3. Redis学习(2)—— 实例与注释说明[转]

    import java.util.HashMap; import java.util.List; import java.util.Map; import java.util.Set; import ...

  4. 怎样下载网页中的js文件?

    1.按下F12,会看到调试的界面,如下图所示,先点击最上面的Resources选项,Frames--(你想下载的网址)--Script,下面就是全部的js文件啦,网站的图片啊什么的都可以下载了.

  5. array_column()

    array_column($arr,value) 返回输入数组中某个单一列的值. array_column($arr,value,key) 返回输入数组中某个单一列的值,value是值,key是键.

  6. vi/vim 消除搜索后的关键字高亮

    使用vi或vim命令搜索某个关键字之后,取消高亮显示的方法 只要输入:noh即可

  7. 实践作业3:白盒测试----总结与反思DAY12.

    ---恢复内容开始--- 阶段一:熟悉白盒测试方法 负责人:刘思佳 工作质量评价:用例设计详细,考虑到白盒测试基于代码,所以尽可能地覆盖更多的白盒测试方法,对系统可能存在的缺陷就更容易了解.对管理员和 ...

  8. C# 集合的使用List<T>的使用

    C# List<T>用法 所属命名空间:using System.Collections.Generic; List<T>类是  ArrayList 类的泛型等效类. 该类使用 ...

  9. 39 编写一个函数,输入n为偶数时,调用函数求1/2+1/4+...+1/n,当输入n为奇数时,调用函数1/1+1/3+...+1/n(利用指针函数)

    题目:编写一个函数,输入n为偶数时,调用函数求1/2+1/4+...+1/n,当输入n为奇数时,调用函数1/1+1/3+...+1/n(利用指针函数) public class _039PrintFu ...

  10. canvas学习日记一

    由于工作的需求,促进我学习html5 canvas技术,canvas是html5最强大的元素之一.使用它可以在浏览器中做一番奇妙的事情.大家或多或少都听过canvas的强大用处,我这里就不再赘述了. ...