前端学习之DOM之事件与事件流（冒泡流和捕获流）

来源：互联网发布：天刀焰灵姬捏脸数据编辑：程序博客网时间：2024/06/05 19:55

一直都在按照慕课网中的学习路径学习前端，今天学习到《DOM事件探秘》,地址在这里，这篇文章的内容都是从该视频中摘出来的

在此记录一些概念笔记：

事件：是文档或浏览器窗口中发生的，特定的交互瞬间。

一、理解事件流

事件流：描述的是从页面中接受事件的顺序

IE提出的是“事件冒泡流”

Netscape提出的是“事件捕获流”

事件冒泡流：即事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）。

For example:

<html>    <head>        <tltle>事件流</title>        <meta charset="UTF-8" >    </head>    <body>        <div>            <input type="button" value="按钮"  id="btn">        </div>    </body></html>

用户点击按钮，浏览器就会认为你点击按钮的同时也点击了div，认为你点击了div就会认为你也点击了body，一直往上，会认为你点击了document。也就是说你点击了按钮，浏览器会一级一级往上冒，认为你点击了整个document。

事件捕获流：与冒泡流截然相反，它的定义是最不具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。

二、使用事件处理程序

①HTML事件处理程序----事件直接加在HTML结构里的---(不常使用)

缺点：HTML代码与js紧密的耦合在一起

②DOM0级事件处理程序---先将元素取出来，再对元素属性进行赋值进行事件处理

较传统的一个方式：把一个函数赋值给一个事件的处理程序属性用的比较多的一个方式！！

优点：简单跨浏览器

③DOM2级事件处理程序--元素.addEventListener()/元素.removeEventListener()

DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener();和removeEventListener();

都需要三个参数：要处理的事件名（事件不加on，比如之前的onclick，在这里只需要写click，再比如onmouseover，在这里只需要写mouseover）、作为事件处理程序的函数（不需要加括号）和布尔值（true表示在捕获阶段调用事件处理程序，false表示在冒泡阶段调用事件处理程序）

④IE事件处理程序--支持的浏览器（IE和OPERA）

attachEvent():添加事件

detachEvent():删除事件

都需要两个参数:事件处理程序的名称（事件加on）和事件处理程序的函数（不需要加括号）

⑤跨浏览器事件处理程序

var eventUtil={         // 添加句柄         addHandler:function(element,type,handler){               if(element.addEventListener){   // DOM2级                 element.addEventListener(type,handler,false);               }else if(element.attachEvent){   // IE浏览器                 element.attachEvent('on'+type,handler);               }else{   // DOM0级                 element['on'+type]=handler;               }         },         // 删除句柄         removeHandler:function(element,type,handler){               if(element.removeEventListener){  <span style="font-family: Arial, Helvetica, sans-serif;">/ / DOM2级</span>                 element.removeEventListener(type,handler,false);               }else if(element.detachEvent){  <span style="font-family: Arial, Helvetica, sans-serif;">// IE浏览器</span>                 element.detachEvent('on'+type,handler);               }else{  <span style="font-family: Arial, Helvetica, sans-serif;">// DOM0级</span>                 element['on'+type]=null;               }         }<span style="font-family: Arial, Helvetica, sans-serif;">}</span>

事件对象event ：（IE的获取是window.event 其他浏览器直接获得即可：event 所以在使用的时候这样定义：event=event || window.event）

<html>    <head>        <tltle>事件流</title>        <meta charset="UTF-8" >    </head>    <body>        <div>            <input type="button" value="按钮"  id="btn">        </div>        <script>             function showMes(event) {alert(event.type);     }             document.getElementById("btn").onclick=function() { showMes(this);}        </script>    </body></html>

1.DOM中的事件对象

（1）type属性：用于获取事件类型 (event.type)

（2）target属性：用于获取事件目标 (event.target / event.target.nodeName)

（3）stopPropagation():用于阻止事件冒泡

（4）preventDefault():阻止事件的默认行为

2.IE中的事件对象

（1）type属性：用于获取事件类型 (event.type)

（2）srcElement属性：用于获取事件的目标

（3）cancelBubble属性：用于阻止事件冒泡(设置为true表示阻止冒泡设置false表示不阻止冒泡)

（4）returnValue属性：用于阻止事件的默认行为（设置为false表示阻止事件默认行为）

三、不同事件类型

鼠标事件：

鼠标事件都是在浏览器窗口中的特定位置上发生的。这个位置信息保存在事件的clientX和clientY属性中。所有浏览器都支持这两个属性，它们的值表示事件发生时鼠标指针在视口中的水平和垂直坐标。不包括页面滚动的距离。

onmousedown（用户按下任何鼠标按钮时触发）

onmousemove（当鼠标指针在元素内部移动时重复的触发）

onmouseup（当用户释放鼠标按钮时触发）

键盘事件：

keyDown（当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件）

keyPress（当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件）

keyUp（当用户释放键盘上的键时触发）

event对象的keyCode属性用于得到键盘对应键的键码值

0 0