JS--JavaScript使用event对象、event对象属性、方法和事件委托

小咪咪 2021-08-13 17:40 383阅读 0赞

#### 使用event对象 ####

event对象由事件自动创建，代表事件的状态，如事件发生的源节点，键盘按键的响应状态，鼠标指针的移动位置，鼠标按键的响应状态等信息。event对象的属性提供了有关事件的细节，其方法可以控制事件的传播。

2级 DOM Events 规范定义了一个标准的事件模型，它被除了IE怪异模式以外的所有现代浏览器所实现，而IE定义了专用的、不兼容的模型。

*  在DOM事件模型中，event对象被传递给事件处理函数，但是在IE事件模型中，它被存储在window对象的event属性中
 *  在DOM事件模型中，Event类型的各种子接口定义了额外的属性，它们提供了与特定事件类型相关的细节：在IE事件模型中，只有一种类型的event对象，它用于所有类型的事件。

**DOM事件模型中event对象属性：**

<table> 
 <thead> 
  <tr> 
   <th align="center">属性</th> 
   <th align="center">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">bubbles</td> 
   <td align="center">返回布尔值，指示事件是否是冒泡事件类型。如果事件是冒泡类型，则返回true，否则返回false</td> 
  </tr> 
  <tr> 
   <td align="center">cancelable</td> 
   <td align="center">返回布尔值，指示事件是否可以取消的默认动作。如果使用preventDefault()方法可以取消与事件关联的默认动作，则返回值为true，否则为false</td> 
  </tr> 
  <tr> 
   <td align="center">currentTarget</td> 
   <td align="center">返回触发事件的当前节点，即当前处理该事件的元素、文档或窗口。在捕获和冒泡阶段，该属性是非常有用的，因为在这两个阶段，它不同于target属性</td> 
  </tr> 
  <tr> 
   <td align="center">eventPhase</td> 
   <td align="center">返回事件传播的当前阶段，包括捕获阶段（1）、目标事件阶段（2）和冒泡阶段（3）</td> 
  </tr> 
  <tr> 
   <td align="center">target</td> 
   <td align="center">返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口</td> 
  </tr> 
  <tr> 
   <td align="center">timeStamp</td> 
   <td align="center">返回事件生成的日期和时间</td> 
  </tr> 
  <tr> 
   <td align="center">type</td> 
   <td align="center">返回当前event对象表示的事件的名称。如“submit”、“load”或“click”</td> 
  </tr> 
 </tbody> 
</table>

**DOM事件模型中event对象方法：**

<table> 
 <thead> 
  <tr> 
   <th align="center">方法</th> 
   <th align="center">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">initEvent()</td> 
   <td align="center">初始化新创建的event对象的属性</td> 
  </tr> 
  <tr> 
   <td align="center">preventDefault()</td> 
   <td align="center">通知浏览器不要执行与事件关联的默认动作</td> 
  </tr> 
  <tr> 
   <td align="center">stopPropagation()</td> 
   <td align="center">终止事件在传播过程的捕获、目标处理或冒泡姐u但进一步传播。调用该方法后，该节点上处理该事件的处理函数将被调用，但事件不再被分派到其他节点</td> 
  </tr> 
 </tbody> 
</table>

示例：禁止超链接跳转

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<a href="https://www.baidu.com/" id="a1">禁止超链接跳转</a>
    		<script>
    			document.getElementById("a1").onclick = function(e){ 
    				e = e || window.event;//兼容处理
    				var target = e.target || e.srcElement;
    				if(target.nodeName !== 'A'){ //仅针对超链接起作用
    					return;
    				}
    				if(typeof e.preventDefault === 'function'){ 
    					e.preventDefault();//禁止默认行为
    					e.stopPropagation();//禁止事件传播
    				}else{ 
    					e.returnValue = false;
    					e.cancelable = true;
    				}
    			}
    		</script>
    	</body>
    </html>

#### 事件委托 ####

事件委托（delegate），也称为事件托管或事件代理，简单描述就是把目标节点的事件绑定到祖先节点上。这种简单而优雅的事件注册方式基于：**事件传播过程中，逐层冒泡总能被祖先节点元素捕获**。

示例：利用事件传播机制，在列表ul元素上绑定click事件，当事件传播到父节点ul上时，捕获click事件，然后再事件处理函数中检测当前事件响应节点类型，如果是li元素，则进一步执行下面代码，否则跳出事件处理函数，结束响应。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<button id="btn">添加列表项目</button>
    		<ul id="list">
    			<li>列表项目1</li>
    			<li>列表项目2</li>
    			<li>列表项目3</li>
    		</ul>
    		<script>
    			var ul = document.getElementById("list");
    			ul.addEventListener('click', function(e){ 
    				var e = e || window.event;
    				var target = e.target || e.srcElement;
    				if(e.target && e.target.nodeName.toUpperCase() == "LI"){ 
    					alert(e.target.innerHTML);
    				}
    			}, false);
    			var i = 4;
    			var btn = document.getElementById("btn");
    			btn.addEventListener("click", function(){ 
    				var li = document.createElement("li");
    				li.innerHTML = "列表项目" + i++;
    				ul.appendChild(li);
    			});
    		</script>
    	</body>
    </html>

![在这里插入图片描述][20190926211406507.png]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]

[20190926211406507.png]: /images/20210813/caffa68d67e14bd8ad46cab8b16e316e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]: /images/20210813/1e477e7e224542459d72ea7bf32472ef.png