事件(event)

event对象

(1)什么是event对象?

  Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用,函数不会在事件发生前被执行!

(2)Event相关方法与属性

  1、谷歌 event.stopPropagation()、IE event.CancelBubble=true:终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点

  2、谷歌 event.preventDefault()、IE event.returnvalue=false :取消事件的默认动作(a标签的href)。

  3、event.clientX、event.clientY:鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性

  4、event.offsetX、event.offsetY:鼠标相对于事件源元素(触发事件的元素)的X,Y坐标,只有IE事件有这2个属性,标准事件没有对应的属性。 与event.offsetLeft、event.offsettop一样。

  5、event.screenX、event.screenY:鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性。

  6、event.keyCode:获得按键的code值。例:我们在程序里是怎么知道我们是按得哪个键呢,我们可以通过keyCode获得,程序员早在一开始就把键盘上的每一个键定义了一个code,在程序里我们可以判断值来知道我们点击了哪个键。

1.鼠标事件,页面所有元素都可触发

click:当用户单击鼠标按钮或按下回车键时触发。

input.onclick = function () {

  alert('Lee');

};

dblclick:当用户双击主鼠标按钮时触发。

input.ondblclick = function () {

  alert('Lee');

};

mousedown:当用户按下了鼠标还未弹起时触发。

input.onmousedown = function () {

  alert('Lee');

};

mouseup:当用户释放鼠标按钮时触发。

input.onmouseup = function () {

  alert('Lee');

};

mouseover(mouseenter 这种方法不冒泡):当鼠标移到某个元素上方时触发。

input.onmouseover = function () {

  alert('Lee');

};

mouseout(mouseleaver 这种方法不冒泡):当鼠标移出某个元素上方时触发。

input.onmouseout = function () {

  alert('Lee');

};

mousemove:当鼠标指针在元素上移动时触发。

input.onmousemove = function () {

  alert('Lee');

};

2.键盘事件

keydown:当用户按下键盘上任意键触发,如果按住不放,会重复触发。

onkeydown = function () {

  alert('Lee');

};

keypress:当用户按下键盘上的字符键触发,如果按住不放,会重复触发。

onkeypress = function () {

  alert('Lee');

};

keyup:当用户释放键盘上的键触发。

onkeyup = function () {

  alert('Lee');

};

3.HTML事件

load:当页面完全加载后在window上面触发,或当框架集加载完毕后在框架集上触发。

window.onload = function () {

  alert('Lee');

};

unload:当页面完全卸载后在window上面触发,或当框架集卸载后在框架集上触发。

window.onunload = function () {

  alert('Lee');

};

select:当用户选择文本框(input或textarea)中的一个或多个字符触发。

input.onselect = function () {

  alert('Lee');

};

change:当文本框(input或textarea)内容改变且失去焦点后触发。

input.onchange = function () {

  alert('Lee');

};

focus:当页面或者元素获得焦点时在window及相关元素上面触发。

input.onfocus = function () {

  alert('Lee');

};

blur:当页面或元素失去焦点时在window及相关元素上触发。

input.onblur = function () {

  alert('Lee');

};

submit:当用户点击提交按钮在<form>元素上触发。

form.onsubmit = function () {

  alert('Lee');

};

reset:当用户点击重置按钮在<form>元素上触发。

form.onreset= function () {

  alert('Lee');

};

resize:当窗口或框架的大小变化时在window或框架上触发。

window.onresize = function () {

  alert('Lee');

};

scroll:当用户滚动带滚动条的元素时触发。

window.onscroll = function () {

  alert('Lee');

};

最新文章

  1. jQuery学习之路(1)-选择器
  2. WinForm 曲线图控件
  3. [转]MySQL 最基本的SQL语法/语句
  4. USB2.0协议笔记
  5. Hadoop Hello World
  6. MS CRM 2011的自定义和开发(11)——插件(plugin)开发(一)
  7. 从零学起PHP
  8. Bootstrap 基础教程
  9. SVN 权限配置具体说明
  10. leetcode first bad version python
  11. PAT (Advanced Level) 1098. Insertion or Heap Sort (25)
  12. HDFS的读数据过程分析
  13. React 之props属性
  14. 【dfs+连通分量】Bzoj1123 POI2008 BLO
  15. [原创]全新IFPGA-Cable----支持Xilinx/Altera/Lattice JTAG和UART
  16. 【ASP.NET】website转webapplication
  17. HTTP报错401和403详解及解决办法
  18. RabbitMQ简单应用の轮训分发
  19. 006-Object.assign
  20. ImageView控件有关问题

热门文章

  1. 用.net installshield打包程序时注册第三方控件
  2. PHP-手册阅读
  3. win8 应用商店。 app下载的音乐和视频软件能打开,不能正常播放 解决方法
  4. Failed to load http://localhost:8080/team.php: Request header field x-jwt-header is not allowed by Access-Control-Allow-Headers in preflight response.
  5. eslint 人性化配置
  6. Silverlight实例教程 - Validation服务器端异步数据验证(转载)
  7. 前端模块化和AMD、CMD规范
  8. unity, inspector debug
  9. MySQL修改参数不重启生效
  10. 如何实现uboot和linux之间的参数传递