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 函数式编程
Aug 16 Javascript
关于JavaScript与HTML的交互事件
Apr 12 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
Jun 24 Javascript
正负小数点后两位浮点数实现原理及代码
Sep 06 Javascript
根据表格中的某一列进行排序的javascript代码
Nov 29 Javascript
jquery validate 自定义验证方法介绍 日期验证
Feb 27 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
Oct 01 Javascript
Javascript 跨域知识详细介绍
Oct 30 Javascript
js实现HashTable(哈希表)的实例分析
Nov 21 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
Oct 24 Javascript
Vue不能检测到Object/Array更新的情况的解决
Jun 26 Javascript
js图片无缝滚动插件使用详解
May 26 Javascript
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
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
php数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
使用PHP如何实现高效安全的ftp服务器(二)
2015/12/30 PHP
php面向对象重点知识分享
2019/09/27 PHP
PHP中mysqli_get_server_version()的实例用法
2020/02/03 PHP
Javascript中的数学函数
2007/04/04 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
2010/04/27 Javascript
JavaScript中的getMilliseconds()方法使用详解
2015/06/10 Javascript
基于javascript制作微博发布栏效果
2016/04/04 Javascript
js实现非常棒的弹出div
2016/10/06 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
2016/12/26 Javascript
微信小程序之拖拽排序(代码分享)
2017/01/21 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
2017/05/31 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
2017/12/22 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
2019/06/10 Javascript
bootstrap table列和表头对不齐的解决方法
2019/07/19 Javascript
Layui表格行工具事件与数据回填方法
2019/09/13 Javascript
理解Python垃圾回收机制
2016/02/12 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
python中利用h5py模块读取h5文件中的主键方法
2018/06/05 Python
python实现多层感知器
2019/01/18 Python
对django中foreignkey的简单使用详解
2019/07/28 Python
使用Rasterio读取栅格数据的实例讲解
2019/11/26 Python
Python实现密钥密码(加解密)实例详解
2020/04/26 Python
python爬虫快速响应服务器的做法
2020/11/24 Python
css3和jquery实现自定义checkbox和radiobox组件
2014/04/22 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
DBA的职责都有哪些
2012/05/16 面试题
应届生幼儿园求职信
2013/11/12 职场文书
汽车队司机先进事迹材料
2014/02/01 职场文书
撤诉申请书法院范本
2015/05/18 职场文书
python开发的自动化运维工具ansible详解
2021/08/07 Python
Nginx下SSL证书安装部署步骤介绍
2021/12/06 Servers
python创建字典及相关管理操作
2022/04/13 Python