1.1 事件
事件:是可以被js检测到的行为,实质上是一种交互操作。
例如:我们可以给某按钮添加一个【onClick点击事件】,当用户对按钮发生点击时来触发某个函数。
事件的作用:
(1)各个元素之间可以借助事件来进行交互
(2)用户和页面之间也可以通过事件来交互
(3)后端和页面之间也可以通过事件来交互(减缓服务器的压力)
ps:注意:事件通常与函数配合使用,当事件发生时函数才会执行。
1.2 事件传播/事件传递/事件流
一个事件发生后,会在子元素和父元素之间传播(propagation)。这种传播分成三个阶段
第一阶段:从window对象传导到目标节点(上层传到底层),称为“捕获阶段”(capture phase)。
第二阶段:在目标节点上触发,称为“目标阶段”(target phase)。
第三阶段:从目标节点传导回window对象(从底层传回上层),称为“冒泡阶段”(bubbling phase)。
w3c规定:事件冒泡+事件捕获+事件真正的触发者等各个分支构成了js的事件机制。
ps:如没有特殊情况,均采用事件冒泡。
ps:HTML事件采用冒泡机制来处理事件。即
点击d2时会先执行d2的绑定事件(即执行test2函数)。
然后采用事件冒泡将事件传递给上一级DOM节点d1,然后d1执行自己的绑定事件。
ps:函数执行的顺序按照绑定事件时函数的顺序为准
HTML事件缺陷:耦合性太强了,修改一处另一处也要修改。
当函数没有加载成功时,用户去触发事件,则会报错。
2.2 DOM0级事件
在js脚本中,直接通过【on+事件名】方式绑定的事件称为是DOM0级事件。
语法:元素.on+事件名 = function(){需要执行的语句;}
例如:
btn.onclick = function () {console.log(‘按钮被点击’);};
ps:以冒泡机制来处理事件,不存在兼容的问题
DOM0级事件的移除方式:元素. on+事件名=null;eg:btn.οnclick=null;
2.3 DOM2级事件
在js脚本中,通过addEventListener函数绑定的事件称为是DOM2级事件。
语法:元素.addEventListener(type,listener,useCapture)
type:事件类型。【没有on!没有on!没有on!】
listener:监听函数,绑定的函数
useCapture:是否使用捕获机制。如果不写,默认值为false
false:冒泡机制
true:捕获机制
注意:DOM2级事件可以绑定多个函数,执行顺序按照函数书写的顺序。
DOM2级事件的移除方式: node.removeEventListener(type,外部函数名,useCapture)
eg:btn.removeEventListener('click',test,true);
ps:DOM2级事件中如果绑定函数为【匿名函数】则无法删除。能够删除的只能是外部函数。
pss:第三个参数默认可以不写,默认是false。但是如果删除的是捕获事件,则必须写为true才可以。
3.IE浏览器中的【事件绑定】
(1)HTML事件处理程序:等同于非IE
(2)DOM0级事件:等同于非IE
(3)DOM2级事件:
在js脚本中,通过attachEvent函数绑定事件
语法:元素.attachEvent(type,listener)
type:事件类型。【有on!有on!有on!】 listener:监听函数,绑定的函数 注意:如果绑定多个函数,按照函数书写的倒叙执行。
IE下DOM2级事件的移除方式:
元素.detachEvent(type,listener) eg: function test() {alert(111);}
d1.attachEvent("onclick",test);
d1.detachEvent('onclick',test);
ps:匿名函数无法被移除。
4.解决浏览器中关于【事件绑定】兼容性问题
由于【IE浏览器中的事件绑定】和【非IE浏览器中的事件绑定】方式方法都有所不同。所以单一的某种函数都不能完美解决不同浏览器下的方法绑定问题。那么我们又应该如何面对在不同浏览器下【事件绑定】这个问题的解决方案呢? 以下为解决方案的思路。绑定事件时: 如果能使用addEventListener方法绑定的,就采用本方法 否则采用attachEvent方法绑定
解绑事件时: 如果能采用addEventListener方法绑定的,就采用removeEventListener方法解绑 否则采用detachEvent方法解绑
var Event = {
addEvent: function (ele, type, handler) {
if (ele.addEventListener) {ele.addEventListener(type, handler);}
else if (ele.attachEvent) {ele.attachEvent('on' + type, handler);}
else {ele['on' + type] = handler;}
},
removeEvent: function (ele, type, handler) {
if (ele.addEventListener) {ele.removeEventListener(type, handler);}
else if (ele.attachEvent) {ele.detachEvent('on' + type, handler);}
else {ele['on' + type] = null;}
}
};
function test() {alert('点击事件');}
Event.addEvent(document.querySelector('div'), 'click', test);
5.鼠标事件
js鼠标事件是指通过鼠标一系列操作(如进入,点击等)来触发的事件。
(1)鼠标事件类型
鼠标单击是触发:click
鼠标双击是触发:dblclick
鼠标按下时触发:mousedown
鼠标抬起时触发:mouseup
鼠标移动时触发:mousemove
鼠标移入时触发(不冒泡): mouseenter
鼠标移出时触发(不冒泡): mouseleave
鼠标移入时触发(冒泡): mouseover
鼠标移出时触发(冒泡): mouseout
语法:元素.on+鼠标事件名称 = 调用函数
例如:d1.ondblclick = function () { console.log('这是d1');};
(2)鼠标事件原则
a.鼠标的基本事件默认采用冒泡传递
b.可以给一个元素添加多个不同的鼠标事件,不同的鼠标事件之间互不影响
c.mouseenter和mouseleave两个事件不冒泡触发。
6.文档事件
文档事件中主要是指添加给整个文档的事件。在这一类事件中,绝大部分并不需要用户主动去进行调用。而是通过文档的不同状态来进行自动执行。
(1)加载成功\失败事件:load\error
load事件指的是:节点加载成功时自动发生回调事件
error事件值得是:节点加载失败时自动发生的回调事件
语法: node.onload = func(){};
元素加载失败时触发的操作,只需要给指定元素一个.onerror属性即可
var mylink = document.getElementsByTagName(“link”).item(0);
mylink.onerror = function () {
console.log('css文件加载出问题了');
(2)当DOM加载完成时触发事件:DOMContentLoaded
DOMContentLoaded事件和load事件的区别是触发的时机不一样,先触发DOMContentLoaded事件,后触发load事件。DOM文档加载的步骤为: 解析HTML结构。 加载外部脚本和样式表文件。 解析并执行脚本代码。 DOM树构建完成。 //DOMContentLoaded执行 加载图片等外部文件。页面加载完毕。 //load执行
因此样式文件的加载会阻塞脚本的执行。所以如果你把一个内部脚本<script>元素放在了一个<link>后面,如果页面没有完成解析则脚本不会触发,直到样式文件加载完成之后.(这种情况被称为文件阻塞)
(3)文档加载状态判断事件:readystatechange
当document的readyState改变时触发这个事件(仅第二阶段)。 众所周知,document节点中拥有一个属性叫做readyState。其拥有三个可能值:loading:加载DOM中 interactive:加载外部资源 complete:加载完成 而readystatechange事件正是在这个状态发生改变时调用的事件。 调用方式可以用DOM0也可以用DOM2来绑定。
(4)文档大小发生改变时的回调事件:resize
window.onresize = function(){
console.log('width:'+document.documentElement.clientWidth);
console.log('height:'+document.documentElement.clientHeight);
};但是美中不足的是,js中为了追求变化的敏感度。将resize事件的响应事件设置为了0。也就是说每一次的文档大小改变都会立即调调用本事件。 这就造成了【一次变化】却发生了【不止一次】的resize事件调用。 所以为了解决这个问题,我们可以采用一种延迟的写法来实现。
【失去焦点事件blur】与【获得焦点事件focus】
焦点:js当前正在和用户发生交互的节点称为焦点。可以类比为人类目光汇聚的地方。
语法:获得焦点和失去焦点事件既可以使用DOM0绑定也可以使用DOM2绑定
i1.addEventListener('focus', function () {console.log('i1捕获事件');}, true);
i1.addEventListener('blur', function () {console.log('i1捕获事件');}, true);
i2.onfocus = function () {console.log("i2获得了焦点")};
i2.onblur = function () {console.log("i2失去了焦点")};
注意: 这两个事件均不支持事件冒泡(只有当前节点发生调用)。 如果需要连续多次的触发,则需要使用DOM2级绑定事件中的捕获事件来达到。
1.2 滚动事件scroll
scroll事件会在【文档】或【元素】发生滚动操作时触发。
【文档发生滚动时】 属性scrollTop\scrollLeft表示文档滚动的距离:(没有单位)
IE:document.documentElement.scrollTop\Left 非IE:document.body.scrollTop\Left
(可以使用document.body.scrollTop||document.documentElement.scrollTop来解决兼容性)
【元素发生滚动时】
元素发生滚动时并不存在兼容性的问题,但是需要有一个前提那就是:必须存在滚动条。
(元素的滚动条属性可以同过overflow:scroll/overflow-x:scroll/overflow-y:scroll来实现)
在元素发生滚动的时候,可以通过【元素.scrollTop/scrollLeft】获取到元素的位移距离。
特别注意:
(1)刚刚我们提到的scrollTop属性和scrollLeft属性都是一个可读可写的属性。
(2)赋值时直接使用’=’即可,不需要加单位
(3)若赋的值大于【最大滚动距离】,则按照最大滚动距离为准。
3.键盘事件
3.1 键盘事件种类
键盘事件是指当用户在操作键盘的时候会自动被触发的事件,通常有以下三种:
(1) keydown:用户按下任意键都可以触发这个事件。如果按住不放,事件会被连续触发。
(2) keypress:用户按下任意键都可以触发这个事件(功能键除外)。如果按住不放,事件会被连续触发
(3) keyup: 用户释放按键时触发
ps:键盘事件一般绑定在需要用户输入的元素上(例如input),但是由于键盘事件默认采用事件冒泡机制,因此将键盘事件直接绑定在body之上也是允许的。
3.2 键盘事件中提供的属性
在键盘事件中可以通过event.keycode来获取按下按键的编码值。
input1.onkeydown = function () {
console.log("down:"+event.keyCode);
};
ps:因此我们可以通过这个属性来获取到,在页面中用户曾按下过哪些按键。
pss:常见的按键编码【回车:13】【backspace:8】
3.3 keydown和keypress事件的区别
(1)keyPress主要用来捕获:数字(包括Shift+数字的符号)、字母(包括大小写)、小键盘等能够显示在屏幕中的字符。但是不能对系统功能键(例如:后退、删除等,其中对中文输入法不能有效响应)进行正常的响应
而KeyDown和KeyUp通常可以捕获键盘除了PrScrn所有按键(这里不讨论特殊键盘的特殊键)
(2)捕获字符长度区别
KeyPress只能捕获单个字符
KeyDown和KeyUp可以捕获组合键。
(3)捕获字符大小写识别区别
KeyPress可以捕获单个字符的大小写
KeyDown和KeyUp对于单个字符捕获的KeyCode都是一个值,也就是不能判断单个字符的大小写。
(4)捕获字符数字区别
KeyPress不区分小键盘和主键盘的数字字符。
KeyDown和KeyUp区分小键盘和主键盘的数字字符。
(5)特殊情况
PrScrn按键KeyPress、KeyDown和KeyUp都不能捕获。
上下左右等功能键的keydown、keyup都能获取keyCode,并且值相等。
(4)捕获字符数字区别
KeyPress不区分小键盘和主键盘的数字字符。
KeyDown和KeyUp区分小键盘和主键盘的数字字符。
一些常见的键盘按键编码:
4.手机触摸事件
4.1 手机触摸事件
(1)touchstart:当手指触摸屏幕时触发;即使已经有一个手指放在了屏幕上也会触发。
(2)touchmove:当手指在屏幕上滑动时连续的触发。
(3)touchend:当手指从屏幕上移开时触发。
(4)*touchcancel:当系统停止跟踪触摸时触发。(如电话接入或者弹出信息,一般在这个操作中来做一些暂停游戏类的操作 或者点击通知)
div.addEventListener('touchstart',function () {console.log("touches began");});
div.addEventListener('touchend',function () {console.log("touches end");});
div.addEventListener('touchmove',function (event) {console.log("touches move");});
div.addEventListener('touchcancel',function(event){console.log("cancel");});
ps:如非特殊说明,事件均为冒泡事件
pss:手机触摸事件必须使用dom2来进行绑定
psss:可以给一个元素添加多个触摸事件
4.2 【事件对象】的属性
事件对象,即【事件触发的时】用来保存【事件相关的所有信息的对象】。
事件对象基本都是系统为我们自动生成,不必手动创建。
以上事件都存在事件对象:
div.addEventListener('touchstart',
function (event) {
console.log("touches began");
}
);
(1)touches:表示当前跟踪的触摸操作的Touch对象的数组(当前屏幕上所有的触摸点列表)。
(2)targetTouches:特定于事件目标的Touch对象的数组(当前对象上所有的触摸点列表)。
(3)changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组(涉及当前事件的触摸点列表)。
4.3 【触摸对象】的属性
触摸对象,即【事件对象的touches属性】中的每一个元素。
一次触摸会创建一个触摸对象。
触摸对象中提供了很多属性方便我们获取和使用:
clientX:触摸目标在视口中的X坐标。
clientY:触摸目标在视口中的Y坐标。
identifier:表示触摸的唯一ID。
pageX:触摸目标在页面中的x坐标。
pageY:触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
target:触摸的DOM节点坐标
通常情况下都会在触摸事件被触发的时候,通过这两个属性来获取当前节点的位置。
6.this对象
概念:
this代表【函数运行时】【自动生成的】一个【用来指代函数调用者】的对象,this只能在函数内部使用。
eg:
function test(){
console.log(this);
}
test();//指向window,因为函数的调用者默认是window
document.addEventListener(‘click’,test);//指向document节点
document.querySelector(‘div’).addEventListener(‘click’,test);//指向div节点
根本原则:函数的调用者是谁,this就是谁
this对象的注意事项: HTML 级事件:this指向window
DOM0级事件:this指向绑定事件的这个元素
DOM2级事件:this指向绑定事件的这个元素(非IE) this指向window(IE)
1.1 event对象
概念:当dom tree中某个事件被触发的时候,会同时自动产生一个用来描述事件所有的相关信息(比如出发事件的元素、或者是事件的类型)的对象,这个对象就是event(事件对象)。
获取方式:
(1)直接通过event来获取
(2)还可以通过函数传参数的形式来使用,一般而言我们使用【形参e或event】来代替
1.2 event中常用的属性和方法
因为event对象是用来描述【发生的事件的信息】的,而event对象当中所提供的一系列属性和方法正是用来获取这些信息的途径。
【bubbles 属性】
bubbles属性用来获得【当前触发事件的类型】是否冒泡,如果当前事件类型支持冒泡则返回true,否则返回false。
必须注意的是:bubbles属性指的是该事件是否冒泡。和事件处理机制无关!!!!
document.getElementById(“d1”).onclick = function () {
console.log(event.bubbles);
};
document.getElementById(“d1”).addEventListener('mouseenter',function (e) {
console.log(e.bubbles);
});
因为鼠标【点击事件】这个事件本身支持冒泡。
因此当存在点击事件被触发后,event对象的bubbles属性返回的就是true,表示当前事件支持冒泡。
但绝不是把这个事件以冒泡的形式继续传递下去!
【eventPhase 属性】
eventPhase:事件传导至【当前节点】时处于什么的状态。
1:事件处于捕获状态
2:事件处于真正的触发者
3:事件处于冒泡状态
【target 属性和 currentTarget 属性】
target:返回事件真正的触发者
currentTarget:返回事件的监听者(触发的事件绑定到了哪个节点,就返回谁)
【stopPropagation() 方法】
event对象中提供了一个名为stopPropagation的方法。用来阻止事件从当前节点传播到下一个节点。
【preventDefault() 方法】event对象中提供了一个名为preventDefault的方法,用来取消当前节点的默认行为(譬如超级链接的点击跳转行为)。该方法没有返回值
【cancelable() 方法】
event对象中提供了一个名为cancelable的方法,用来判断当前节点能否使用preventDefault方法来取消默认行为。如果可以则返回true,否则返回false。
【returnValue 属性】
returnValue属性用来设置【是否取消当前节点的默认行为】
作用类似于非IE下的preventDefault方法
语法:
event.returnValue = false;(取消默认行为)
event.returnValue = true;(默认值)
4.鼠标滚轮事件
滚轮就是鼠标上的滚轮,它滚动的时候触发事件
onmousewheel就是鼠标滚动事件,mouse鼠标,wheel就是轮子。
event参数最最重要的事就event.wheelDelta属性,表示滚动的方向。这是浏览器的规定:
鼠标往上滚, 120
鼠标往下滚, -120
火狐浏览器不兼容,火狐使用自己的专用事件DOMMouseScroll ,并且这个事件只能通过标准的DOM2级的事件绑定方式添加。
火狐添加的事件,是它自己的专门事件DOMMouseScroll,
表示滚动方向的事件的属性叫做event.detail。
detail就是细节的意思。反着的,滚动方向往上,-3;滚动方向往下,3。
4.event中的一些其他属性
(1)返回事件触发点距离视口的距离
e.clientX
e.clientY
(2)返回事件触发点距离页面的距离e.clientx+滚过的距离
e.pageX
e.pageY
ps:以上2个方法一个计算滚动条一个不计算滚动条
(3)返回事件触发点距离屏幕的距离
e.screenX
e.screenY
(4)e.button:返回按下了鼠标的哪个键
非IE中 左中右代表数字为0 1 2
而IE中 左中右代表数字为1 4 2