首页 > Web开发 > 详细

js的事件机制

时间:2019-03-30 20:38:22      阅读:143      评论:0      收藏:0      [点我收藏+]

js的事件机制
解释:当我们的行为动作满足了一定的条件后,会触发某事务的执行。
内容:
1.单双击事件
  单击:onclick 当鼠标单击时候会触发
  双击:ondbclick 当鼠标双击时候会触发

2.鼠标事件
  onmouserover 当鼠标悬停在某个HTML元素上的时候触发
  onmousermove 当鼠标在某个HTML元素上移动的时候触发
  onmouseout 当鼠标在某个HTML元素上移除的时候触发
3.键盘事件
  onkeyup 当鼠标在某个HTML元素上弹起的时候触发
  onkeydown 当鼠标在某个HTML元素上下压的时候触发
4.焦点事件
  onfocus 当某个HTML元素获取焦点的时候触发
  onblur 当某个HTML元素失去焦点的时候触发
5.页面加载事件
  onload 当页面加载成功后
注意:
  js中添加事件的第一种方式:
  在HTML上直接使用事件操作进行添加,操作值为监听的函数。
  js中的事件只有在当前HTML元素中有效。
  一个HTML元素可以添加多个不同的事件。
  一个事件 可以触发多个函数的执行,但是不同的函数要使用分号隔开。

实现代码

<h3>js的单击事件机制</h3>
<hr />
<input type="button" id="" value="单击事件" onclick="testOnclick()"/>
<input type="button" id="" value="单击事件" onclick="testdbclick()"/>
<hr /><br />
<div id="showdiv" onmouseover="testOnmouseover();" onmousemove="testOnmousemove();"
onmouseout="testOnmouseout();">
</div>
<hr />
键盘事件学习:<br />
键盘弹起事件: <input type="text" name="" id="" value="" onkeyup="testOnkeyup();"/>
<br />
键盘下压事件: <input type="text" name="" id="" value="" onkeyup="testOnkeydown()"/>
<hr />
焦点事件学习:<hr />
获取焦点:
<input type="text" name="" id="" value="" onfocus="testOnfocus();"/>
失去焦点:
<input type="text" name="" id="" value="" onfocus="testOnblur()"/>

 

js的事件机制

原文:https://www.cnblogs.com/qhcyp/p/10628814.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!