JavaScript每天必须学习的事件

其实这篇文章写的挺久了，但是由于sf保存中的bug，当时写了很多，结果没有保存下来。很遗憾我没有完成它。我今天有空的时候才加的，刚刚为我的javascript学习总结做了最后一篇文章。

这里，我们主要讨论js相关事件——

事件处理程序

有些事件是在DOM中定义的，响应事件的函数称为事件处理程序(或事件侦听器)。事件处理程序的名称通常以“on”开头，如onclick等。

事件冒泡和捕获

事件流是指页面中接收事件的顺序。IE、火狐和chrome浏览器都是事件冒泡。所谓事件冒泡，是指事件最初由最特定的元素接收，然后逐步扩散到非特定的节点。事件捕获正好相反。事件捕获是由网景公司提出的。下图显示了事件冒泡和捕获的详细信息：

虽然事件捕获是网景唯一支持的事件流模型，但IE9、Firefox和Google也支持这种事件流模型。

事件冒泡的好处

因为事件有冒泡机制，所以我们可以利用冒泡原理将事件添加到父事件中来触发执行效果。这样做的好处当然是提高性能。

head lang=' en ' meta charset=' UTF-8 ' title/title script type=' text/JavaScript ' window . onload=function(){ var AuL=document . getelementsbyid(' bubble ')；var AlI=AuL . GetElementsBytagname(' Li ')；for(var I=0；iaLi.lengthi ){ aLi[i]。onmouseover=function(){ this . style . background COlOr=' blue '；};阿里[我]。onmouseout=function(){ this . style . background COlOr=' '；} } };/script/head dyduul id=' bubble ' li1/Lili 2/Lili 3/Lili 4/Li/ul/div/body，这样我们就可以向其中添加鼠标事件。但是，如果我们可能有许多LIs使用for循环，这将影响性能。

接下来，我们可以使用事件委托来实现这种效果。Html不变：

