前端开发JS常用事件总结

前端开发常用词汇|前端开发常用英语词汇|前端开发常用命名

鼠标事件

鼠标移动到目标元素上的那一刻，首先触发mouseover
之后如果光标继续在元素上移动，则不断触发mousemove
如果按下鼠标上的设备(左键,右键,滚轮……)，则触发mousedown
当设备弹起的时候触发mouseup
目标元素的滚动条发生移动时(滚动滚轮/拖动滚动条。。)触发scroll
滚动滚轮触发mousewheel，这个要区别于scroll
鼠标移出元素的那一刻，触发mouseout

键盘事件

keydown 事件会在键盘按下时触发。
keypress 事件会在敲击按键时触发，我们可以理解为按下并抬起同一个按键。(同鼠标事件的click)
keyup 事件会在按键释放时触发，也就是你按下键盘起来后的事件。
获取键值ev.keyCode,对应的键值可以自己alert一下

手机端触屏事件

touchstart：触摸开始的时候触发

touchmove：手指在屏幕上滑动的时候触发

touchend：触摸结束的时候触发

而每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的一系列触摸点（用来实现多点触控）：

touches：当前位于屏幕上的所有手指的列表。

targetTouches：位于当前DOM元素上手指的列表。

changedTouches：涉及当前事件手指的列表。

每个触摸点由包含了如下触摸信息（常用）：

identifier：一个数值，唯一标识触摸会话（touch session）中的当前手指。一般为从0开始的流水号（android4.1，uc）

target：DOM元素，是动作所针对的目标。

pageX/pageX/clientX/clientY/screenX/screenY：一个数值，动作在屏幕上发生的位置（page包含滚动距离,client不包含滚动距离，screen则以屏幕为基准）。

radiusX/radiusY/rotationAngle：画出大约相当于手指形状的椭圆形，分别为椭圆形的两个半径和旋转角度。

事件注册

平常我们绑定事件的时候用dom.onxxxx=function(){}的形式
这种方式是给元素的onxxxx属性赋值，只能绑定有一个处理句柄。
但很多时候我们需要绑定多个处理句柄到一个事件上，而且还可能要动态的增删某个处理句柄
下面的事件注册方式就能解决这个需求。

下面有四种方法：

//IE除外

target.addEventListener(type,listener,useCapture)
target.removeEventListener(type,listener,useCapture);
target ：文档节点、document、window 或 XMLHttpRequest。
type ：字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等。
listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。
useCapture ：是否使用捕捉，一般用 false。默认是冒泡。

//IE

target.attachEvent(type,listener)
target.detachEvent(type, listener);
target ：文档节点、document、window 或 XMLHttpRequest。
type ：字符串，事件名称，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。
listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。

两者使用的原理：可对执行的优先级不一样，实例讲解如下：
ele.attachEvent(“onclick”,method1);
ele.attachEvent(“onclick”,method2);
ele.attachEvent(“onclick”,method3);
执行顺序为method3->method2->method1
ele.addEventListener(“click”,method1,false);
ele.addEventListener(“click”,method2,false);
ele.addEventListener(“click”,method3,false);
执行顺序为method1->method2->method3

兼容后的方法

function addEvent(elem,type,func){
if(elem.attachEvent){
elem.attachEvent(‘on’+type,func);
}
else{
elem.addEventListener(type,func,false);
}
}

function removeEvent(elem,type,func){
if(elem.attachEvent){
elem.detachEvent(‘on’+type,func);
}
else{
elem.removeEventListener(type,func,false);
}
}

获取事件对象和事件源

function eventHandler(ev){
//获取事件对象
ev = ev || window.event; //IE和chrome是window.event,FF是ev
//获取事件源
var target = ev.target || ev.srcElement; //IE和chrome是srcElement, FF是target
}

取消事件默认行为(例如点击一个<a>后不跳转页面而是执行一个函数)

function(ev){
var ev = ev || window.event;
if(ev.preventDefault){
ev.preventDefault(); //IE除外
}else{
e.returnValue = false;//IE
//注意：这个地方是无法用return false代替的
//return false只能取消元素
}
}

事件冒泡与事件捕获（事件流：捕获阶段–>处理阶段–>冒泡阶段）

1)无子元素或有子元素却只给父元素绑定了事件，事件按照先来先执行的顺序执行

<div id=”out” style=”width: 200px;height: 200px;background: red”>
<div id=”inner1″ style=”width: 100px;height: 100px;background: blue”></div>
</div>

var a = document.querySelector(‘div#out’);
var b = document.querySelector(‘div#inner1’);
a.addEventListener(‘click’,function(e){
alert(‘a在冒泡阶段’)
},false);
a.addEventListener(‘click’,function(e){
alert(‘a在捕获阶段’)
},true);

先执行冒泡在执行捕获

2) 有子元素并且父子元素都绑定了事件，先执行捕获再执行冒泡，验证了w3c标准

        var a = document.querySelector('div#out');
        var b = document.querySelector('div#inner1');

        a.addEventListener('click',function(e){
            alert('a在冒泡阶段')
        },false);
        a.addEventListener('click',function(e){
            alert('a在捕获阶段')
        },true);

        b.addEventListener('click',function(e){
            alert('b在冒泡阶段')
        },false);
        b.addEventListener('click',function(e){
            alert('b在捕获阶段')
        },true);

a捕获–>b冒泡–>b捕获–>a冒泡

阻止事件冒泡

function myPropagation(){
var ev = ev || window.event;
if(ev.stopPropagation){
ev.stopPropagation(); //IE除外
}
else{
ev.cancelBubble = true; //IE
}
}

事件委托

顾名思义，事件委托就是某件事自己不做，却让别人替你做（人品真是次，平时最不喜欢这样的人，可是在js里他却是件好事，好处多多）。
一般来说，都会把事件委托在容器元素上，通过判断target的nodeName来判断是否操作子元素。
好处：
1.提高性能
如果你需要给1000个li绑定事件，需要用for绑定1000次，而用事件委托的话，只需绑定一次。
2.动态增加元素的元素也会自动带上绑定的事件。

前端开发的简历模版|前端开发常用api集合|中国前端开发人员年龄