【JavaScript】JS事件机制学习
常用的事件
通过事件机制,达到与用户的交互,与java的swing交互类似。
主要是结合js的函数使用。
当你添加一个事件之后没有达到想要的效果时,就要检查一下是不是给HTML标签添加了合适的事件,以及是否有其他的方式可以更好的达到这种效果。(靠经验)
避免事件之间的冲突(双击、单击不能同时存在)
- 单 / 双击事件
- 鼠标事件
- 键盘事件
- 交点事件
- 页面加载事件
- 值改变事件
示例1
<html><head><title>js的事件机制学习1</title><meta charset="UTF-8"/><!--js的事件机制:解释:当我们的行为动作满足了一定的条件后,会触发某类事务的执行。作用:主要是结合js的函数来使用。内容:1、单双击事件单击:onclick 当鼠标单击的时候会触发双击:ondblclick 当鼠标双击的时候会被触发2、鼠标事件onmouseover 当鼠标悬停在某个HTML元素上的时候触发onmousemove 当鼠标在某个HTML元素上移动的时候触发onmouseout 当鼠标在某个HTML元素上移出的时候触发3、键盘事件onkeyup 当键盘在某个HTML元素上弹起的时候触发onkeydown 当键盘在某个HTML元素上下压的时候触发4、焦点事件onfocus 当某个HTML元素获取焦点的时候触发onblur 当某个HTML元素失去焦点的时候触发5、页面加载事件 onload 当页面加载成功后触发。注意:js中添加事件的第一种方式:在HTML上直接使用事件属性进行添加,属性值为所监听执行的函数。js中的事件只有在当前HTML元素上有效。一个HTML元素可以添加多个不同的事件。一个事件可以监听触发多个函数的执行,但是不同的函数要使用分号间隔--><!--声明js代码域--><script type="text/javascript">/*声明js函数*///单击事件function testOnclick(){alert("我是单击");}//测试双击function testOndblclick(){alert("我是双击");}//鼠标事件function testOnmouseover(){alert("我是鼠标悬停事件");}function testOnmousemove(){alert("我被移动了");}function testOnmouseout(){alert("我被移出了");}//键盘事件function testOnkeyup(){alert("我是键盘弹起事件");}function testOnkeydown(){alert("我是键盘按下事件");}//焦点事件function testOnfocus(){document.getElementById("showdiv").innerHTML="哈哈";alert("我是获取焦点事件");}function testOnblur(){alert("我是失去焦点事件");}//页面加载function testOnload(){alert("我是页面加载事件");}//测试function test(){alert("测试一个事件的多个函数执行");}</script><style type="text/css">#showdiv{width: 300px;height: 300px;border: solid 1px;}</style></head><body onload="testOnload()"><h3>js的事件机制学习1</h3><hr /><input type="button" name="" id="" value="测试单击" onclick="testOnclick();test();" /><input type="button" name="" id="" value="测试双击" ondblclick="testOndblclick();" /><hr /><br /><br /><div id="showdiv" onmouseover="testOnmouseover();" onmousemove="testOnmousemove()" onmouseout="testOnmouseout()"></div><hr />键盘事件学习: <br />键盘弹起事件:<input type="text" name="" id="" value="" onkeyup="testOnkeyup();"/><br /><br />键盘下压事件: <input type="text" name="" id="" value="" onkeydown="testOnkeydown()"/><hr />焦点事件学习:<br />获取焦点: <input type="text" name="" id="" value="" onfocus="testOnfocus();"/><br /><br />失去焦点: <input type="text" name="" id="" value="" onblur="testOnblur();"/></body>
</html>
示例2
事件的阻断
<html><head><title>js的事件机制二</title><meta charset="UTF-8"/><!--js的事件机制学习2:1、给合适的HTML标签添加合适的事件onchange----select下拉框onload------body标签单双击-------用户会进行点击动作的HTML元素鼠标事件------用户会进行鼠标移动操作的。键盘事件------用户会进行键盘操作的HTML元素。2、给HTML元素添加多个事件时,注意事件之间的冲突举个栗子:单击和双击当事件的触发条件包含相同部分的时候,会产生事件之间的冲突。3、事件的阻断当事件所监听的函数的将返回值返回给事件时:false:则会阻断当前事件所在的HTML标签的功能true:则继续执行当前事件所在的HTML标签的功能4、超链接调用js函数<a href="javascript:函数名()">调用js函数</a> --><script type="text/javascript">//值改变事件function testOnchange(){alert("我被改变了");}//单击事件function testOnclick(){alert("今天天气真好,不冷不热,贼适合学习");}//双击事件function testOndblclick(){alert("老师说的对");}//事件的阻断function testA(){alert("事件的阻断");return true;}//超链接调用js函数function testHref(){alert("我是超链接调用");}</script></head><body><h3>js的事件机制二</h3><hr />值改变事件: <input type="text" name="" id="" value="" onchange="testOnchange();"/><br /><br /><select name="" id="" onchange="testOnchange();"><option value="">北京</option><option value="">上海</option><option value="">广州</option></select><hr />事件的冲突:<br /><input type="button" name="" id="" value="事件的冲突" onclick="testOnclick()" ondblclick="testOndblclick()"/><hr />事件的阻断:先走onclick事件触发的js事件,然后再走href的超链接。 如果js代码的返回值为false,则事件被阻断。<br /><a href="http://www.baidu.com" target="_blank" onclick="return testA()">百度一下</a><hr />超链接调用js函数:<a href="javascript:testHref()">调用js函数</a></body>
</html>
【JavaScript】JS事件机制学习相关推荐
- JavaScript之JS事件机制
JS事件机制 一.JS事件机制 1.解释 2.作用 3.内容 3.1 单双击事件 3.2 鼠标事件 3.3 键盘事件 3.4 焦点事件 3.5 页面加载事件 4.注意 5.实例 二.衍生思考 1.给合 ...
- click事件在什么时候出发_超全的js事件机制amp;事件委托
超全的js事件机制&事件委托,想要理解js事件只需认真看完此篇即可~ 目录结构: 什么是事件机制 事件冒泡事件捕获 DOM事件流事件委托 误区 在同一个对象上注册事件,并不一定按照注册顺序执行 ...
- JavaScript(js)事件冒泡、事件捕获、事件委托详解
JavaScript(js)事件冒泡.事件捕获.事件委托详解 1.什么是事件 JavaScript和HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口发生的一些特定的交互瞬间.可以使用监听 ...
- 从八道面试题看JavaScript DOM事件机制
原文:https://segmentfault.com/a/1190000013894510#articleHeader0 As we all know,事件机制其实很简单,无非冒泡和捕获 这两点,笔 ...
- 【初窥javascript奥秘之事件机制】论“点透”与“鬼点击”
前言 最近好好的研究了一番移动设备的点击响应速度,期间不断的被自己坑,最后搞得焦头烂额,就是现在可能还有一些问题,但是过程中感觉自己成长不少, 最后居然感觉对javascript事件机制有了更好的认识 ...
- JavaScript 详说事件机制之冒泡、捕获、传播、委托
DOM事件流(event flow )存在三个阶段:事件捕获阶段.处于目标阶段.事件冒泡阶段. 事件捕获(event capturing):通俗的理解就是,当鼠标点击或者触发dom事件时,浏览器会 ...
- 【探讨】javascript事件机制底层实现原理
前言 又到了扯淡时间了,我最近在思考javascript事件机制底层的实现,但是暂时没有勇气去看chrome源码,所以今天我来猜测一把 我们今天来猜一猜,探讨探讨,javascript底层事件机制是如 ...
- JavaScript重难点解析5(对象高级、浏览器内核与事件循环模型(js异步机制))
JavaScript重难点解析5(对象高级.浏览器内核与事件循环模型(js异步机制) 对象高级 对象创建模式 Object构造函数模式 对象字面量模式 工厂模式 自定义构造函数模式 构造函数+原型的组 ...
- 我也来说说js的事件机制
原文链接:http://www.w3cfuns.com/notes/17398/8062de2558ef495ce6cb7679f940ae5c.html 学js,不懂事件机制,基本可以说学了js,就 ...
最新文章
- windows tasklist 查看应用、进程
- Git 什么时候用什么指令
- 个人作业收官——软件工程实践总结
- php make,安装PHP出现make:
- 微软用的工具,统一财务三大表及高级分析通用模板
- ArcGIS实验教程——实验五:空间数据编辑
- 树莓派摄像头_Arducam 8MP重磅来袭,为树莓派4B构建完全同步的双摄像头方案~
- 高质量程序设计指南c++/c语言(30)--引用
- 谷歌驱动和谷歌版本必须一一对应吗_谷歌:华为别用我的安卓系统!自己研发一个去...
- Echarts数据动态加载的实现样例
- 问题:import org.springframework.security.authentication.encoding.Md5PasswordEncoder;spring5.已移除
- Numpy.fromfunction用法
- 域名邮箱用GMAIL,live
- 为什么我们公司要使用Go+MySQL开发认证机构ERP信息系统
- 在阿里外包是一种什么样的体验?
- Python爬取梨视频并下载【ajax抓包】
- day01.介绍python运维开发
- ApiPost 前后端协作开发神器 Postman+Swagger+Mock+Websocket的完美替代品
- 1分钟搞定ubuntu下配置mysql 奥利给
- 打印信息无法连接服务器,打印机无法连接服务器
热门文章
- 中石油训练赛 - Racing Gems(最长不下降子序列)
- clob类型用java怎么存,Java 储存和读取 oracle CLOB 类型字段的实用方法
- HDU4259(简单群置换)
- 基于 ida 的反汇编转换 Obj 的可行性 笔记(2)
- 计算机网络 | 应用层 :HTTP协议详解
- docker学习笔记(二)创建自己的镜像
- 总结了24个C++的大坑,看你能躲过几个?
- 那些做了十年的老开发都去哪了?
- JDK 14 调试神器了解一下?
- 关于如何升级gcc版本及相关的标准库问题