JS 事件机制完整示例分析


Posted in Javascript onJanuary 15, 2020

本文实例讲述了JS 事件机制。分享给大家供大家参考,具体如下:

<html>
    <head>
        <title>js事件机制</title>
        <meta charset="UTF-8"/>
        <script type="text/javascript">
            function testOnclick(){
                alert("我是单击事件");
            }
            function testdblOnclick(){
                alert("我是双击事件");
            }
            function testOnmouseover(){
                alert("我是鼠标悬停事件");
            }
            function tsetOnmousemove(){
                alert("我进行了移动");
            }
            function testOnmouseout(){
                alert("我被移出了");
            }
            function testOnkeydown(){
                alert("键盘按下事件");
            }
            function testOnkeyup(){
                alert("键盘抬起事件");
            }
            function testOnkeypress(){
                alert("键盘按压事件触发")
            }
            function testOnfouse(){
                alert("焦点确认定位");
            }
            function testOnblur(){
                alert("我失去了焦点");
            }
            function tsetOnload(){
                alert("页面进行了重新加载");
            }
//            tsetOnload();
            function testOnchange(){
                alert("发生了改变");
            }
            function testbreak(){
                alert("阻断事件触发");
            }
            function testbreaktrue(){
                alert("阻断,我可不只是说说");
                return false;
            }
            function testHref(){
                alert("超链接提示");
            }
        </script>
        <style type="text/css">
            #showdiv{
                width: 100;
                height: 200;
                border: solid 1px;
            }
            input[type=text]{
                width: 300px;
                height: 20px;
                border: solid 2px aqua;
            }
            hr{
                height: 10px;
                background-color: bisque;
                border-radius: 10px;
            }
        </style>
    </head>
    <body onload="tsetOnload();">
        <h3>js事件机制</h3>
        <input type="button" id="" value="测试单击" onclick="testOnclick();"/>
        <input type="button" id="" value="测试双击" ondblclick="testdblOnclick();"/>
        <hr />
        <div id="showdiv" onmouseover="testOnmouseover();" onmousemove="tsetOnmousemove();" onmouseout="testOnmouseout();" >
        </div>
        <hr />
       <!--下面在文本框中添加的事件触发有事件的冲突,onkeydown和onkeypress会在按下一个按键的时候触发,但是由于触发了显示框事件导致按下按钮后一直出现,而使onkeyup无法触发-->
        <input type="text" id="" value="" onkeydown="testOnkeydown()" onkeyup="testOnkeyup();" onkeypress="testOnkeypress();"/>
        <hr />
                <!--失去焦点的时候会一直显示,因为在失去焦点操作中使显示框显示,其本来就是一个失去焦点的操作-->
        <input type="text" name="" id="" value="" onfocus="testOnfouse()" onblur="testOnblur()"/>
        <br />
        <input type="text" name="" id="" value="" onchange="testOnchange();"/>
        <br />
        比较喜欢的动漫角色:<br />
        <select name="" id="" onchange="testOnchange();">
            <option value="">古河渚</option>
            <option value="">藤和艾利欧</option>
            <option value="">佐仓千代</option>
            <option value="">筒隐月子</option>
        </select>
        <hr />
        <!--<a href="http://wwww.baidu.com" rel="external nofollow" rel="external nofollow" target="_blank" onclick="testbreak();">百度一下</a>-->
        <hr />
        <a href="http://wwww.baidu.com" rel="external nofollow" rel="external nofollow" target="_blank" onclick="return testbreaktrue();">百度一下</a> <!-- 必须函数和调用都含有return才能进行有效的阻断-->
        <hr />
        <a href="javascript:testHref()" rel="external nofollow" >超链接点击</a>
    </body>
</html>

事件触发机制使为了更好的实现网页与用户的交互,如果仅仅只在js代码域中定义函数,那么我们仅仅只能在代码中自己调用,用户无法触发函数,所以我们利用函数对一系列操作进行封装,在body中调用事件触发机制进行调用,这样当用户触发某个事件的时候就会触发一系列的操作。

