HTML/CSS -- 事件

忘是亡心i 2022-04-22 21:40 172阅读 0赞

JavaScript和HTML的交互是通过事件来实现的。

先来简单看一下DOM事件处理程序的级别

1：DOM0级别事件处理程序（简单的说，就是将一个函数赋值给一个事件处理程序属性）

dom.onType = function (e) \{\}

var btn = document.getElementById("myBtn"); 
    btn.onclick = function(){ 
     alert("Clicked"); 
    };

2：DOM2级别事件处理程序（简单的说，就是通过addEventListener()和 removeEventListener() 这俩个函数）

它们都接受 3 个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是 true，表示在捕获  
阶段调用事件处理程序；如果是 false，表示在冒泡阶段调用事件处理程序。

var btn = document.getElementById("myBtn"); 
    btn.addEventListener("click", function(){ 
     alert(this.id); 
    }, false);

但是这种绑定（匿名函数）是无法通过removeEventListener函数解除的。如下代码才有效

var btn = document.getElementById("myBtn"); 
    var handler = function(){ 
     alert(this.id); 
    }; 
    btn.addEventListener("click", handler, false);
    
    btn.removeEventListener("click", handler, false); //有效！

**事件流：**事件流描述的是从页面中接收事件的（事件冒泡和事件捕获）

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

<!DOCTYPE html> 
    <html> 
    <head> 
     <title>Event Bubbling Example</title> 
    </head> 
    <body> 
     <div id="myDiv">Click Me</div> 
    </body> 
    </html>

如果你单击了页面中的<div>元素，那么这个 click 事件会按照如下顺序传播：  
(1) <div>   
(2) <body>   
(3) <html>   
(4) document

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70][]

当然在现代浏览器上，事件一直会冒泡到window对象上。

事件捕获（event capturing）,事件从不具体的节点（文档），然后逐级向下传递，到最具体的节点。

如果你单击了页面中的<div>元素，那么这个 click 事件会按照如下顺序传播：

(1) document

(2) <html>   
(3) <body>   
(4) <div>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 1][]

当然在现代浏览器上，事件从window对象开始。

举一个例子：

![20190115223426879.png][]事件捕获

IE 实现了与 DOM 中类似的两个方法：attachEvent()和 detachEvent()

这两个方法接受相同  
的两个参数：事件处理程序名称与事件处理程序函数。由于 IE8 及更早版本只支持事件冒泡，所以通过  
attachEvent()添加的事件处理程序都会被添加到冒泡阶段

事件流：“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。

首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶  
段，可以在这个阶段对事件做出响应。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 2][]

在触发 DOM 上的某个事件时，会产生一个事件对象 event，这个对象中包含着所有与事件有关的信息。

bubbles Boolean 只读 表明事件是否冒泡  
cancelable Boolean 只读 表明是否可以取消事件的默认行为  
currentTarget Element 只读 其事件处理程序当前正在处理事件的那个元素  
defaultPrevented Boolean 只读 为 true 表示已经调用了 preventDefault()（DOM3级事件中新增）  
detail Integer 只读 与事件相关的细节信息  
eventPhase Integer 只读 调用事件处理程序的阶段：1表示捕获阶段，2表示“处于目标”，3表示冒泡阶段

preventDefault() Function 只读 取消事件的默认行为。如果cancelable是true，则可以使用这个方法  
stopImmediatePropagation() Function 只读 取消事件的进一步捕获或冒泡，同时阻止任何事件处理程序被调用（DOM3级事件中新增）  
stopPropagation() Function 只读 取消事件的进一步捕获或冒泡。如果bubbles为true，则可以使用这个方法  
target Element 只读 事件的目标  
trusted Boolean 只读 为true表示事件是浏览器生成的。为false表示事件是由开发人员通过 JavaScript 创建的（DOM3级事件中新增）  
type String 只读 被触发的事件的类型  
view AbstractView 只读 与事件关联的抽象视图。等同于发生事件的window对象

IE中的Event对象

cancelBubble Boolean 读/写 默认值为false，但将其设置为true就可以取消事件冒泡（与DOM中的stopPropagation()方法的作用相同）  
returnValue Boolean 读/写 默认值为true，但将其设置为false就可以取消事件的默认行为（与DOM中的preventDefault()方法的作用相同）  
srcElement Element 只读 事件的目标（与DOM中的target属性相同）  
type String 只读 被触发的事件的类型

简单看一下自定义事件（new Event())

<div id = "target" ></div>
       <script>
           const target = document.getElementById("target"); 
           const event = new Event("myEvent");
           target.addEventListener("myEvent", function (e) {
               console.log("This is my event");
           })
           target.addEventListener("click", function (e) {
               target.dispatchEvent(event);
            }, true)
     
       </script>

![20190114223156470.png][]

点击div\#target然后打印出结果。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70]: /images/20220327/8caaecd6aa4642bd8c3d57efc33dc823.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 1]: /images/20220327/44682f9a78264e989cdb4ea85ccf581d.png
[20190115223426879.png]: /images/20220327/92379a4d0a90492890e36eec39cb1ae6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 2]: /images/20220327/ef60e42ed1e343e5b64d2e9a1125eac7.png
[20190114223156470.png]: /images/20220327/32d67fcf1dbe4f31896f37a9eb7a1732.png