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 相关文章推荐
safari,opera嵌入iframe页面cookie读取问题解决方法
Jun 23 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
Mar 26 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
Aug 24 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
Jul 06 Javascript
基于Vue实例对象的数据选项
Aug 09 Javascript
Vue-Router模式和钩子的用法
Feb 28 Javascript
详解Vue.js中.native修饰符
Apr 24 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
Sep 27 Javascript
React 源码中的依赖注入方法
Nov 07 Javascript
layDate插件设置开始和结束时间
Nov 15 Javascript
Vue项目服务器部署之子目录部署方法
May 12 Javascript
Element Cascader 级联选择器的使用示例
Jul 27 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
PHP has encountered an Access Violation
2007/01/15 PHP
php中用foreach来操作数组的代码
2011/07/17 PHP
PHP If Else(elsefi) 语句
2013/04/07 PHP
php5.3不能连接mssql数据库的解决方法
2014/12/27 PHP
ThinkPHP路由机制简介
2016/03/23 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
如何优雅的使用 laravel 的 validator验证方法
2018/11/11 PHP
解决在laravel中auth建立时候遇到的问题
2019/10/15 PHP
Javascript 圆角div的实现代码
2009/10/15 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
2015/08/25 Javascript
js 求时间差的实现代码
2016/04/26 Javascript
JS快速实现移动端拼图游戏
2016/09/05 Javascript
javascript 利用arguments实现可变长参数
2016/11/21 Javascript
JavaScript Uploadify文件上传实例
2017/02/28 Javascript
如何使用angularJs
2017/05/08 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
2017/08/11 Javascript
seajs中模块依赖的加载处理实例分析
2017/10/10 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
Vue表单控件绑定图文详解
2019/02/11 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
vue-cli3使用mock数据的方法分析
2020/03/16 Javascript
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
python zip文件 压缩
2008/12/24 Python
详解Swift中属性的声明与作用
2016/06/30 Python
基于python中staticmethod和classmethod的区别(详解)
2017/10/24 Python
python调用API实现智能回复机器人
2018/04/10 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
2021/02/24 HTML / CSS
YSL圣罗兰美妆俄罗斯官网:Yves Saint Lauret RU
2020/09/23 全球购物
自我反省检讨书
2014/01/23 职场文书
汽车广告策划方案
2014/05/31 职场文书
群教个人对照检查材料
2014/08/20 职场文书
镇人大副主席民主生活会对照检查材料思想汇报
2014/10/01 职场文书
总经理检讨书范文
2015/02/16 职场文书
优秀团员自我评价
2015/03/10 职场文书
老人节主持词
2015/07/04 职场文书
Python入门之使用pandas分析excel数据
2021/05/12 Python