搜尋
首頁web前端js教程JS的事件綁定深入認識_javascript技巧

一、傳統事件模型

傳統事件模型中存在限制。

內嵌模型以HTML標籤屬性的形式使用,與HTML混合,這種方式無疑造成了修改以及擴充的問題,已經很少使用了。

腳本模型是將事件處理函數寫入js檔案中,從頁面取得元素進行對應事件函數的綁定以觸發執行。但也存在不足之處:

1.一個事件綁定多個事件監聽函數,後者將覆蓋前者。

2.需要限制重複綁定的情況

3.標準化event物件

二、現代事件綁定

DOM2級事件定義了兩個方法用於添加、刪除事件:addEventListener()、removeEventListener().他們分別接收三個參數:事件名、函數、冒泡或捕獲的布爾值(true表示捕獲,false表示冒泡)。

與之對應,IE提供了類似的兩個方法attachEvent()和detachEvent(),但IE的兩個方法存在另外的問題:無法傳遞this物件(IE中的this指向window)可以使用call方法進行物件冒充:

function addEvent(obj,type,fn){ 
if(typeof obj.addEventListener != 'undefined'){ 
obj.addEventListener(type,fn,false); 
}else if(obj.attachEvent != 'undefined'){ 
obj.attachEvent('on' + type,function(){ 
fn.call(obj,window.event); 
}); 
} 
};

但由於新增時執行的是匿名函數,因此新增後無法進行刪除;另外IE提供方法還會有無法依序執行綁定事件、存在記憶體洩漏的問題。

為了解決這一系列的問題,就必須對方法進行進一步的封裝,對其他瀏覽器使用DOM2級標準進行,對於IE,採用基於傳統模式的添加、刪除,思路為:

1.新增是使用JS的散列表儲存物件事件,為每一個物件事件分配一個ID值,按新增的呼叫順序,先判斷是否存在相同的處理函數,不存在的話就依次將事件綁定函數加入到散列表中,這樣解決了無法順序執行以及重複添加的問題

2.刪除時進行遍歷函數配對的判斷,存在則刪除

總結:

之前對JS的事件綁定並沒有太深的認識,甚至停留在傳統事件綁定模型上,對程序實現上還是認識太淺,這次學習封裝庫這部分內容時,才學習到很多JS上物件導向的應用。雖然類似JQuery的這樣js函式庫已經實現了很好的資料綁定機制的封裝效果,但只知其然,不知其所以然還有會有種蒙在鼓裡的感覺,親自去分析一下具體的實現,會有一種豁然開朗的感覺,也體會到,做好一個兼容性、通用性強的程序更要考慮很多內容,解決很多問題,也正在在這些問題中逐漸清楚很多的。

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
jquery绑定事件有几种方式?jquery绑定事件有几种方式?Nov 09, 2020 pm 03:30 PM

jquery绑定事件有4种方式,分别为:bind()、live()、delegate()和on()方法;其中bind()方法只能针对已经存在的元素进行事件的绑定,而live()、on()、delegate()均支持未来新添加元素的事件绑定。

解决UniApp报错:'xxx'事件未绑定的问题解决UniApp报错:'xxx'事件未绑定的问题Nov 25, 2023 am 10:56 AM

在使用UniApp开发应用时,可能会遇到以下错误提示:'xxx'事件未绑定。这是由于UniApp的事件绑定机制导致的,需要正确设置才能解决该问题。一、问题原因在UniApp中,页面组件的事件绑定是通过v-on指令完成的。例如,在模板中添加一个按钮组件:<button@click="onClick">点击我</butto

深度探讨jQuery事件绑定技术深度探讨jQuery事件绑定技术Feb 26, 2024 pm 07:36 PM

jQuery是一种流行的JavaScript库,被广泛用于处理Web页面的交互性。其中,事件绑定是jQuery的重要功能之一,通过事件绑定可以实现对用户交互操作的响应。本文将探讨jQuery事件绑定技术,并给出具体的代码示例。一、事件绑定的基本概念事件绑定是指在DOM元素上添加事件监听器,以便在特定事件发生时执行指定的操作。在jQuery中,通过选择器选中需

怎么给元素添加事件?JS绑定事件三种方式解析怎么给元素添加事件?JS绑定事件三种方式解析Aug 04, 2022 pm 07:27 PM

javascript作为脚本语言, 可以为页面上的元素绑定事件,用于在指定事件发生时能自动调用相应的事件处理程序处理事件。那么怎么给元素添加事件?下面本篇文章给大家介绍一下JS绑定事件三种方式,希望对大家有所帮助!

Vue应用中遇到"click"事件绑定无效怎么办?Vue应用中遇到"click"事件绑定无效怎么办?Jun 24, 2023 pm 03:51 PM

Vue是一款流行的JavaScript框架,用于构建现代的Web应用程序。在Vue中,我们通常使用指令来实现DOM元素的操作。其中,"click"事件是常用的一个指令之一,然而,在Vue应用程序中,我们经常会遇到"click"事件绑定无效的情况。本文将介绍解决这一问题的方法。检查元素是否存在第一步是确认要绑定"click"事件的元素是否存在。如果元素不存在,

jquery绑定事件有什么作用jquery绑定事件有什么作用Mar 20, 2023 am 10:52 AM

jquery绑定事件的作用:将普通的事件event绑定在DOM节点上,当DOM节点被选中时,将事件与之绑定,方便用户提供相应的操作。jQuery中提供了四种事件绑定方式,分别是bind、live、delegate、on,对应的解除监听的函数分别是unbind、die、undelegate、off。

深入剖析jQuery事件绑定技巧深入剖析jQuery事件绑定技巧Feb 26, 2024 pm 06:33 PM

jQuery是一种流行的JavaScript库,它简化了网页开发中的许多常见任务,其中包括元素选择、DOM操作和事件处理。在jQuery中,事件绑定是非常常见和重要的操作之一。本文将详细探讨jQuery中事件绑定的方法,并通过具体的代码示例来帮助读者更好地理解和应用这些方法。1.bind()方法bind()方法是最传统也是最常用的事件绑定方法之一。它可

Vue文档中的事件绑定函数参数的使用方法Vue文档中的事件绑定函数参数的使用方法Jun 20, 2023 pm 02:06 PM

Vue是一个流行的JavaScript框架,它采用了数据驱动的思想来简化开发流程。Vue的事件绑定功能是非常强大的,可以对页面中的各种交互进行处理。在Vue的开发过程中,经常会使用到事件绑定函数参数,本文将详细介绍这个功能的使用方法。在Vue中,可以使用v-on指令来绑定事件。v-on指令后面跟着事件名和事件处理函数,例如:<bu

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 無盡。

熱門文章

倉庫:如何復興隊友
1 個月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
1 個月前By尊渡假赌尊渡假赌尊渡假赌

熱工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!