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事件时,浏览器会 ...
随机推荐
- 通过Scanner从控制台获取数据
----------siwuxie095 Scanner类用于扫描从控制台输入的数据,可以接收字符串和基本数据类型的数据 Scanner类位于 java.util.Scanner 包中 Scanner ...
- RabbitMQ EasyNetq 用法
EasyNETQ帮助类 public class MQHelper { /// <summary> /// 发送消息 /// </summary> public static ...
- extends前提
extends之前需要先include
- charles4.2下载与破解方法以及配置https.RP
Charles下载地址 地址:https://www.charlesproxy.com/latest-release/download.do 2. Charles破解 破解地址:https://www ...
- 在IIS和Nginx上通过代理部署基于ant-design-pro前端框架开发的应用
一.本文解决的主要问题 通过对前端静态资源站点进行代理服务设置,实现对后端API接口的代理,从而实现前端的独立部署,即通过代理的设置实现对http://IP0:Port0/api/xxx的请求转发至h ...
- jdk1.7 环境变量配置
Windows系统中设置环境变量如下图右击“我的电脑”,选择“属性”. 点击“高级”选项卡,选择“环境变量”. 在“系统环境变量”中设置上面提到的3个环境变量,如果变量已经存在就选择“编辑”,否则选 ...
- QML开发常见错误(原)
大部分错误,都是因为没有重新编译或者清理导致的.消除步骤: 先排除基本语法错误 清理项目 如果前两步都没有效果,手动删除程序生成目录 1.添加新控件,运行时不识别,如 qrc:ui/main.qml: ...
- CentOS 7搭建FTP服务器
安装vsftpd 命令:yum -y install vsftpd 修改ftp配置文件 命令:vim /etc/vsftpd/vsftpd.conf 按i进入insert模式后,按以下要求修改 ano ...
- 从零开始学习前端JAVASCRIPT — 8、JavaScript基础COOKIE
1:通信协议 定义:通信协议是指双方实体完成通信或服务所必须遵循的规则和约定.协议定义了数据单元使用的格式,信息单元应该包含的信息与含义,连接方式,信息发送和接收的时序,从而确保网络中数据顺利地传送到 ...
- 手动安装Chrome截屏控件扩展-Xproer.ScreenCapture(ScreenCapture.crx)
1.打开扩展面板,在地址栏中输入 chrome://extensions 或通过"扩展程序"菜单打开 2.将ScreenCapture.crx拖拽到此面板中 3.选择添 ...