脚本类型=' text/JavaScript ' window . onload=function(){ var AuL=document . getelementsbyid(' bubble ')；var AlI=AuL . GetElementsBytagname(' Li ')；//无论如何，只要你操作的元素是事件源。//ie:window.event.srcelement//under标准： event . targedaul . onmouseover=function(ev){ var ev=ev | | window . event；var target=ev . target | | ev . srcelelement；if(target . nodename . tolowercase()==' Li '){ target . style . background=' blue '；} };aul . onmouseout=function(ev){ var ev=ev | | window . event；var target=ev . target | | ev . srcelelement；if(target . nodename . tolowercase()=' Li '){ target . style . background=' '；} } };/script那么，如何防止事件冒泡，请看下面的例子：

div onclick='showMsg(this，event)' id=' OutLook ' style=' width :100 px；高度：100 px；背景技术： # 000；padd :50 px ' div onclick=' showMsg(this，event)' id=' InTerface ' style=' width :100 px；高度：100 px；Background: # CCC'/div/div脚本类型=' text/JavaScript'/防止事件冒泡后，点击灰色框，整个过程对话框只播放一次(注意与默认情况相比)。函数showmsg (obj，e){ alert(obj . id)；StopBubble(e)}//防止事件冒泡函数stop bubble (e) {if (e e .停止传播)e .停止传播()else window。事件。取消气泡=真}/脚本点击黑色外围渲染：

DOM 0级事件处理程序

通过js指定一个事件处理程序通常会给这个事件处理程序的属性分配一个回调函数。每个元素都有自己的事件处理程序属性(属性小写，例如：onclick)

BTN . onclick=function(){ console . log(' hello ')；};使用DOM级别0指定的事件处理程序被认为是元素的方法。因此，这指向当前元素：

var BTN=document . getelementbyid(' myDiv ')；//在//DOM上触发的事件将产生一个事件对象event BTN . onclick=function(event){ alert(this . id)；//MyDiv }；DOM级别1

DOM级别1侧重于HTML和XML文档模型。它包含文档导航和处理功能。

DOM level 1于1998年10月1日成为W3C推荐的标准。

第二版的工作草案是在2000年9月29日。

值得一提的是，DOM级别0不是W3C规范。它只是网景导航器3.0和IE 3.0中等价功能的定义。

DOM 2级事件处理程序

DOM 2级定义了两种指定和删除事件处理程序操作的方法：addEventListener()和removeEventListener()，这两种方法都接受三个参数：

1.事件名称。例如，单击2。作为事件处理程序的函数。3.布尔值(true表示在捕获阶段调用事件处理程序，false表示冒泡阶段)

还可以通过Element对象的addEventListener方法定义事件的回调函数。

//element . addeventlistener(event，function，useCapture)var BTN=document . getelementbyid(' myDiv ')；btn.addEventListener('click '，function(){ console . log(this . id)；}，false)；工业工程中的事件处理程序

IE9之前的IE浏览器不支持AddEventListener()和removeEventListener()。

与其他浏览器不同，IE使用attachEvent()和disconnectevent()方法为DOM添加事件处理程序。由于IE8和更早的版本只支持事件冒泡，所以它们只接受两个参数：1。事件处理程序的名称(之前添加)；2.事件处理函数使用attachEvent()添加的事件处理程序如下：

var BTN=document . getelementbyid(' myDiv ')；btn.attachEvent('onclick '，function(){ console . log(this . id)；});值得注意的是，当使用attachEvent()方法时，事件处理程序将在全局范围内运行，因此此时这等于window

当一个事件对象触发DOM上的一个事件时，它会产生一个事件对象事件，其中包含与该事件相关的所有信息。包括导致事件的元素、事件的类型以及与特定事件相关的其他信息。事件对象作为第一个参数传递给事件侦听器的回调函数。我们可以通过这个事件对象获取当前事件的很多信息：类型(String)——事件目标(节点)的名称——事件源的DOM节点currentTarget？(Node)-触发当前回调函数的DOM节点(后面会详细描述)Bubbles(Boolean)-指示此事件是否为冒泡事件(后面会解释)PreventDefault(Function)-此方法将阻止浏览器中与当前事件相关的用户代理的默认行为被触发。例如，阻止元素A的click事件加载新页面Canceleable(布尔值)-此变量指示是否可以通过调用event . preventdefault . stopperpagation(函数)来阻止此事件的默认行为-取消事件的进一步捕获或冒泡，气泡为真。使用此方法eventPhase:返回一个指示事件当前阶段的数字，其中0表示事件开始从DOM表面传播到目标元素，1表示捕获阶段，2表示事件到达目标元素，3表示冒泡阶段。

此外，事件对象可能有许多其他属性，但它们都特定于特定事件。例如，鼠标事件包含clientX和clientY属性来指示鼠标在当前窗口中的位置。

此外，stopPropagation()方法用于立即停止事件在DOM中的传播，即取消事件的进一步冒泡或捕获。

var BTN=document . getelementbyid(' myDiv ')；BTN . onclick=function(event){ alert(' clicked ')；event . stopperpagation()；};//避免在document.body上触发事件处理程序document . body . onclick=function(event){ alert(' body clicked ')；};事件对象将仅在事件处理程序执行期间存在，并且一旦事件处理程序执行，将被自动销毁。

工业工程中的事件对象

当事件处理程序添加到DOM 0级别时，事件对象作为窗口对象的属性存在：

var BTN=document . getelementbyid(' myDiv ')；BTN . onclick=function(event){ var event=window . event；alert(event . type)；//点击}；IE的事件对象还包含与创建它的事件相关的属性和方法。cancleBubble的布尔默认值为false，但可以设置为true以取消事件冒泡，这与dom中的stopPropagation()方法相同。returnValue的布尔默认值为true，当设置为false时，取消事件的默认行为与dom中的preventDefault()相同。srcElement元素事件的目标与dom中的目标属性相同。键入触发字符串的事件类型。

点击事件

用户单击后，事件对象将包含以下属性。PageX，pageY:单击位置相对于html元素的坐标，以像素为单位。ClientX，clientY:点击位置相对于视口的坐标，单位为像素。ScreenX，screenY:点击位置相对于设备显示屏的坐标，单位为设备硬件的像素

客户x，客户y

说明：clientX和clientY，它们的值表示事件发生时鼠标指针在视口中的水平和垂直坐标(滚动条区域除外)

抵消

元素的偏移量可以通过以下四个属性获得。

(1)offset thight:元素在垂直方向上占据的空间，以像素为单位。包括元素的高度、(可见的)水平滚动条的高度、上边框高度和下边框高度。

(2)offset with:元素在水平方向上占据的空间，以像素为单位。包括元素的宽度、(可见的)垂直滚动条的宽度、左边框的宽度和右边框的宽度。

(3)offsetLeft:元素左外边框与包含该元素的左内边框之间的像素距离。

(4)offsetTop:元素的上外部边框与包含该元素的上内部边框之间的像素距离。

佩奇，佩奇

这两个属性指示鼠标光标在页面中的位置。当页面不滚动时，页面x和页面y的值等于客户端x和客户端y的值

滚动大小

滚动大小是指包含滚动内容的元素的大小。

以下是与滚动大小相关的四个属性。

(1)scrollHeight:没有滚动条的元素内容的总高度。

(2)scrollWidth:没有滚动条的元素内容的总宽度。

(3)scrolleft:隐藏在内容区域左侧的像素数。通过设置此属性，可以更改元素的滚动位置。

(4)scrollTop:隐藏在内容区域上方的像素数。通过设置此属性，可以更改元素的滚动位置。

焦点事件

当页面元素获得或失去焦点时，会触发焦点事件。有以下四种焦点事件：1 .模糊：元素失焦时触发，不冒泡；2 .焦点：当元素获得焦点时触发。不要冒泡3.focusin:元素获得焦点时触发，冒泡4.focusout:元素失去焦点时触发，冒泡

鼠标事件

DOM level 3中定义了9个鼠标事件：click:当用户点击鼠标主键时触发，通常指鼠标左键或按回车键。

当用户双击鼠标时触发

鼠标向下：当用户按下鼠标的任意键时，它将被触发。此事件不能由键盘触发。

Mousemove:当鼠标在元素周围移动时反复触发，此事件不能由键盘事件触发。

鼠标离开：当鼠标离开元素时触发。此事件不能由键盘触发。

鼠标悬停：当鼠标进入元素时触发。此事件不能由键盘触发。

Mouseenter:类似于“mouseover”，但不冒泡，光标移动到后代元素上也不会触发。

Mouseleave:类似于“mouseout”，但不冒泡。不会在元素上方触发。

Mouseup:用户释放鼠标按钮时触发，键盘无法触发。

传递给鼠标事件处理程序的事件对象具有clientX和clientY属性，它们指定鼠标指针相对于包含窗口的坐标。通过添加窗口的滚动偏移量，可以将鼠标位置转换为文档坐标。页面上的所有元素都支持鼠标事件。除了mouseenter和mouseleave之外，所有事件都会冒泡，并且可以取消它们的默认行为。但是，取消鼠标事件的默认行为可能会影响其他事件，因为某些鼠标事件是相互依赖的。

拖动事件

(1)拖动事件拖动事件在拖动源对象时触发。(2)dragstart、dragend事件用户用鼠标开始拖动对象时触发dragstart事件，拖动结束时触发dragend事件。(3)dragenter，dragleave Event将源对象拖入目标对象后，在目标对象上触发dragenter事件。源对象离开目标对象后，在目标对象上触发dragleave事件。(4)dragover事件drag over事件在源对象拖动到另一个对象上时触发。(5)跌落事件

当源对象被拖动到目标对象上并且用户释放鼠标时，在目标对象上触发拖放事件。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。