cari
Rumahhujung hadapan webtutorial jsPemahaman mendalam tentang kemahiran JS event binding_javascript

1. Model acara tradisional

Terdapat batasan dalam model acara tradisional.

Model sebaris digunakan dalam bentuk atribut tag HTML dan dicampur dengan HTML Kaedah ini sudah pasti menyebabkan masalah pengubahsuaian dan pengembangan, dan jarang digunakan lagi.

Model skrip adalah untuk menulis fungsi pemprosesan acara ke dalam fail js, mendapatkan elemen daripada halaman dan mengikat fungsi acara yang sepadan untuk mencetuskan pelaksanaan. Tetapi terdapat juga kekurangan:

1. Sesuatu acara terikat kepada berbilang fungsi mendengar acara, dan yang terakhir akan menggantikan yang pertama.

2. Situasi di mana pengikatan berulang perlu dihadkan

3. Objek acara piawai

2. Pengikat acara moden

Peristiwa peringkat DOM2 mentakrifkan dua kaedah untuk menambah dan memadamkan acara: addEventListener() dan removeEventListener() Mereka masing-masing menerima tiga parameter: nama acara, fungsi, menggelegak atau menangkap nilai Boolean (benar bermakna menangkap, palsu bermakna mempertaruhkan Bubble).

Sejajar dengan itu, IE menyediakan dua kaedah yang serupa, attachEvent() dan detachEvent(), tetapi dua kaedah IE mempunyai masalah lain: objek ini tidak boleh dilalui (ini dalam IE menunjuk ke tetingkap Anda boleh menggunakan kaedah panggilan penyamaran objek:

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); 
}); 
} 
};

Walau bagaimanapun, oleh kerana fungsi tanpa nama dilaksanakan semasa menambah, ia tidak boleh dipadamkan selepas menambah, selain itu, kaedah yang disediakan oleh IE juga akan menyebabkan masalah tidak dapat melaksanakan acara mengikat secara berurutan dan menyebabkan kebocoran memori.

Untuk menyelesaikan siri masalah ini, perlu merangkumkan lagi kaedah Untuk pelayar lain, gunakan standard tahap DOM2 Untuk IE, gunakan penambahan dan pemadaman berdasarkan mod tradisional >

1. Menambah menggunakan jadual cincang JS untuk menyimpan peristiwa objek, dan memberikan nilai ID kepada setiap peristiwa objek Menurut susunan panggilan yang ditambahkan, mula-mula tentukan sama ada fungsi pemprosesan yang sama wujud . Fungsi ditambahkan pada jadual cincang, yang menyelesaikan masalah tidak dapat dilaksanakan secara berurutan dan ditambah berulang kali

2. Apabila memadam, padanan fungsi traversal dinilai, dan jika wujud, padamkannya

Ringkasan:

Saya tidak mempunyai pemahaman mendalam tentang pengikatan acara JS sebelum ini, malah saya menggunakan model pengikatan acara tradisional, dan pemahaman saya tentang pelaksanaan program masih terlalu cetek perpustakaan. Walaupun perpustakaan js yang serupa dengan JQuery telah mencapai kesan pengkapsulan yang baik dari mekanisme pengikatan data, tetapi anda hanya mengetahuinya dan tidak tahu mengapa, anda masih berasa seperti anda berada dalam kegelapan. anda akan mempunyai perasaan pencerahan secara tiba-tiba, dan anda juga akan menyedari bahawa untuk membuat program yang serasi dan serba boleh, anda perlu mempertimbangkan banyak kandungan dan menyelesaikan banyak masalah, dan anda secara beransur-ansur menjadi lebih jelas tentang masalah ini.

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi 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

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

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

深度探讨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绑定事件三种方式,希望对大家有所帮助!

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

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Alat panas

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SecLists

SecLists

SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.

EditPlus versi Cina retak

EditPlus versi Cina retak

Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod

mPDF

mPDF

mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),