Rumah hujung hadapan web tutorial js JavaScript的事件绑定(方便不支持js的时候)_javascript技巧

JavaScript的事件绑定(方便不支持js的时候)_javascript技巧

May 16, 2016 pm 05:20 PM
mengikat acara

首先,比如我们使用JavaScript来加强我们的网页,但是我们要考虑到,如果用户的浏览器不支持JavaScript,或者用户disable了JavaScript的功能,那我们的网页能不能正常显示呢?例如下面的例子,

复制代码 代码如下:

其中popUp这个函数是自定义的,新打开一个窗口来限制URL中的网页。但是如果当客户端不支持时,那这个网页就不能正常工作了。所以我们在这样做的使用,也考虑到更多,使用如下的代码就会显得更加合适。

复制代码 代码如下:

接着,作者以CSS为例子。在我们使用CSS的过程中,我们发现,除了我们使用了把CSS文件给加载进来外,我们没有在我们的网页内容中加入任何css相关的代码,这样就能很好的把structure和style分开了,即我们的css的代码没有侵入我们的主要代码里面。这样就算客户端不知道css,但是我们的主要内容客户还是可以看到的,我们的内容结构也能在客户那里显示出来。所以JavaScript相当于behavior层,css相当于presentation层。JavaScript也能像CSS一样做到没有侵入性。下面是书上的一个例子。

复制代码 代码如下:


上面这段代码已经能保证在客户端不支持JavaScript的情况下仍然可以正常的工作,但是上面的代码中出现了onclick这样的event handler。所以现在我们使用像CSS中的方式来完成我们所要的功能。如下:

复制代码 代码如下:


这样,我们能在这个页面加载完成的时候,执行window.onload中,来检测哪些是使用了class,然后统一使用popUp的方法。如下代码

复制代码 代码如下:

var links = document.getElementsByTagName("a");
for (var i=0 ; i if (links[i].getAttribute("class") == "popup") {
  links[i].onclick = function() {
   popUp(this.getAttribute("href"));  //Attention use this in  this place. Because this is equals onClick = "popUp(this.href)"
   //so we cann't use links[i].
   return false;
  }
 }
}

这样就能更少地侵入我们html代码了。

  最后,作者讲了我们要做到向后兼容和JavaScript的最小化。向后兼容,我们可以使用类似if(document.getElementById)来测试这个方法时候存在,存在了才能使用。JavaScript代码的最小化主要是为了减少JavaScript,这样能加快我们网页的加载。

  下面我在看书的时候碰到不懂的问题,希望大虾们能帮忙解决一下。

   对于<script>应该放在哪里?JavaScript DOM编程艺术中所说的,我们可以把<script>放在</script>

Kenyataan Laman Web ini
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

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

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

jquery绑定事件有几种方式? jquery绑定事件有几种方式? Nov 09, 2020 pm 03:30 PM

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

Selesaikan masalah ralat UniApp: acara 'xxx' tidak terikat Selesaikan masalah ralat UniApp: acara 'xxx' tidak terikat Nov 25, 2023 am 10:56 AM

Apabila membangunkan aplikasi menggunakan UniApp, anda mungkin menghadapi mesej ralat berikut: acara 'xxx' tidak terikat. Ini disebabkan oleh mekanisme mengikat acara UniApp, yang perlu ditetapkan dengan betul untuk menyelesaikan masalah ini. 1. Punca masalah Dalam UniApp, pengikatan peristiwa komponen halaman diselesaikan melalui arahan v-on. Contohnya, tambahkan komponen butang pada templat: &lt;button@click="onClick"&gt;Click Me&lt;/butto

Perbincangan mendalam tentang teknologi mengikat acara jQuery Perbincangan mendalam tentang teknologi mengikat acara jQuery Feb 26, 2024 pm 07:36 PM

jQuery ialah perpustakaan JavaScript popular yang digunakan secara meluas untuk mengendalikan interaktiviti dalam halaman web. Antaranya, pengikatan peristiwa adalah salah satu fungsi penting jQuery Melalui pengikatan peristiwa, respons kepada interaksi pengguna boleh dicapai. Artikel ini akan meneroka teknologi mengikat acara jQuery dan memberikan contoh kod khusus. 1. Konsep asas pengikatan peristiwa Pengikatan peristiwa merujuk kepada menambahkan pendengar peristiwa pada elemen DOM untuk melaksanakan operasi tertentu apabila peristiwa tertentu berlaku. Dalam jQuery, pilih yang dikehendaki