注:在一系列的事件触发机制中,我们可以在一个标签中添加多个事件触发机制,但是我们必须在适当的地方设置,而且,对于多个事件机制其也会产生冲突,一个方面可能是因为触发机制的冲突(比如单双击)另一方面可能因为调用的函数引起的(比如焦点失去和显示框显示)

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 高效运行代码分析
Mar 18 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
Apr 25 Javascript
Ext JS添加子组件的误区探讨
Jun 28 Javascript
Js中获取frames中的元素示例代码
Jul 30 Javascript
js的window.showModalDialog及window.open用法实例分析
Jan 29 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
Mar 16 Javascript
JS对象深度克隆实例分析
Mar 16 Javascript
通过fastclick源码分析彻底解决tap“点透”
Dec 24 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
Mar 25 Javascript
layui导出所有数据的例子
Sep 10 Javascript
layer ui 导入文件之前传入数据的实例
Sep 23 Javascript
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
JS实现滑动插件
Jan 15 #Javascript
JS实现滑动导航效果
Jan 14 #Javascript
解决 window.onload 被覆盖的问题方法
Jan 14 #Javascript
vue quill editor 使用富文本添加上传音频功能
Jan 14 #Javascript
JavaScript事件冒泡机制原理实例解析
Jan 14 #Javascript
JS window对象简单操作完整示例
Jan 14 #Javascript
让mocha支持ES6模块的方法实现
Jan 14 #Javascript
You might like
php获取某个目录大小的代码
2008/09/10 PHP
并发下常见的加锁及锁的PHP具体实现代码
2010/10/12 PHP
PHP实现获取某个月份周次信息的方法
2015/08/11 PHP
详解PHP实现支付宝小程序用户授权的工具类
2018/12/25 PHP
jquery获取特定name所有选中的checkbox,支持IE9标准模式
2013/03/18 Javascript
jQuery下的动画处理总结
2013/10/10 Javascript
利用jQuary实现文字浮动提示效果示例代码
2013/12/26 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
Bootstrap基本组件学习笔记之导航(10)
2016/12/07 Javascript
详解NodeJS框架express的路径映射(路由)功能及控制
2017/03/24 NodeJs
JavaScrpt的面向对象全面解析
2017/05/09 Javascript
javascript 对象 与 prototype 原型用法实例分析
2019/11/11 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
浅谈webpack构建工具配置和常用插件总结
2020/05/11 Javascript
Vue Elenent实现表格相同数据列合并
2020/11/30 Vue.js
[01:16:13]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第一场 2月22日
2021/03/11 DOTA
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
Python利用turtle库绘制彩虹代码示例
2017/12/20 Python
windows下python 3.6.4安装配置图文教程
2018/08/21 Python
python机器学习之KNN分类算法
2018/08/29 Python
TensorFlow卷积神经网络之使用训练好的模型识别猫狗图片
2019/03/14 Python
python 实现识别图片上的数字
2019/07/30 Python
如何用Matplotlib 画三维图的示例代码
2020/07/28 Python
15个应该掌握的Jupyter Notebook使用技巧(小结)
2020/09/23 Python
python3实现飞机大战
2020/11/29 Python
资产评估专业大学生求职信
2013/09/29 职场文书
电子商务个人职业生涯规划范文
2014/02/12 职场文书
2015小学语文教师个人工作总结
2015/05/20 职场文书
入党积极分子党小组意见
2015/06/02 职场文书
四十年同学聚会致辞
2015/07/28 职场文书
高中生军训感言
2015/08/01 职场文书
婚礼答谢词范文
2015/09/29 职场文书
redis使用不当导致应用卡死bug的过程解析
2021/07/01 Redis
MySQL 执行数据库更新update操作的时候数据库卡死了
2022/05/02 MySQL
Spring Boot实现文件上传下载
2022/08/14 Java/Android