js的事件机制
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的事件机制的更多相关文章
- js的事件机制二
js的事件机制二 1.给合适的HTML标签添加合适的事件 onchange-----select下拉框 onload-----body标签 单双击-----用户会进行点击动作的HTML元素 鼠标事件 ...
- 一张图看懂 JS 的事件机制
一.为什么 JavaScript 单线程 假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准? 为了避免复杂性, JS ...
- 我也来说说js的事件机制
原文链接:http://www.w3cfuns.com/notes/17398/8062de2558ef495ce6cb7679f940ae5c.html 学js,不懂事件机制,基本可以说学了js,就 ...
- node.js 的事件机制
昨天到今天, 又看了一边node 的事件模块, 觉得很神奇~ 分享一下 - -> 首先, 补充下对node 的理解: nodeJs 是一个单进程单线程应用程序, 但是通过事件和回调支持并发 ...
- 初步理解JS的事件机制
一.事件流(捕获,冒泡) 事件流:指从页面中接收事件的顺序,有冒泡流和捕获流. 当页面中发生某种事件(比如鼠标点击,鼠标滑过等)时,毫无疑问子元素和父元素都会接收到该事件,可具体顺序是怎样的呢?冒 ...
- js内部事件机制--单线程原理
原文地址:https://www.xingkongbj.com/blog/js/event-loop.html http://www.haorooms.com/post/js_xiancheng ht ...
- node.js之事件机制
EventEmitter类 方法名与参数 描述 参数说明 addListener(event,listener) 对指定的事件绑定事件处理函数 参数一是事件名称,参数二是事件处理函数 on(event ...
- JS之事件机制
一.绑定事件的3种方式 1.内联绑定事件 2.on+事件名,绑定事件程序 3.通过addEventListener/removeEventListener绑定事件 不支持ie9之前的浏览器,ie9之前 ...
- JavaScript 详说事件机制之冒泡、捕获、传播、委托
DOM事件流(event flow )存在三个阶段:事件捕获阶段.处于目标阶段.事件冒泡阶段. 事件捕获(event capturing):通俗的理解就是,当鼠标点击或者触发dom事件时,浏览器会 ...
随机推荐
- HQL多表查询
------------------siwuxie095 HQL 多表查询 以客户和联系人为例(一对多) 1.内连接 (1)hql 语句写法 from Customer c inner join c. ...
- python解析pcap文件中的http数据包
使用scapy.scapy_http就可以方便的对pcap包中的http数据包进行解析 scapy_http可以在https://github.com/invernizzi/scapy-http下载, ...
- Log4J的配置文件详解
来自: http://www.blogjava.net/zJun/archive/2006/06/28/55511.html Log4J的配置文件(Configuration File)就是用来设置记 ...
- 714. Best Time to Buy and Sell Stock with Transaction Fee有交易费的买卖股票
[抄题]: Your are given an array of integers prices, for which the i-th element is the price of a given ...
- SqlServer垂直分表 如何减少程序改动
当单表数据太多时,我们可以水平划分,参考 SqlServer 分区视图实现水平分表 ,水平划分可以提高表的一些性能. 而 垂直分表 则相对很少见到和用到,因为这可能是数据库设计上的问题了.如果数据库中 ...
- python学习——查找计算机中文件位置
有时想查找某个文件时,却忘记了文件在计算机中存放的位置,这是一个经常遇到的问题. 当然如果你使用windows 7的话,可以直接用右上角的搜索框来搜索. 最近在学习python,正好拿这个来练练手,写 ...
- [C++] the pointer array & the array's pointer
int *p[4]------p是一个指针数组,每一个指向一个int型的int (*q)[4]---------q是一个指针,指向int[4]的数组 --> type: int(*)[4] vo ...
- 白盒测试实践--Day2
累计完成任务情况: 阶段内容 参与人 完成CheckStyle检查 小靳 完成代码评审会议纪要和结果报告 小熊.小梁及其他 完成白盒测试用例 小尹 学习静态代码审核,确定评审表,开评审会确定高危区代码 ...
- centos7部署JavaWeb项目
centos7部署JavaWeb项目共有三步 1.配置java环境 2.配置tomcat环境. 3.部署JavaWeb项目 一.配置java环境 1.1安装java 参考我的另一篇博文:https:/ ...
- ubuntu 13.04编译安装xen4.4总结
之前在ubuntu14.04上安装xen4.4失败,提示编译有问题,这次换了成了ubuntu13.04进行安装,成功完成xen4.4的安装 1. 安装环境 操作系统:ubuntu13.04 xen版本 ...