Jquery.click () vs onClick

Məndə böyük bir jQuery proqramı var və klik hadisələri üçün aşağıdakı iki üsuldan istifadə edirəm.

Birinci üsul

HTML

 <div id="myDiv">Some Content</div> 

Jquery

 $('#myDiv').click(function(){ //Some code }); 

İkinci üsul

HTML

 <div id="myDiv" onClick="divFunction()">Some Content</div> 

JavaScript funksiyası zəng

 function divFunction(){ //Some code } 

Mənim müraciətimdə birinci və ya ikinci üsulu istifadə edirəm. Hansı biri yaxşıdır? Performans üçün daha yaxşı? Və standart?

511
27 сент. Techie tərəfindən təyin olunan 27 Sentyabr. 2012-09-27 21:02 '12 at 21:02 2012-09-27 21:02
@ 17 cavab

$('#myDiv').click(function(){ , standart hadisə-qeydiyyat modelindən daha yaxşıdır (JQuery daxili addEventListenerattachEvent ).

Əsasən, bir hadisəni müasir bir şəkildə qeyd etmək hadisələri idarə etmək üçün qeyri- səlis yoludur. Ayrıca, hədəf üçün birdən çox hadisə dinləyicisini qeyd etmək üçün, eyni hədəf üçün addEventListener() bilərsiniz.

 var myEl = document.getElementById('myelement'); myEl.addEventListener('click', function() { alert('Hello world'); }, false); myEl.addEventListener('click', function() { alert('Hello world again!!!'); }, false); 

http://jsfiddle.net/aj55x/1/

Niyə addEventListener istifadə? (MDN)

addEventListener, W3C DOM-da göstərildiyi kimi bir hadisə dinləyicisini qeydə almaq üçün bir yoldur. Onun üstünlükləri aşağıdakılardır:

  • Birdən çox hadisə işleyicisini əlavə etməyə imkan verir. Bu xüsusilə DHTML kitabxanaları və ya Mozilla uzantıları üçün faydalıdır, digər kitabxanalar / uzantılar da yaxşı işlədilməlidir.
  • Bu, dinləyici aktivləşdirildikdə (anti-bubble ələ) faza daha incə bir nəzarət verir.
  • Yalnız HTML elementləri ilə deyil, hər hansı DOM elementi ilə işləyir.

Müasir bir hadisə qeydiyyatı haqqında daha ətraflı oxuyun → http://www.quirksmode.org/js/events_advanced.html

HTML xüsusiyyətləri kimi məsələn, digər üsullar:

 <button onclick="alert('Hello world!')"> 

Və ya DOM elementinin xüsusiyyətləri , məsələn:

 myEl.onclick = function(event){alert('Hello world');}; 

köhnə və asan yazıla bilər.

HTML xüsusiyyətindən qaçınmaq lazımdır, çünki işarələmə daha çox və daha az oxunandır. Məzmun / quruluş və davranış məsələləri yaxşı ayrılmayıb, səhvləri tapmaq çətinləşdirir.

DOM elementi üsulu ilə problem yalnız bir hadisə işləyicisi hər hadisə üçün elementə bağlana bilər.

Ənənəvi hadisələrin idarə edilməsi haqqında daha ətraflı məlumat → http://www.quirksmode.org/js/events_tradmod.html

MDN Link: https://developer.mozilla.org/en-US/docs/DOM/event

512
27 сент. Cavab Səlvəkumar Arumugam'a verildi 2012-09-27 21:04 '12 at 21:04 2012-09-27 21:04

Daha yaxşı performans üçün, öz JavaScript istifadə edin. Daha sürətli inkişaf üçün jQuery istifadə edin. JQuery vs Native Element Performans performans müqayisəsi oldu.

Windows Server 2008 R2 / 7 64-bitdə Firefox 16.0-un 32 bit versiyasında bir test keçirdim

 $('span'); // 6,604 operations per second document.getElementsByTagName('span'); // 10,331,708 operations/sec 
border=0

Tədbirlər üçün, brauzerin yerli hadisələrini jquery tetikleyicisine və ya jQuery vs Native Click Event Binding- ə qarşı yoxlayın.

Chrome'da test 22.0.1229.79 Windows Server 2008 R2 / 7 64-bit üçün 32-bit versiyası

 $('#jquery a').click(window.testClickListener); // 2,957 operations/second [].forEach.call( document.querySelectorAll('#native a'), function(el) { el.addEventListener('click', window.testClickListener, false); }); // 18,196 operations/second 
59
27 сент. cavab Marian Zburlea 27 sep verilir . 2012-09-27 21:09 '12 at 21:09 2012-09-27 21:09

Anladığım qədər, jQuery-nin istifadə olunmaması və ya olmadığı sualınız deyil. Əksinə HTML-də və ya hadisə dinləyiciləri vasitəsilə inline hadisələri bağlamaq daha yaxşıdırmı?

Daxili bağlama köhnəlmişdir. Bundan əlavə, müəyyən bir hadisə üçün yalnız bir funksiyanı bağlaya bilərsiniz.

Buna görə də, hadisə dinləyicilərindən istifadə etməyi məsləhət görürəm. Beləliklə, bir çox funksiyanı bir hadisə ilə əlaqələndirə və lazım olduqda, daha sonra onları həll edə bilərsiniz. Bu təmiz javascript kodunu nəzərdən keçirin:

 querySelector('#myDiv').addEventListener('click', function () { // Some code... }); 

Bu, ən müasir brauzerlərdə işləyir.

Lakin, artıq jQuery-ni layihəyə daxil etdikdə, jQuery istifadə edin: .on və ya .click .

37
27 сент. Michał Miszzzyszyn tərəfindən verilmiş cavab 27 sentyabr 2012-09-27 21:12 '12 saat 09:12 'da 2012-09-27 21:12

$('#myDiv').click javascript kodunu $('#myDiv').click daha yaxşıdır. < Və struktur davranışını qorumağa çalışmalıyıq . Bu, həqiqətən, kömək edir.

13
27 сент. Geekman tərəfindən verilmiş cavab 27 sentyabr 2012-09-27 21:05 '12 at 21:05 2012-09-27 21:05

Bunun üçün get, çünki həm standart, həm də performans məlumatları verəcəkdir.

  $('#myDiv').click(function(){ //Some code }); 

İkinci üsul - sadə JavaScript kodu və jQuery-dən daha sürətli. Amma burada performans eyni olacaq.

13
28 сент. Rahul cavab Sep 28 2012-09-28 09:51 '12 saat 09:51 'da 2012-09-28 09:51

Onları birləşdirə, funksiyanı kliklə bağlamaq üçün jQuery istifadə edə bilərsiniz.

 <div id="myDiv">Some Content</div> $('#myDiv').click(divFunction); function divFunction(){ //some code } 
12
27 сент. cavab CaffGeek 27 sep verilir . 2012-09-27 21:04 '12 at 21:04 2012-09-27 21:04

IMHO, onclick yalnız aşağıdakı şərtlər yerinə yetirildiyi zaman .click üsuludur:

  • səhifədə bir çox element var
  • Klik hadisəsi üçün yalnız bir hadisə qeydə alınmışdır.
  • Mobil cihazların / batareyaların performansından narahatsınız

Mən bu fikri meydana gətirdim, çünki mobil qurğulardakı JavaScript mühərrikləri bir nəsildə edilən iş masaüstünə nisbətən 4-7 dəfə daha yavaş. Mən mobil cihazımdakı sayta daxil olduqda və titrəmə çəkilmək üçün nifrət edirəm, çünki jQuery istifadəçi təcrübəsi və batareyanın ömrü səbəbindən bütün hadisələri əlaqələndirir. Digər bir sonrakı dəstək faktoru olsa da, bu yalnız dövlət qurumları üçün bir problem olmalıdır;), JavaScript prosesinin davam etdiyini bildirən bir mesajla bir pop-up IE7 açılır penceresi var ... prosesi gözləyin və ya ləğv edin. Bu jQuery vasitəsilə bağlamaq üçün bir çox element var idi.

10
19 марта '13 в 22:25 2013-03-19 22:25 Cavab Thomas Vanderhoof tərəfindən 19 Mart 2013 tarixində saat 10: 25- də verilmişdir 2013-03-19 22:25

Fəlsəfə əsərlərindədir. Klik () funksiyasını istifadə etsəniz, bir neçə funksiyanı əlavə edə bilərsiniz, lakin bir xüsusiyyət istifadə etsəniz, yalnız bir funksiya yerinə yetirilir - sonuncu.

Demo

HTML

 <span id="JQueryClick">Click #JQuery</span> </br> <span id="JQueryAttrClick">Click #Attr</span> </br> 

Javascript

 $('#JQueryClick').click(function(){alert('1')}) $('#JQueryClick').click(function(){alert('2')}) $('#JQueryAttrClick').attr('onClick'," alert('1')" ) //This doesn't work $('#JQueryAttrClick').attr('onClick'," alert('2')" ) 

Performansdan danışırıqsa, istənilən halda, birbaşa istifadə hər zaman daha sürətli olur, ancaq atributu yalnız bir funksiyanı təyin edə bilərsiniz.

9
27 сент. Anton Baksheyevin cavabı 27 dəq . 2012-09-27 21:32 '12 at 21:32 2012-09-27 21:32

Burada problemlər arasındakı fərqlər vacibdir, buna görə hadisənin bağlanması ümumiyyətlə qəbul edilmiş bir metoddur. Mövcud cavabların bir çoxu bu əsasən budur.

Lakin, deklarativ markalanma fikri çox tez rədd edilmir. Bu yer və Angularjs kimi çərçivələrlə mərkəzi elementdir.

<div id="myDiv" onClick="divFunction()">Some Content</div> qədər yaxşı olduğu üçün bir sıra inkişafçılar onu təhqir etdiyinə görə bir anlaşma olmalıdır. Beləliklə, o, tables kimi küfr nisbətlərinə çatdı. Bəzi developers, həqiqətən, cədvəlli məlumatlar üçün tables qaçırlar. İnsanlar başa düşmədən necə hərəkət etdiyinin böyük bir nümunəsidir.

Baxmayaraq mənim davranışlarımı fikirlərimdən ayrı tutmağı düşünürəm. Nişanlandığımın olduğunu eşitdirən bir problem görmürəm (bunu necə edir, bu davranış deyil). Bu ilkin yükləmək üçün JavaScript komponentləri kimi faktiki onClick özniteliği və ya xüsusi bir xüsusiyyət şəklində ola bilər.

Beləliklə, yalnız markupa baxaraq, javascript hadisə bağlamalarını geri qaytarmağa çalışmaq yerinə nə baş verdiyini görə bilərsiniz.

Beləliklə, yuxarıda göstərilən üçüncü bir alternativ kimi, data atributlarından istifadə edərək, deklarativ şəkildə markalanma davranışını elan edir. Davranış nəzərə alınmır, amma ilk baxışdan baş verənləri görə bilərsiniz.

Örnek bootstrap:

 <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here some amazing content. It very engaging. Right?">Click to toggle popover</button> 

Mənbə: http://getbootstrap.com/javascript/#popovers

Qeyd İkinci nümunənin əsas cəhəti qlobal ad boşluğunun çirklənməsidir. Bu yuxarıdakı üçüncü alternativdən və ya burular və onların ng-click öznitelikleri kimi avtomatik çərçivə ilə avtomatik bir sahədə istifadə edərək atlana bilər.

7
18 окт. Cavab Chris, Oct 18 2014-10-18 15:16 '14 at 15:16 2014-10-18 15:16

Onlardan heç biri daha yaxşıdır, çünki onlar müxtəlif məqsədlər üçün istifadə edilə bilər. onClick ( onClick ) çox az işləyir, amma çox fərq edəcəyinizə şübhə edirəm.

onClick fərqli şeylər etdiyini onClick lazımdır: onClick hər hansı bir jQuery kolleksiyasına onClick bilər, onClick isə onClick istədiyiniz elementlər üçün inline istifadə edilməlidir. Siz də onClick istifadə etmək üçün yalnız bir hadisə onClick , onClick isə hadisələri əlaqələndirməyə davam etməyə imkan verir.

Mənim fikrimcə, ardıcıl və sadəcə istifadə edirəm. Hər yerə .click və bütün JavaScript kodunu .click HTML-dən ayırın.

onClick istifadə onClick . Nə etdiyinizi bilmirsinizsə, onu istifadə etmək üçün heç bir səbəb yoxdur və ehtimal etmirsiniz.

4
27 сент. Cavab 27 sentyabr Explosion Pills tərəfindən verilmişdir 2012-09-27 21:05 '12 at 21:05 2012-09-27 21:05
 <whatever onclick="doStuff();" onmouseover="in()" onmouseout="out()" /> 

onclick, onmouseover, onmouseout və s. hadisələr əslində performansı zərərlidir (Internet Explorer'da, əsasən getmək rəqəmi). Visual Studio'yu istifadə etsəniz, onlarla birlikdə səhifəni başlatdığınızda, onların hər biri ayrı bir SCRIPT blokunu yaradır və bu da performansını yavaşlatır.

Problemlərin ayrılmasına ehtiyacınız olduğunu qeyd etməmək: JavaScript və layouts ayrılmalıdır!

Bu hadisələrin hər hansı birinə hətta evenness yaratmaq hər zaman daha yaxşıdır, bir hadisə hər biri üçün minlərlə ayrı SCRIPT blok yaratmaq yerinə yüzlərlə / minlərlə elementi ələ keçirə bilər!

(Həmçinin hər kəs danışır).

4
27 сент. Mark Pieszak tərəfindən verilmiş cavab - DevHelp.Online 27 Sentyabr. 2012-09-27 21:18 '12 saat 21:18 'da 2012-09-27 21:18

Yaxşı, jQuery əsas fikirlərindən biri xoşagəlməz HTML- dən JavaScript ayırmaqdır. Birinci yol yoludur.

3
27 сент. supernova tərəfindən verilən cavabı Sep 27 2012-09-27 21:06 '12 at 21:06 2012-09-27 21:06

Çox hallarda, jQuery üçün ən yaxşı seçimdir, performans yalnız meyar olduğunda, jQuery JavaScript istifadə edir və inkişafı asanlaşdırır. JQuery istifadə edə bilərsiniz, çünki bu, performansı çox aza endirir. Sizin xüsusi halında, performans fərqiniz dözülməzdir.

3
27 сент. Cavab Adil tərəfindən 27 sentyabrda verilir. 2012-09-27 21:05 '12 at 21:05 2012-09-27 21:05

Birincisi, seçimdir. Bu, geniş iş qeydiyyatı modeli [s] istifadə edir , yəni birdən çox işleyiciyi eyni elementə əlavə edə bilərsiniz. Olay obyektinə asanlıqla daxil ola bilərsiniz və operator işlədilən hər hansı sahədə yaşaya bilər. Bundan əlavə dinamik, yəni istənilən vaxt çağırıla bilərik və xüsusilə dinamik şəkildə yaradılan elementlər üçün uyğundur. JQuery istifadə etdiyinizə baxmayaraq, başqa bir kitabxana və ya öz metodunuz birbaşa məsələ deyildir.

Daxili atributları istifadə edən ikinci üsul, bir çox qlobal funksiyanı tələb edir (bu, çirkli ad boşluğuna gətirib çıxarır) və content / strukturunu (HTML) davranışla (JavaScript) qarışdırır. Onu istifadə etməyin.

Performans və ya standartlar haqqında suallara asanlıqla cavab vermək mümkün deyil. İki üsul tamamilə fərqlidir və fərqli şeylər edir. Birincisi daha güclü, ikincisi də pisdir (pis stil hesab olunur).

2
27 сент. Cavab Bergi tərəfindən verilib 27 Sentyabr. 2012-09-27 21:05 '12 at 21:05 2012-09-27 21:05

onclick istifadə etmək üçün ilk yol jQuery deyil, yalnız onclick deyil, belə ki, jQuery-in yükünü almırsınız. JQuery metodu seçicilərlə uzadıla bilər, əgər hər elementə hadisə işəgötürən əlavə etmədən onu digər elementlərə əlavə etsəniz, ancaq jQuery istifadə etməyiniz lazım olsa, indi bir sual var.

Şəxsən, jQuery istifadə etdiyinizdən bəri, onunla sıxılmaq olardı, çünki ardıcıl və formatdan düzəlişləri ayırır.

2
27 сент. Cavab Dustin Laine tərəfindən verilir . 2012-09-27 21:05 '12 at 21:05 2012-09-27 21:05

$ ('# Sendmail'). Tıklayınız (function () {

  var name = $('#name').val(); var lastname = $('#lastname').val(); var email = $('#email').val(); var subject = $('#subject').val(); 
0
20 дек. Cavab lenin uk verilir 20 dec. 2018-12-20 12:02 '18 saat 12:02 'da 2018-12-20 12:02

Düyməni tıkladığınızda javascriptin yerinə yetirilməsi:

 <button onclick="myFunction()">Click me</button> <script> function myFunction() { document.getElementById("demo").innerHTML = "Hello World"; } </script> 
-2
01 февр. cavab Siddharam Padamgond 01 fevral. 2018-02-01 12:32 '18 saat 12:32 'də 2018-02-01 12:32

yazıları ilə bağlı digər suallar və ya bir sual