本文实例讲述了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"> #showp{ 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 /> <p id="showp" onmouseover="testOnmouseover();" onmousemove="tsetOnmousemove();" onmouseout="testOnmouseout();" > </p> <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.xuebuyuan.com/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
以上就上有关JS事件机制完整示例分析的相关介绍，要了解更多事件机制内容请登录学步园。