Heim Web-Frontend js-Tutorial JavaScript的事件绑定(方便不支持js的时候)_javascript技巧

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

May 16, 2016 pm 05:20 PM
事件绑定

首先,比如我们使用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>

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Repo: Wie man Teamkollegen wiederbelebt
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Wie viele Möglichkeiten gibt es, Ereignisse in JQuery zu binden? Wie viele Möglichkeiten gibt es, Ereignisse in JQuery zu binden? Nov 09, 2020 pm 03:30 PM

Es gibt vier Möglichkeiten, Ereignisse in jquery zu binden: die Methoden bind(), live(), delegate() und on(). Die Methode bind() kann Ereignisse nur an vorhandene Elemente binden, während die Methode live() on () und Delegate() unterstützen alle die Ereignisbindung für neu hinzugefügte Elemente in der Zukunft.

Lösen Sie das Problem des UniApp-Fehlers: Das Ereignis „xxx' ist nicht gebunden Lösen Sie das Problem des UniApp-Fehlers: Das Ereignis „xxx' ist nicht gebunden Nov 25, 2023 am 10:56 AM

Beim Entwickeln von Anwendungen mit UniApp kann die folgende Fehlermeldung angezeigt werden: „xxx“-Ereignis ist nicht gebunden. Dies wird durch den Ereignisbindungsmechanismus von UniApp verursacht, der zur Lösung dieses Problems richtig eingestellt werden muss. 1. Ursache des Problems In UniApp wird die Ereignisbindung von Seitenkomponenten über die v-on-Anweisung abgeschlossen. Fügen Sie der Vorlage beispielsweise eine Schaltflächenkomponente hinzu: &lt;button@click="onClick"&gt;Click Me&lt;/butto

Eine ausführliche Diskussion der jQuery-Ereignisbindungstechnologie Eine ausführliche Diskussion der jQuery-Ereignisbindungstechnologie Feb 26, 2024 pm 07:36 PM

jQuery ist eine beliebte JavaScript-Bibliothek, die häufig für die Interaktivität auf Webseiten verwendet wird. Unter diesen ist die Ereignisbindung eine der wichtigen Funktionen von jQuery, mit der die Ereignisbindung eine Reaktion auf Benutzerinteraktionen realisieren kann. In diesem Artikel wird die jQuery-Ereignisbindungstechnologie untersucht und spezifische Codebeispiele gegeben. 1. Das Grundkonzept der Ereignisbindung. Unter Ereignisbindung versteht man das Hinzufügen eines Ereignis-Listeners zu einem DOM-Element, um bestimmte Vorgänge auszuführen, wenn ein bestimmtes Ereignis auftritt. Wählen Sie in jQuery das gewünschte aus

Wie füge ich Ereignisse zu Elementen hinzu? Drei Möglichkeiten zum Parsen von JS-Bindungsereignissen Wie füge ich Ereignisse zu Elementen hinzu? Drei Möglichkeiten zum Parsen von JS-Bindungsereignissen Aug 04, 2022 pm 07:27 PM

Als Skriptsprache kann JavaScript Ereignisse an Elemente auf der Seite binden, sodass beim Eintreten eines bestimmten Ereignisses automatisch der entsprechende Ereignishandler aufgerufen werden kann, um das Ereignis zu verarbeiten. Wie fügt man also Ereignisse zu Elementen hinzu? Der folgende Artikel stellt Ihnen drei Möglichkeiten vor, Ereignisse in JS zu binden. Ich hoffe, er wird Ihnen hilfreich sein!

Was soll ich tun, wenn die Ereignisbindung „Klick' in meiner Vue-Anwendung ungültig ist? Was soll ich tun, wenn die Ereignisbindung „Klick' in meiner Vue-Anwendung ungültig ist? Jun 24, 2023 pm 03:51 PM

Vue ist ein beliebtes JavaScript-Framework zum Erstellen moderner Webanwendungen. In Vue verwenden wir normalerweise Direktiven, um DOM-Elemente zu bedienen. Unter diesen ist das „Klick“-Ereignis eine der am häufigsten verwendeten Anweisungen. In Vue-Anwendungen stoßen wir jedoch häufig auf Situationen, in denen die „Klick“-Ereignisbindung ungültig ist. In diesem Artikel wird erläutert, wie Sie dieses Problem lösen können. Der erste Schritt bei der Prüfung, ob ein Element vorhanden ist, besteht darin, zu bestätigen, ob das Element, an das Sie ein „Klick“-Ereignis binden möchten, vorhanden ist. Wenn das Element nicht existiert,

Welche Funktion hat das JQuery-Bindungsereignis? Welche Funktion hat das JQuery-Bindungsereignis? Mar 20, 2023 am 10:52 AM

Die Funktion des Jquery-Bindungsereignisses: Binden Sie gewöhnliche Ereignisse an DOM-Knoten. Wenn der DOM-Knoten ausgewählt ist, binden Sie das Ereignis daran, um Benutzern die Bereitstellung entsprechender Vorgänge zu erleichtern. jQuery bietet vier Ereignisbindungsmethoden, nämlich bind, live, Delegate und on, und die entsprechenden nicht abhörenden Funktionen sind unbind, die, undelegate und off.

Eingehende Analyse der jQuery-Ereignisbindungstechniken Eingehende Analyse der jQuery-Ereignisbindungstechniken Feb 26, 2024 pm 06:33 PM

jQuery ist eine beliebte JavaScript-Bibliothek, die viele häufige Aufgaben in der Webentwicklung vereinfacht, darunter Elementauswahl, DOM-Manipulation und Ereignisbehandlung. In jQuery ist die Ereignisbindung eine der häufigsten und wichtigsten Operationen. In diesem Artikel werden die Ereignisbindungsmethoden in jQuery im Detail untersucht und anhand spezifischer Codebeispiele den Lesern geholfen, diese Methoden besser zu verstehen und anzuwenden. 1.bind()-Methode Die bind()-Methode ist eine der traditionellsten und am häufigsten verwendeten Methoden zur Ereignisbindung. es kann

So verwenden Sie Ereignisbindungsfunktionsparameter in der Vue-Dokumentation So verwenden Sie Ereignisbindungsfunktionsparameter in der Vue-Dokumentation Jun 20, 2023 pm 02:06 PM

Vue ist ein beliebtes JavaScript-Framework, das datengesteuerte Ideen nutzt, um den Entwicklungsprozess zu vereinfachen. Die Ereignisbindungsfunktion von Vue ist sehr leistungsstark und kann verschiedene Interaktionen auf der Seite verarbeiten. Während des Entwicklungsprozesses von Vue werden häufig Parameter der Ereignisbindungsfunktion verwendet. In diesem Artikel wird die Verwendung dieser Funktion ausführlich vorgestellt. In Vue können Sie die v-on-Direktive verwenden, um Ereignisse zu binden. Auf die v-on-Direktive folgen der Ereignisname und die Ereignisbehandlungsfunktion, zum Beispiel: &lt;bu

See all articles