javascript事件1尚学堂百战程序员-html event

HTMLevent事件课程介绍课程大纲1.事件概述2.非IE浏览器中的【事件绑定】3.IE浏览器中的【事件绑定】4.解决浏览器中关于【事件绑定】兼容性问题5.鼠标事件6.文档事件1.事件概述1.1事件1.2事件传播 事件：是可以被js检测到的行为，实质上是一种交互操作。 例如：我们可以给某按钮添加一个【onClick点击事件】，当用户对按钮发生点击时来触发某个函数。

事件的作用：

(1)各个元素之间可以借助事件来进行交互

(2)用户和页面之间也可以通过事件来交互

(3)后端和页面之间也可以通过事件来交互（减缓服务器的压力）

ps：注意：事件通常与函数配合使用，当事件发生时函数才会执行。1.1事件第一阶段：从window对象传导到目标节点（上层传到底层），称为“捕获阶段”（capturephase）。第二阶段：在目标节点上触发，称为“目标阶段”（targetphase）。第三阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”（bubblingphase）。1.2事件传播/事件传递/事件流一个事件发生后，会在子元素和父元素之间传播（propagation）。这种传播分成三个阶段示意图：w3c规定：事件冒泡+事件捕获+事件真正的触发者等各个分支构成了js的事件机制。ps：如没有特殊情况，均采用事件冒泡。练习：<divid='div1'> <divid='div2'> <divid='div3'> </div> </div></div>1.给上述模块添加冒泡事件,点击某个div的时候能够让事件逐级向上传递。用alert表示事件调用。2.给上述模块添加捕获事件,点击某个div的时候能够让事件逐级向下传递。用alert表示事件调用。2.非IE浏览器中的【事件绑定】2.1HTML事件2.2DOM0级事件2.3DOM2级事件绑定操作发生在HTML代码中的事件，称为HTML事件。 语法：on+事件=‘函数();函数();函数();……‘

例如：

<divclass="d1"onclick="test1();test2()"> <divclass="d2"onclick="test2()"></div>

</div> 在上述HTML代码中，分别给d1和d2绑定了效果不同的HTML事件。

ps：HTML事件采用冒泡机制来处理事件。即 点击d2时会先执行d2的绑定事件（即执行test2函数）。 然后采用事件冒泡将事件传递给上一级DOM节点d1，然后d1执行自己的绑定事件。

pss：函数执行的顺序按照绑定事件时函数的顺序为准2.1HTML事件HTML事件的移除方式：

元素.setAttribute('on+事件名'，null); eg:d1.setAttribute('onclick',null);HTML事件缺陷：耦合性太强了，修改一处另一处也要修改。 当函数没有加载成功时，用户去触发事件，则会报错。练习：通过HTML事件方式，给一个按钮添加点击事件。在js脚本中，直接通过【on+事件名】方式绑定的事件称为是DOM0级事件。 语法：元素.on+事件名=function(){需要执行的语句;}

例如：

btn.onclick=function(){console.log(‘按钮被点击’);};ps：以冒泡机制来处理事件，不存在兼容的问题2.2DOM0级事件DOM0级事件的移除方式：

元素.on+事件名=null; eg:btn.onclick=null;DOM0级事件缺陷： 一次只能绑定一个触发函数。如果同时绑定多个触发函数，则以最后一个为准。 btn.onclick=function(){console.log(‘按钮被点击11111’);}; btn.onclick=function(){console.log(‘按钮被点击22222’);}; btn.onclick=function(){console.log(‘按钮被点击66666’);};点击按钮触发函数是最后一个，输出66666。练习：通过DOM0级事件方式，给一个按钮添加点击事件。在js脚本中，通过addEventListener函数绑定的事件称为是DOM2级事件。 语法：元素.addEventListener(type,listener,useCapture)

type:事件类型。【没有on！没有on！没有on！】

listener:监听函数，绑定的函数

useCapture:是否使用捕获机制。如果不写，默认值为false

false:冒泡机制

true：捕获机制

注意:DOM2级事件可以绑定多个函数，执行顺序按照函数书写的顺序。 例如：

btn.addEventListener('click',function(){console.log('d2');},true); btn.addEventListener('click',function(){console.log('d22');},true); 上述代码表示给btn节点添加了两个dom2级点击事件。事件传递采用事件捕获方式传递。2.3DOM2级事件DOM2级事件的移除方式：

node.removeEventListener(type,外部函数名,useCapture) eg：btn.removeEventListener('click',test,true);ps：DOM2级事件中如果绑定函数为【匿名函数】则无法删除。能够删除的只能是外部函数。 //绑定匿名函数

d1.removeEventListener(‘click’,function(){console.log(‘d1’);},true);

//绑定外部函数

functiontest(){console.log('d1');}

d1.addEventListener('click',test,true);

d1.removeEventListener('click',test,true);pss：第三个参数默认可以不写，默认是false。但是如果删除的是捕获事件，则必须写为true才可以。练习：通过DOM2级事件方式，给一个按钮添加点击事件。3.IE浏览器中的【事件绑定】(1)HTML事件处理程序：等同于非IE

(2)DOM0级事件：等同于非IE

(3)DOM2级事件：在js脚本中，通过attachEvent函数绑定事件 语法：元素.attachEvent(type,listener)

type:事件类型。【有on！有on！有on！】

listener:监听函数，绑定的函数

