Event & 事件兼容

…事件是可以被JavaScript侦测到的行为。网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。

事件分类

1. 鼠标事件

   (1) onclick (onclick = onmousedown + onmouseup)

当用户点击某个对象时调用的事件

   (2) ondblclick (ondblclick = onclick * 2)

当用户双击某个对象时调用的事件

   (3) onmousedown

鼠标按钮被按下

   (4) onmouseup

鼠标按键被松开

   (5) onmouseover

鼠标移到某元素之上。

   (6) onmouseout

鼠标从某元素移开。

   (7) onmousemove

鼠标被移动时触发。

   (8) onmouseenter

在鼠标光标从元素外部移动到元素范围之内时触发。这个事件不冒泡

   (9) onmouseleave

在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡，

   (10)oncontextmenu

鼠标右键菜单展开时触发

2. 键盘事件

   (1) onkeydown

某个键盘按键被按下。

   (2) onkeyup

某个键盘按键被松开。

   (3) onkeypress

键盘**<字符键>**被按下,而且如果按住不放的话，会重复触发此事件。

3. UI事件

   (1) onload

页面元素（包括图片多媒体等）加载完成后

   (2) onscroll

滚动时触发。

   (3) onresize

窗口或框架被重新调整大小

4. 表单事件

   (1) onselect

输入框文本被选中。

   (2) onblur

元素失去焦点时触发。

   (3) onfocus

元素获得焦点时触发。

   (4) onchange

元素内容被改变，且失去焦点时触发。

   (5) onreset

重置按钮被点击。

   (6) onsubmit

确认按钮被点击。

   (7) oninput

输入字符时触发

event对象 (兼容ie浏览器 e = e||window.event)

1. 作用:监听事件执行过程中的状态，用来保存当前事件的信息

2. event对象的属性

   (1) 与鼠标相关的

     ① 鼠标按键

       a) button (event.button)

         返回当事件被触发时，鼠标哪个按键被点击

         标准浏览器：0:鼠标左键 1:鼠标滚轮 2:鼠标右键

     ② 光标位置

       a) clientX /clientY

        光标相对于浏览器可视区域的位置，也就是浏览器坐标。

       b) screenX /screenY

        光标指针相对于电脑屏幕的水平/垂直坐标

       c) pageX /pageY

        鼠标相对于文档的位置

        包括滚动条滚动的距离，即：e.clientX+window.scrollX

        IE8-不支持

       d) offsetX /offsetY

        光标相对于事件源对象左上角相对偏移量。

        事件源对象：触发事件的对象

   (2) 与键盘有关的属性

     ① which (event.which)

        对于keypress事件，该属性声明了被敲击的键生成的 Unicode 字符码(ASCII码)

        对于keydown和keyup事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和 使用的键盘的布局相关。

     ② ctrlKey

        当事件被触发时，CTRL 键是否被按下。返回值为布尔值

     ③ altKey

        当事件被触发时，Alt键是否被按下。返回值为布尔值

     ④ shiftKey

        当事件被触发时，Shift键是否被按下。返回值为布尔值

事件冒泡

1. 在一个对象上触发某类事件（如onclick事件），那么事件就会沿着DOM树向这个对象的父级传 播，从里到外，直至事件到达了最顶层（document/window）

2. 阻止事件冒泡

event.stopPropagation()
e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true   //兼容写法

3. 事件委托

利用事件冒泡原理，把本来绑定给某个元素的事件委托给它的父级(已经存在页面元素)处理。
影响页面性能的三大操作

• 频繁操作dom节点
• 过多的事件绑定
• 页面请求过多

事件源对象:获取到触发事件的元素 (event.target)

 var target =  e.target || e.srcElement    //兼容写法

阻止浏览器默认行为

1. 链接跳转

2. 表单提交

3. 右键菜单

4. 文本的选择

标准浏览器写法：event.preventDefault();

IE8浏览器写法：event.returnValue = false;

e.preventDefault ? e.preventDefault() : e.returnValue = false; //阻止浏览器默认行为兼容写法

事件捕获

1. 事件的执行阶段：事件冒泡、事件捕获，先捕获再冒泡

2. 同一元素的同一事件只能在其中一个阶段执行

3. 默认情况下，事件的执行都是默认在冒泡阶段执行
   

事件的绑定方式

1. html属性[οnclick=“函数名(实参)”] 不推荐使用，维护不方便，调用数据困难

2. “on”+type :

   ele.onclick = 函数名;

   ele.onclick = function(){}

   只能在冒泡阶段执行,只能给同一个元素绑定一个相同事件

3. 事件监听器

   (1) ele.addEventListener(type,fn,isCapture) ==>标准浏览器

      type 事件类型

      fn 函数

      isCapture 是否捕获，若为true为捕获阶段，默认为false冒泡阶段

      允许给同一个元素添加多个相同事件

   (2) ele.attachEvent(“on”+type,fn) ==>ie8-不支持捕获

//备注：绑定事件的兼容写法：
function bind(ele,type,fn,isCapture){
​    if(ele.addEventListener){
​        ele.addEventListener(type,fn,isCapture);
​    }else if(ele.attachEvent){
​        ele.attachEvent("on"+type,fn);
​    }else{
​        ele["on"+type] = fn;
​    }
}

4. 取消事件绑定

   (1) ele[“on”+ type] = null

//例如
ele.onclick = null

   (2) ele.removeEventListener(type,fn)

移除事件的函数与添加事件的函数必须是同一个，才可以移除

   (3) ele.detachEvent(“on”+type,fn) IE8浏览器

传入的参数fn要跟添加时一样，否则不能移除事件

拖拽的思路

原理：鼠标按下且移动鼠标时，改变当前元素的top，left值

1. 给目标元素添加onmousedown事件

• 拖拽的前提是目标元素设置css定位
• 记录按下鼠标位置与元素左上角的偏移量offsetX，offsetY

2. 当onmousedown发生以后，此刻给document添加onmousemove事件

• 意味着此刻鼠标在网页的移动都将改变目标元素的位置
• 在onmousemove事件中，设定目标元素的left和top：

公式
目标元素的left = 鼠标的clientX – offsetX
目标元素的top = 鼠标的clientY– offsetY

3. 给目标元素添加onmouseup事件，清空document的onmousemove事件

意味着拖动过程中鼠标在网页的任意位置松开鼠标，都会放弃拖拽的效果