Bagaimana untuk menambah acara pada elemen? Tiga cara untuk menghuraikan peristiwa mengikat JS Bagaimana untuk menambah acara pada elemen? Tiga cara untuk menghuraikan peristiwa mengikat JS Aug 04, 2022 pm 07:27 PM

Sebagai bahasa skrip, JavaScript boleh mengikat acara pada elemen pada halaman, supaya apabila peristiwa tertentu berlaku, pengendali acara yang sepadan boleh dipanggil secara automatik untuk mengendalikan acara tersebut. Jadi bagaimana untuk menambah acara pada elemen? Artikel berikut akan memperkenalkan kepada anda tiga cara untuk mengikat acara dalam JS Saya harap ia akan membantu anda!

Apakah yang perlu saya lakukan jika pengikatan acara 'klik' tidak sah dalam aplikasi Vue saya? Apakah yang perlu saya lakukan jika pengikatan acara 'klik' tidak sah dalam aplikasi Vue saya? Jun 24, 2023 pm 03:51 PM

Vue ialah rangka kerja JavaScript yang popular untuk membina aplikasi web moden. Dalam Vue, kami biasanya menggunakan arahan untuk mengendalikan elemen DOM. Antaranya, acara "klik" adalah salah satu arahan yang biasa digunakan Walau bagaimanapun, dalam aplikasi Vue, kami sering menghadapi situasi di mana pengikatan acara "klik" tidak sah. Artikel ini menerangkan cara menyelesaikan masalah ini. Langkah pertama dalam menyemak sama ada unsur wujud adalah untuk mengesahkan sama ada unsur yang anda ingin ikat acara "klik" wujud. Jika unsur itu tidak wujud,

Apakah fungsi acara mengikat jquery Apakah fungsi acara mengikat jquery Mar 20, 2023 am 10:52 AM

Fungsi peristiwa mengikat jquery: Mengikat peristiwa biasa ke nod DOM Apabila nod DOM dipilih, mengikat peristiwa itu untuk memudahkan pengguna menyediakan operasi yang sepadan. jQuery menyediakan empat kaedah mengikat peristiwa, iaitu mengikat, hidup, mewakilkan dan hidup, dan fungsi nyah dengar yang sepadan ialah nyahikat, mati, nyahdelegasikan dan dimatikan.

Analisis mendalam tentang teknik mengikat acara jQuery Analisis mendalam tentang teknik mengikat acara jQuery Feb 26, 2024 pm 06:33 PM

jQuery ialah perpustakaan JavaScript popular yang memudahkan banyak tugas biasa dalam pembangunan web, termasuk pemilihan elemen, manipulasi DOM dan pengendalian acara. Dalam jQuery, pengikatan peristiwa adalah salah satu operasi yang sangat biasa dan penting. Artikel ini akan meneroka kaedah mengikat acara dalam jQuery secara terperinci dan menggunakan contoh kod khusus untuk membantu pembaca memahami dan menggunakan kaedah ini dengan lebih baik. Kaedah 1.bind() Kaedah bind() ialah salah satu kaedah mengikat peristiwa yang paling tradisional dan biasa digunakan. ia boleh

Cara menggunakan parameter fungsi mengikat peristiwa dalam dokumentasi Vue Cara menggunakan parameter fungsi mengikat peristiwa dalam dokumentasi Vue Jun 20, 2023 pm 02:06 PM

Vue ialah rangka kerja JavaScript popular yang menggunakan idea terdorong data untuk memudahkan proses pembangunan. Fungsi mengikat acara Vue sangat berkuasa dan boleh mengendalikan pelbagai interaksi pada halaman. Dalam proses pembangunan Vue, parameter fungsi mengikat peristiwa sering digunakan Artikel ini akan memperkenalkan penggunaan fungsi ini secara terperinci. Dalam Vue, anda boleh menggunakan arahan v-on untuk mengikat acara. Arahan v-on diikuti oleh nama acara dan fungsi pengendalian acara, contohnya: &lt;bu

See all articles