搜尋
首頁web前端js教程javascript中事件的解析（詳細）
javascript中事件的解析（詳細）
不言
不言
Sep 10, 2018 pm 04:28 PM
htmlhtml5javascript

這篇文章帶給大家的內容是關於javascript中事件的解析（詳細），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

JavaScript、瀏覽器、事件之間的關係

JavaScript程式採用了非同步事件驅動程式設計（Event-driven programming）模型，維基百科對它的解釋是：

事件驅動程式設計（Event-driven programming）是一種電腦程式設計模型。這種模型的程式運作流程是由使用者的動作（如滑鼠的按鍵，鍵盤的按鍵動作）或是由其他程式的訊息來決定的。相對於批次程式設計（batch programming）而言，程式運行的流程是由程式設計師來決定。大量的程式設計在初級程式設計教學課程上是一種方式。然而，事件驅動程式設計這種設計模型是在互動程式（Interactive program）的情況下孕育而生的

#簡言之，在web前端程式設計裡面JavaScript透過瀏覽器提供的事件模型API和使用者交互，接收使用者的輸入。

由於使用者的行為是不確定的。這種場景是傳統的同步程式設計模型沒辦法解決的，因為你不可能等到使用者操作完了才執行後面的程式碼。所以javascript使用了非同步事件，也就是說：js中的事件都是非同步執行的。

事件驅動程式模型基本的實作原理基本上都是使用 事件循環（Event Loop），這部分內容涉及瀏覽器事件模型、回呼原理。

JavaScript DOM、BOM模型中，同樣非同步的還有setTimeout，XMLHTTPRequest這類API並不是JavaScript語言本身就有的。

事件綁定的方法

事件綁定有3種方法：

#行內綁定

#直接在DOM元素上透過設定 on eventType綁定事件處理程序。例如:

<a>点击我</a>

這種方法有兩個缺點：

  1. 事件處理程序和HTML結構混雜在一起，不符合MVX的規範。為了讓內容、表現和行為分開，我們應該避免這種寫法。

  2. 這樣寫的程式碼判斷具有全域作用域，可能會產生命名衝突，導致不可預見的嚴重的後果。

在DOM元素上直接重寫事件回呼函數

使用DOM Element上面的on eventType屬性API

var el = getElementById('button');  //button是一个<button>元素
el.onclick = function(){ alert('button clicked.') };
el.onclick = function(){ alert('Button Clicked.') };
//实际之弹出'Button Clicked.'，函数发生了覆盖</button>

這個方法也有一個缺點：後綁定的函數會覆蓋先前的函數。例如我們註冊一個window.onload事件，可能會覆寫某個函式庫中已有的事件函數。當然，這個可以有解決方法:

function addEvent(element, EventName, fun) {   //EventName = 'on' + eventType
    var oldFun = element[EventName];
    if (typeof oldFun !== 'function') {
        element[EventName] = fun;
    } else {
        element[EventName] = function() {
            oldFun();
            fun();
        };
    }
}

addEvent(window, "onload", function() { alert('onload 1') });
addEvent(window, "onload", function() { alert('onload 2') });

當然，一般情況下使用DOM Ready就可以了，因為JavaScript在DOM加載完就可以執行了

標準綁定方法

標準的綁定方法有兩種，addEventListener和attachEvent前者是標準瀏覽器支援的API，後者是IE8以下瀏覽器支援的API:

//例如给一个button注册click事件
var el = getElementById('button');  //button是一个<button>元素
if(el.addEventLister){
    el.addEventListener("click", function(e){
        alert("button clicked.");
    },false);
}
if(el.attachEvent){
    el.attachEvent("onclick", function(e){
        alert("button clicked.");
    });
}</button>

需要注意的是：

  1. addEventLister的第一個參數事件類型是不加on前綴的，而attachEvent中需要加上on前綴。

  2. addEventLister中的事件回呼函數中的this指向事件元素target本身，而attachEvent中的事件回呼函數的this指向的是window。

  3. addEventLister有第三個參數，true表示事件工作在擷取階段，false為冒泡階段(預設值:false)。而attachEvent只能工作在冒泡階段。

在chrome中執行以下程式碼：

