前端开发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集合|中国前端开发人员年龄

» 本文来自:前端开发者 » 《前端开发JS常用事件总结》
» 本文链接地址:https://www.rokub.com/4241.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!