JS 事件机制完整示例分析
程序员文章站
2022-03-25 15:52:18
本文实例讲述了js 事件机制。分享给大家供大家参考，具体如下：
js...</div>
<div class="content">
<p>本文实例讲述了js 事件机制。分享给大家供大家参考，具体如下：</p>
<div class="jb51code">
<pre class="brush: javascript;">
<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>
</pre>
</div>
<p>事件触发机制使为了更好的实现网页与用户的交互，如果仅仅只在js代码域中定义函数，那么我们仅仅只能在代码中自己调用，用户无法触发函数，所以我们利用函数对一系列操作进行封装，在body中调用事件触发机制进行调用，这样当用户触发某个事件的时候就会触发一系列的操作。</p>
<p>注：在一系列的事件触发机制中，我们可以在一个标签中添加多个事件触发机制，但是我们必须在适当的地方设置，而且，对于多个事件机制其也会产生冲突，一个方面可能是因为触发机制的冲突（比如单双击）另一方面可能因为调用的函数引起的（比如焦点失去和显示框显示）</p>
<p>感兴趣的朋友可以使用<span style="color: #ff6600"><strong>在线html/css/javascript代码运行工具</strong></span>：<a target="_blank" href="http://tools.jb51.net/code/htmljsrun" rel="nofollow">http://tools.jb51.net/code/htmljsrun</a>测试上述代码运行效果。</p> </div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/326032.html">
JavaScript基于面向对象实现的无缝滚动轮播示例 </a>
</p>
<p>
下一篇： <a href="/article/326034.html">
vuejs中父子组件之间通信方法实例详解 </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/2171752.html" target="_blank" title="Python通过websocket与js客户端通信示例分析">
<h2>
Python通过websocket与js客户端通信示例分析 </h2>
</a>
</li>
<li>
<a href="/article/2126405.html" target="_blank" title="详解JS浏览器事件循环机制">
<h2>
详解JS浏览器事件循环机制 </h2>
</a>
</li>
<li>
<a href="/article/2106646.html" target="_blank" title="javascript事件捕获机制【深入分析IE和DOM中的事件模型】">
<h2>
javascript事件捕获机制【深入分析IE和DOM中的事件模型】 </h2>
</a>
</li>
<li>
<a href="/article/2099904.html" target="_blank" title="JS实现select选中option触发事件操作示例">
<h2>
JS实现select选中option触发事件操作示例 </h2>
</a>
</li>
<li>
<a href="/article/2079748.html" target="_blank" title="Qt事件分发机制源码分析之QApplication对象构建过程">
<h2>
Qt事件分发机制源码分析之QApplication对象构建过程 </h2>
</a>
</li>
<li>
<a href="/article/2075266.html" target="_blank" title="jQuery新的事件绑定机制on()示例应用">
<h2>
jQuery新的事件绑定机制on()示例应用 </h2>
</a>
</li>
<li>
<a href="/article/2074754.html" target="_blank" title="JS实现动态给标签控件添加事件的方法示例">
<h2>
JS实现动态给标签控件添加事件的方法示例 </h2>
</a>
</li>
<li>
<a href="/article/2066131.html" target="_blank" title="JS html事件冒泡和事件捕获操作示例">
<h2>
JS html事件冒泡和事件捕获操作示例 </h2>
</a>
</li>
<li>
<a href="/article/2056378.html" target="_blank" title="JS实现获取当前所在周的周六、周日示例分析">
<h2>
JS实现获取当前所在周的周六、周日示例分析 </h2>
</a>
</li>
<li>
<a href="/article/2039456.html" target="_blank" title="js事件触发操作实例分析">
<h2>
js事件触发操作实例分析 </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>