JS事件详解

事件详解

焦点

使浏览器能够区分用户的输入对象，当一个元素有焦丹的时候那么他就能够接收用户的输入

我们可以通过一些方式给元素设置焦点

1. 用户鼠标点击
2. 键盘Tab切换
3. JS程序控制

不是所有的元素都能够接收焦点，能够响应用户操作的元素才有焦点

焦点事件：onfocus-onblur

• onfocus当元素获得焦点的时候触发
• onblur当元素事情焦点的时候触发obj.onfocus=function(){.....},obj.onblur=function(){....}
• obj.focus():给指定的元素设置焦点
• obj.blur():取消指定元素的焦点
• obj.select()//select()只能选中用户输入的内容

Event对象

event:事件对象，当一个事件发生的时候，和当前这个对象发生的这个事件有关的一些 详细的信息都会被临时保存到一个指定的-event对象，供我们在需要的时候调用

兼容

标准下:IE/chrome:event是一个内置的全局对象;

FF:事件对象是通过事件函数的第一个参数传入:如果一个函数是被事件调用的，那么这个函数定义的第一个参数就是事件对象

处理方式：function fn(ev){var ev=ev||event; retun ev;}

必须在事件函数中调用

事件函数：事件调用的函数,一个函数是不是事件函数，不是定义的决定，而是取决于这个函数调用的时候

clientX[Y]:当一个事件发生的时候，鼠标到页面可视区域的距离

onmousemove :当鼠标在一个元素上面移动的时候触发；触发频率是按移动间隔时间，在一个指定的时间内，如果鼠标的位置和上一次的位置发生了变化，那么就会触发一次

事件冒泡和事件捕获

事件冒泡

事件冒泡：当一个元素接收到事件的时候，会把它接收到的事件传播给他的父级，一直到顶层window

阻止冒泡：在当前要阻止事件冒泡的函数中调用event.cancelBubble=true

事件捕获

给一个对象的同一个事件绑定不同的函数

• ie: obj.attachEvent(事件名称,事件函数)：
  • 没有捕获
  • 事件名称有on
  • 事件函数执行顺序：标准IE-正序，非标准：倒序
  • this指向window
• 标准下:obj.addEventListener(事件名称，事件函数，是否捕获)
  • 事件捕获默认是false
  • 事件名称是没有on
  • 事件执行循序是正序
  • this指向触发该事件的对象

自己的理解:事件捕获比如有一个盒子，你想让盒子里的东西移动的话，必须要先晃动盒子，盒子里的东西才会动！从外从到里层的过程，就是事件捕获的过程! 而事件冒泡则是相反，在盒子里的时候，触动盒子里的东西，也会让盒子受到影响，就是事件冒泡

call

调用call方法

• call()方法第一个参数可以改变函数执行过程中的内部this指向
• call()第二个参数开始就是 就是原函数的参数列表
• 如果第一个参数是null的话，指向的还是原来的函数对象

事件取消

• 如果是通过onclick=fn();绑定的话，只用onclick=null就可以取消
• 在IE下:obj.attachEvent('onclick',fn1);通过obj.detachEvent('onclick',fn1)取消；
• 标准下:obj.addEventListener('click',fn1,false);通过obj.removeEventListener('click',fn1,false)来清楚

键盘事件

onkeydown

onkeydown:当键盘按键按下的时候触发

event.keyCode:数字类型,键盘按键的值，键值

ctrlKey,shiftKey,altKey：这三个键是boolean值

当一个事件发生的时候，如果这个键是按住的话，就是ture;如果没有按的话就是false

不是所有元素都能够接收键盘事件，能够响应用户输入的元素，才能接受应键盘事件

事件默认行为

当一个事件发生的时候浏览器自己会默认做的事情怎么阻止

怎么阻止：当前行为是什么时候触发的，然后在这个事件的处理函数中使用return false

oncontextmenu：右键菜单事件

当右键菜单(环境菜单)显示出来的时候触发