JS 事件机制完整示例分析

网络编程 2024/9/22 佚名

3 1 2

本文实例讲述了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.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

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

JS,事件机制

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“JS 事件机制完整示例分析”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年09月22日

JS 事件机制完整示例分析

Vue v-bind动态绑定class实例方法

JS实现滑动插件

评论“JS 事件机制完整示例分析”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接