注意:如果绑定多个函数，按照函数书写的倒叙执行。 例如：

btn.attachEvent("onclick",function(){alert(111);} btn.attachEvent("onclick",function(){alert(222);} 上述代码表示给btn节点添加了两个dom2级点击事件。先执行222，再执行111。IE下DOM2级事件的移除方式：

元素.detachEvent(type,listener) eg: functiontest(){alert(111);}

d1.attachEvent("onclick",test);

d1.detachEvent('onclick',test);ps：匿名函数无法被移除。练习：在IE浏览器下，通过三种事件绑定方式，分别给一个按钮添加点击事件。4.解决浏览器中关于【事件绑定】兼容性问题 由于【IE浏览器中的事件绑定】和【非IE浏览器中的事件绑定】方式方法都有所不同。所以单一的某种函数都不能完美解决不同浏览器下的方法绑定问题。 那么我们又应该如何面对在不同浏览器下【事件绑定】这个问题的解决方案呢？ 以下为解决方案的思路。 绑定事件时： 如果能使用addEventListener方法绑定的，就采用本方法 否则采用attachEvent方法绑定

解绑事件时： 如果能采用addEventListener方法绑定的，就采用removeEventListener方法解绑 否则采用detachEvent方法解绑varEvent={

addEvent:function(ele,type,handler){ if(ele.addEventListener) {ele.addEventListener(type,handler);} elseif(ele.attachEvent) {ele.attachEvent('on'+type,handler);} else{ele['on'+type]=handler;} }, removeEvent:function(ele,type,handler){ if(ele.addEventListener) {ele.removeEventListener(type,handler);} elseif(ele.attachEvent) {ele.detachEvent('on'+type,handler);} else{ele['on'+type]=null;}

}

};functiontest(){alert('点击事件');}

Event.addEvent(document.querySelector('div'),'click',test);5.鼠标事件(1)鼠标事件类型(2)鼠标事件原则js鼠标事件是指通过鼠标一系列操作（如进入，点击等）来触发的事件。(1)鼠标事件类型鼠标单击是触发：click

鼠标双击是触发：dblclick鼠标按下时触发：mousedown

鼠标抬起时触发：mouseup鼠标移动时触发：mousemove

鼠标移入时触发(不冒泡)：mouseenter鼠标移出时触发(不冒泡)：mouseleave

鼠标移入时触发(冒泡)：mouseover鼠标移出时触发(冒泡)：mouseout语法：元素.on+鼠标事件名称=调用函数例如：d1.ondblclick=function(){console.log('这是d1');};(2)鼠标事件原则a.鼠标的基本事件默认采用冒泡传递b.可以给一个元素添加多个不同的鼠标事件，不同的鼠标事件之间互不影响c.mouseenter和mouseleave两个事件不冒泡触发。练习1.编写一个带有提示文字的滚动条2.编写一个带有hover样式的导航栏，要求采用鼠标事件实现3.编写一个div，要求鼠标按下不抬起时。每隔1s输出一句'helloworld‘;4.编写一个button。要求鼠标点击一次能够让页面中的某个div向右移动50像素。5.编写一个div，要求当鼠标按下时，整个div能够跟随鼠标移动而移动6.文档事件(1)加载成功\失败事件：load\error(2)当DOM加载完成时触发事件：DOMContentLoaded(3)文档加载状态判断事件：readystatechange(4)文档大小发生改变时的回调事件：resize 文档事件中主要是指添加给整个文档的事件。在这一类事件中，绝大部分并不需要用户主动去进行调用。而是通过文档的不同状态来进行自动执行。 load事件指的是：节点加载成功时自动发生回调事件 error事件值得是：节点加载失败时自动发生的回调事件 语法：

node.onload=func(){};

例如： 在head中为页面元素添加点击事件，通过文档的onload事件解决了 【因网页加载未完成，而导致的获取页面元素失败】的问题

window.onload=function(){

vardiv=document.querySelector(‘div’);

div.onclick=function(){console.log('点击事件');};

}(1)加载成功\失败事件：load\error元素加载失败时触发的操作，只需要给指定元素一个.onerror属性即可

varmylink=document.getElementsByTagName(“link”).item(0);

mylink.onerror=function(){

console.log('css文件加载出问题了');

}; DOMContentLoaded事件和load事件的区别是触发的时机不一样，先触发DOMContentLoaded事件，后触发load事件。

DOM文档加载的步骤为:

解析HTML结构。

加载外部脚本和样式表文件。

解析并执行脚本代码。

DOM树构建完成。 //DOMContentLoaded执行

加载图片等外部文件。

页面加载完毕。 //load执行

因此样式文件的加载会阻塞脚本的执行。 所以如果你把一个内部脚本<script>元素放在了一个<link>后面，如果页面没有完成解析则脚本不会触发，直到样式文件加载完成之后.(这种情况被称为文件阻塞)

(2)当DOM加载完成时触发事件：DOMContentLoaded 当document的readyState改变时触发这个事件(仅第二阶段)。 众所周知，document节点中拥有一个属性叫做readyState。其拥有三个可能值： loading：加载DOM中 interactive：加载外部资源 complete：加载完成 而readystatechange事件正是在这个状态发生改变时调用的事件。

调用方式可以用DOM0也可以用DOM2来绑定。(4)文档加载状态判断事件：readystatechangewindow.onresize=function(){

console.log('width