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定义类或函数的几种方式小结
Jan 09 Javascript
三种检测iPhone/iPad设备方向的方法
Apr 23 Javascript
jQuery 遍历函数详解
Jul 05 Javascript
JS中如何比较两个Json对象是否相等实例代码
Jul 13 Javascript
JavaScript 拖拽实例代码
Sep 21 Javascript
原生js轮播(仿慕课网)
Feb 15 Javascript
微信小程序 图片宽高自适应详解
May 11 Javascript
Angular 1.x个人使用的经验小结
Jul 19 Javascript
判断div滑动到底部的scroll实例代码
Nov 15 Javascript
防止Layui form表单重复提交的实现方法
Sep 10 Javascript
Vue.js中的高级面试题及答案
Jan 13 Javascript
修改Vue打包后的默认文件名操作
Aug 12 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
分页显示Oracle数据库记录的类之二
2006/10/09 PHP
Laravel中9个不经常用的小技巧汇总
2019/04/16 PHP
详解JavaScript函数绑定
2013/08/18 Javascript
客户端js判断文件类型和文件大小即限制上传大小
2013/11/20 Javascript
jQuery实现瀑布流的取巧做法分享
2015/01/12 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
2015/10/20 Javascript
javascript数据结构之双链表插入排序实例详解
2015/11/25 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
2016/01/18 Javascript
BootStrap中
2016/12/10 Javascript
vue-router路由参数刷新消失的问题解决方法
2017/06/17 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
vue的全局变量和全局拦截请求器的示例代码
2018/09/13 Javascript
Vue开发之watch监听数组、对象、变量操作分析
2019/04/25 Javascript
Vue简单实现原理详解
2020/05/07 Javascript
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
Python实现字典的key和values的交换
2015/08/04 Python
分析Python中解析构建数据知识
2018/01/20 Python
python递归函数绘制分形树的方法
2018/06/22 Python
详解Python爬取并下载《电影天堂》3千多部电影
2019/04/26 Python
python BlockingScheduler定时任务及其他方式的实现
2019/09/19 Python
Python脚本实现监听服务器的思路代码详解
2020/05/28 Python
新手常见Python错误及异常解决处理方案
2020/06/18 Python
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
Ajxa常见问题都有哪些
2014/03/26 面试题
电信专业毕业生推荐信
2013/11/18 职场文书
环保公益广告语
2014/03/13 职场文书
校庆筹备方案
2014/03/30 职场文书
寒假家长评语大全
2014/04/16 职场文书
建筑专业毕业生求职信
2014/09/30 职场文书
涨价通知
2015/04/23 职场文书
工作态度检讨书范文
2015/05/06 职场文书
html+css合并表格边框的示例代码
2021/03/31 HTML / CSS
利用python做表格数据处理
2021/04/13 Python
goland 清除所有的默认设置操作
2021/04/28 Golang
教你用python控制安卓手机
2021/05/13 Python