Event事件

Event事件

1什么是事件

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

1.1事件的绑定方式

格式：元素.on+事件名 = 事件处理程序，如div.onclick = function(){}。

1.2事件的类型

1.2.1鼠标事件

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

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

onmousedown 鼠标按钮被按下。

onmouseup 鼠标按键被松开。

onmouseover 鼠标移到某元素之上。

onmouseout 鼠标从某元素移开。

onmousemove 鼠标被移动时触发。

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

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

oncontextmenu 鼠标右键菜单展开时触发。

PS：click = mousedown + mouseup, dblclick = click*2(短时间内两次单击);
执行顺序：mouseover=>mouseenter; mouseout => mouseleave

1.2.2键盘事件

onkeydown 某个键盘按键被按下。

onkeyup 某个键盘按键被松开。

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

1.2.3 UI事件

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

onbeforeunload 用户退出页面。

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

1.2.4表单事件

onselect 输入框文本被选中。

onblur 元素失去焦点时触发。

onfocus 元素获得焦点时触发。

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

onreset 重置按钮被点击。

onsubmit 确认按钮被点击。

oninput 输入字符时触发。

1.2.5其他事件

2 Event对象

2.1什么是Event对象

事件执行过程中的状态，用来保存当前事件的信息对象。

2.2如何获取Event对象

标准：事件处理函数的第一个参数，

div.onclick = function(e){}；

其中e包含了事件发生的所有对象。

IE8-：window.event；

获取event对象的兼容写法: e = e || window.event; 。

2.3 Event对象详情

2.3.1鼠标/键盘事件Event属性

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

1.W3C标准：
0: 代表鼠标按下了左键；
1: 代表按下了滚轮；
2: 代表按下了右键。

div.onmousedown = function(e){

}

其中e.button的返回值为判定哪个鼠标按钮被点击。

2.IE8-（IE8以下的浏览器）：
1：鼠标左键； 2：鼠标右键； 3：左右同时按； 4：滚轮； 5：左键加滚轮； 6：右键加滚轮； 7：三个同时。

2.3.1.2 which/keyCode

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

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

2.3.1.3 altKey

返回当事件被触发时，”ALT” 是否被按下。

2.3.1.4 ctrlKey

返回当事件被触发时，”CTRL” 键是否被按下。

2.3.1.5 shiftKey

返回当事件被触发时，“Shift” 键是否被按下。

2.3.2光标位置信息

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

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

pageX/pageY:鼠标相对于文档的位置（包括滚动条滚动的距离，即：clientX+window.scrollX，IE8-不支持）。

offsetX,offsetY: 光标相对于事件源对象的相对偏移量。

事件源对象：触发事件的对象，当绑定事件的对象为父元素时，当鼠标移动子元素上，由于事件冒泡的原理，此时源对象变为子元素。

2.4 阻止浏览器的默认行为

浏览器默认行为包括：链接跳转，表单提交，右键菜单...

标准：event.preventDefault();

IE8-：event.returnValue = false;

3 事件传播

3.1事件源对象

事件源对象为触发事件的元素，事件源对象在事件传播过程中不会改变。

标准：event.target;
IE8-：event.srcElement;

兼容性写法：

var target = event.target || event.srcElement

3.2阻止事件的传播

标准：event.stopPropagation();
IE8-：event.cancelBubble = true;
1）不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload…。
2）冒泡到最顶层的目标不同。大部分浏览器到window对象，IE8-到document对象。

3.3 事件冒泡

事件冒泡：在一个对象上触发某类事件（如onclick事件），那么click事件就会沿着DOM树向这个对象的父级传播，从里到外，直至它被处理程序处理，或者事件到达了最顶层（document/window）。

3.3.1事件委托

事件委托利用事件冒泡的原理,把原本绑定给子元素的事件，委托给父级去处理。这种方法可以减少事件的绑定量，提高运行速度。

3.4事件监听与捕获（反冒泡）

3.4.1事件监听器

格式：元素.addEventListener(事件名,事件处理函数,是否捕获)。

target.addEventListener("click", fn, false);

1.可以绑定多个处理函数在一个对象上, 执行顺序按照绑定的顺序来。

不同元素事件执行顺序跟html结构有关；

相同元素事件执行顺序跟绑定先后有关。

2.第三个参数是否使用捕获(反向冒泡)，默认false，为冒泡。

3.IE8-的事件监听器：
格式：元素.attachEvent(on+事件名,事件处理函数)；
target.attachEvent("onclick",fun);
可以绑定多个函数在一个对象上, 执行顺序按照绑定的反序。

4移除事件

4.1 ele.addEventListener事件移除

标准：removeEventListener(‘click’,fn, true)传入的参数fn要跟添加时一样(同一个函数)，否则不能移除事件。

IE8-：detachEvent(‘onclick’,fun)，传入的参数fun要跟添加时一样，否则不能移除事件。

注意：页面事件绑定数量越多，越影响性能（速度越慢）。

4.2DOM绑定方式事件移除

如，e.οnclick=function(){};

移除，e.onclick = null;

5拖拽效果

5.1拖拽的原理

鼠标按下且移动鼠标时，改变当前元素的top,left值。

5.2拖拽的思路

1.给目标元素添加onmousedown事件，拖拽的前提是目标元素设置css定位；

记录按下鼠标位置与元素左上角的偏移量offsetX，offsetY。

2.当onmousedown发生以后，此刻给document添加onmousemove事件，意味着此刻鼠标在网页的移动都将改变目标元素的位置；在onmousemove事件中，设定目标元素的left和top：

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

3.给目标元素添加onmouseup事件，清空document的onmousemove事件，意味着拖动过程中鼠标在网页的任意位置松开鼠标，都会放弃拖拽的效果。