<a>click me</a>
<script>
    var link = document.getElementById(&#39;link&#39;);
    link.onclick = function() { alert(3); };  //覆盖了行内的onclick定义
    link.addEventListener(&#39;click&#39;, function() { alert(4); },false);
    link.addEventListener(&#39;click&#39;, function() { alert(5); },false);
</script>

點選後彈出順序是： 3 -> 4 -> 5 -> 1

#這裡第4行程式碼覆蓋了行內的onclick定義，如果註解了這一行，輸入順序為： 2 -> 4 -> 5 -> 1，而addEventListener之間不會發生覆蓋。

解除事件綁定

對於上述的前二個方法，解除事件綁定只需要將對應的事件函數設為null，就可以了：

var el = document.getElementById('button');
el.onclick = null;

對於上述第三種方法使用removeListen()方法即可，在IE8中，對應使用detachEvent()。注意，他們和上面的註冊方法一一對應，不能混用。 

//这是一段错误代码，不能实现事件移除

//建立一个事件
var el = document.getElementById('button');  //button是一个<button>元素
if(el.addEventLister){
    el.addEventListener("click", function(e){
        alert("button clicked.");
    },false);
}
if(el.attachEvent){
    el.attachEvent("onclick", function(e){
        alert("button clicked.");
    });
}

//试图移除这个事件
if(el.removeEventLister){
    el.addEventListener("click", function(e){
        alert("button clicked.");
    },false);
}
if(el.detachEvent){
    el.datachEvent("onclick", function(e){
        alert("button clicked.");
    });
}

//移除失败</button>

以上的錯誤在於事件函數這樣定義時，雖然看著完全一樣，但在記憶體中位址不一樣。這樣一來，電腦不會認為解除的和綁定的是同一個函數，自然也不會正確解除。應該這樣寫：

//建立一个事件
var el = document.getElementById('button');  //button是一个<button>元素
var handler = function(e){alert("button clicked.");};
if(el.addEventLister){
    el.addEventListener("click", handler,false);
}
if(el.attachEvent){
    el.attachEvent("onclick", handler);
}

//试图移除这个事件
if(el.removeEventLister){
    el.addEventListener("click", handler, false);
}
if(el.detachEvent){
    el.datachEvent("onclick", handler);
}

//移除成功</button>

事件的捕獲與冒泡

之前說addEventListener函數的第三個參數表示捕獲和冒泡，這個是一個重點！

我自己描述他們的定義是：

冒泡:在一個元素上觸發的某一事件，會在這個元素的父輩元素上會依次由內向外觸發該事件，直到window元素。

捕獲:在一個元素上觸發的某一事件，這個元素的每一層的所有子元素上觸發該事件，並逐層向內，直到所有元素不再有子元素。

如下圖(註:圖片來自百度搜尋)

javascript中事件的解析（詳細）

事件间回到函数参数是一个事件对象，它里面包括许多事件属性和方法，比如，我们可以用以下方式阻止冒泡和默认事件：

//该例子只写了handler函数
function handler(event) {
    event = event || window.event;
    //阻止冒泡
    if (event.stopPropagation) {
        event.stopPropagation();      //标准方法
    } else {
        event.cancelBubble = true;    // IE8
    }
    //组织默认事件
    if (event.perventDefault) {
        event.perventDefault();      //标准方法
    } else {
        event.returnValue = false;    // IE8
    }
}

其次，普通注册事件只能阻止默认事件，不能阻止冒泡

element = document.getElemenById("submit");
element.onclick = function(e){
    /*...*/
    return false;    //通过返回false，阻止冒泡
}

事件对象

事件函数中有一个参数是事件对象，它包含了事件发生的所有信息，比如键盘时间会包括点击了什么按键，包括什么组合键等等，而鼠标事件会包括一系列屏幕中的各种坐标和点击类型，甚至拖拽等等。当然，它里面也会包括很多DOM信息，比如点击了什么元素，拖拽进入了什么元素，事件的当前状态等等。

这里关于事件兼容性有必要强调一下：

document.addEventListener('click', function(event) {
    event = event || window.event;   //该对象是注册在window上的
    console.log(event);   //可以输出事件对象看一看， 属性很多很多
    var target = event.target || event.srcElement;  //前者是标准事件目标，后者是IE的事件目标
},false);

关于鼠标事件坐标的问题，可以看另一篇博客：元素和鼠标事件的距离属性

事件触发

除了用户操作以外，我们也可以写代码主动触发一个事件，以ele元素的click事件为例:

ele.click();   //触发ele元素上的单击事件

事件代理

有时候我们需要给不存在的的一段DOM元素绑定事件，比如用户动态添加的元素，或者一段 Ajax 请求完成后渲染的DOM节点。一般绑定事件的逻辑会在渲染前执行，但绑定的时候找不到元素所以并不能成功。

为了解决这个问题，我们通常使用事件代理/委托(Event Delegation)。而且通常来说使用 事件代理的性能会比单独绑定事件高很多，我们来看个例子。

  • 传统注册事件方法，当内容很多时效率低，不支持动态添加元素



    
    
  • item-1
    • 
    
  • item-2
    • 
    
  • item-3
    • 
    
  • item-4
    • 
    
  • item-5
    • 


<script>
    var lists = document.getElementsByTagName(&#39;li&#39;);
    for(var i = 0; i < lists.length; ++i){
        lists[i].onclick = (function(i){
                return function(){
                  console.log("item-" + (i + 1));
                };
            })(i);
    }
    //添加节点
    var list = document.getElementById(&#39;list&#39;);
    var newNode = document.createElement(&#39;li&#39;);
    newNode.innerHTML = "item-6";
    list.appendChild(newNode);
</script>
  • 事件委托注册方法，不论内容有多少都只注册1次，支持动态添加元素：




    
    
  • item-1
    • 
    
  • item-2
    • 
    
  • item-3
    • 
    
  • item-4
    • 
    
  • item-5
    • 


<script>
    var list = document.getElementById(&#39;list&#39;);
    var handler = function(e){
      e = e || window.event;
      var target = e.target || e.srcElement;
      if(target.nodeName && target.nodeName === "LI"){
        console.log(target.innerHTML);
      }
    };

    if(list.addEventListener){
      list.addEventListener("click", handler);
    } else {
      list.attachEvent("onclick", handler);
    }

    //添加节点
    var list = document.getElementById(&#39;list&#39;);
    var newNode = document.createElement(&#39;li&#39;);
    newNode.innerHTML = "item-6";
    list.appendChild(newNode);
</script>
事件封装


很明显，处理浏览器兼容太麻烦了，所以这里把js中的事件注册相关函数封装一下，作为整理。


//均采用冒泡事件模型
var myEventUtil={
    //添加事件函数
    addEvent: function(ele, event, func){
        var target = event.target || event.srcElement;
        if(ele.addEventListener){
            ele.addEventListener(event, func, false);
        } else if(ele.attachEvent) {
            ele.attachEvent('on' + event, func);   //func中this是window
        } else {
            ele['on' + event] = func;    //会发生覆盖
        }
    },
    //删除事件函数
    delEvent:function(ele, event, func) {
        if(ele.removeEventListener){
            ele.removeEventListener(event, func, false);
        } else if(ele.detachEvent) {
            ele.detachEvent('on' + event, func);
        } else {
            ele['on' + event] = null;
        }
    },
    //获取触发事件的源DOM元素
    getSrcElement: function(event){
        return event.target || event.srcElement;
    },
    //获取事件类型
    getType: function(event){
        return event.type;
    },
    //获取事件
    getEvent:function(event){
        return event || window.event;
    },
    //阻止事件冒泡
    stopPropagation: function(event) {
        if(event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBuble = false;
        }
    },
    //禁用默认行为
    preventDefault: function(event){
        if(event.preventDefault){
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    }
};


jQuery中的事件


需要注意的是: JQuery中的事件都工作在冒泡阶段，且只能工作在冒泡阶段


注册、解除事件


  • 方法一:


//不会发生覆盖，但不利于解除，不能动态操作事件
<button>here</button>
$("#button").click(function(){   //注册一个click事件，当然可以用其他事件名的函数注册其他事件
  console.log("clicked");
});


  • 方法二:


//不会发生覆盖，利于解除，不能动态操作事件
<button>here</button>
//注册一个事件
$("#button").bind("click", function() {    //注册一个click事件，当然可以用其他事件名的函数注册其他事件
  console.log("clicked");
});
//当然还可以这样写,给事件指定命名空间
$(document).bind('click.handler1', function() { console.log(1);})
$(document).bind('click.handler2', function() { console.log(2);})

//解除一个事件
$("#button").unbind(".handler1");    //解除元素上所以handler1命名空间中的事件
$("#button").unbind('click.handler2');   // 解除元素上的click.handler2事件
$("#button").unbind('click');            // 解除元素上所有点击事件
$("#button").unbind()                    // 解除元素上所有事件

//bind()方法还介受3个参数形式，这里就不赘述了，感兴趣可以自己看看相关资料。


  • 方法三:


//不会发生覆盖，但不利于解除，能动态操作事件，依赖于事件冒泡

//注册事件
$(document).delegate(".item", "click", function(){console.log(this.innerHTML);});   //第一个是选择器, 第二个是事件类型, 第三个是事件函数

//移除事件
$(document).undelegate(".item", "click", handler);  //移除元素上指定事件
$(document).undelegate(".item", "click");  //移除元素上所有click事件
$(document).undelegate(".item");  //移除元素上所有事件


  • 方法四:


//不会发生覆盖，但不利于解除，能动态操作事件，不依赖于事件冒泡

//注册事件
#(".item").live("click", function(){console.log(this.innerHTML);})  //第一参数是事件类型, 第二参数是事件函数

//移除事件
$(".item").die("click", handler);  //移除元素上指定click事件
$(".item").die("click");  //移除元素上所有click事件


  • 两个简化方法:


//hover方法
$("#button").hover(function(){
        //鼠标移入时的动作，不冒泡
    }, function(){
        //鼠标移出时的动作，不冒泡
});

//toggle方法
$("#button").toggle(function(){
        //第一次点击时的动作
    }, function(){
        //第二次点击时的动作
}, .../*可以放多个函数，依次循环响应*/);


事件触发


//不能触发addEventListener和attachEvent
//主动触发一个事件
$("#button").trigger("click");   //触发所有click事件
$("#button").trigger("click.handler1");   //触发所有click.handler1事件
$("#button").trigger(".handler1");   //触发所有handler1命名空间的事件
$("#button").trigger("click!");   //触发所有没有命名空间的click事件
$("#button").trigger(event);   //在该元素上触发和事件event一样的事件
$("#button").trigger({type:"click", sync: true});   //触发click事件,同步


相关推荐：


带你快速理解javascript中的事件模型


JavaScript事件类型中UI事件详解_javascript技巧
以上是javascript中事件的解析（詳細）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
相關文章
es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm	 07:08 PM
去掉重复并排序的方法：1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句，去掉数组中的重复元素，返回去重后的新数组；2、利用sort()对去重数组进行排序，语法“去重数组.sort()”。
JavaScript的Symbol类型、隐藏属性及全局注册表详解JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am	 11:50 AM
本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题，包括了Symbol类型的描述、Symbol不会隐式转字符串等问题，下面一起来看一下，希望对大家有帮助。
原来利用纯CSS也能实现文字轮播与图片轮播！原来利用纯CSS也能实现文字轮播与图片轮播！Jun 10, 2022 pm	 01:00 PM
怎么制作文字轮播与图片轮播？大家第一想到的是不是利用js，其实利用纯CSS也能实现文字轮播与图片轮播，下面来看看实现方法，希望对大家有所帮助！
JavaScript对象的构造函数和new操作符（实例详解）JavaScript对象的构造函数和new操作符（实例详解）May 10, 2022 pm	 06:16 PM
本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于对象的构造函数和new操作符，构造函数是所有对象的成员方法中，最早被调用的那个，下面一起来看一下吧，希望对大家有帮助。
JavaScript面向对象详细解析之属性描述符JavaScript面向对象详细解析之属性描述符May 27, 2022 pm	 05:29 PM
本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于面向对象的相关问题，包括了属性描述符、数据描述符、存取描述符等等内容，下面一起来看一下，希望对大家有帮助。
javascript怎么移除元素点击事件javascript怎么移除元素点击事件Apr 11, 2022 pm	 04:51 PM
方法：1、利用“点击元素对象.unbind("click");”方法，该方法可以移除被选元素的事件处理程序；2、利用“点击元素对象.off("click");”方法，该方法可以移除通过on()方法添加的事件处理程序。
整理总结JavaScript常见的BOM操作整理总结JavaScript常见的BOM操作Jun 01, 2022 am	 11:43 AM
本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于BOM操作的相关问题，包括了window对象的常见事件、JavaScript执行机制等等相关内容，下面一起来看一下，希望对大家有帮助。
foreach是es6里的吗foreach是es6里的吗May 05, 2022 pm	 05:59 PM
foreach不是es6的方法。foreach是es3中一个遍历数组的方法，可以调用数组的每个元素，并将元素传给回调函数进行处理，语法“array.forEach(function(当前元素,索引,数组){...})”；该方法不处理空数组。
See all articles
熱AI工具
Undresser.AI Undress
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
Undress AI Tool
免費脫衣圖片
Clothoff.io
Clothoff.io
AI脫衣器
AI Hentai Generator
AI Hentai Generator
免費產生 AI 無盡。
顯示更多
熱門文章
R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫：如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險：如何獲得巨型種子
3 週前By尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間？
3 週前ByDDD
R.E.P.O.保存文件位置：在哪里以及如何保護它？
3 週前ByDDD
顯示更多
熱工具
DVWA
DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序，非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具，幫助Web開發人員更好地理解保護網路應用程式的過程，並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞，難度各不相同。請注意，該軟體中
Atom編輯器mac版下載
Atom編輯器mac版下載
最受歡迎的的開源編輯器
Dreamweaver Mac版
Dreamweaver Mac版
視覺化網頁開發工具
PhpStorm Mac 版本
PhpStorm Mac 版本
最新（2018.2.1 ）專業的PHP整合開發工具
SecLists
SecLists
SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合，這些清單在安全評估過程中經常使用，而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表，幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上，他就可以存取所需的每種類型的清單。
顯示更多
熱門話題
gmail信箱登陸入口在哪裡
7316
9
Java教學
1625
14
CakePHP 教程
1349
46
Laravel 教程
1261
25
PHP教程
1208
29
顯示更多