Satır içi Javascript (HTML'de) nasıl çalışır?

Bunun kötü bir uygulama olduğunu biliyorum. Mümkünse böyle kod yazmayın.

Elbette, kendimizi her zaman akıllı bir satır içi Javascript pasajının bir sorunu hızlı bir şekilde çözebileceği durumlarda bulacağız.

Böyle bir şey yazıldığında ne olduğunu (ve olası tuzakları) tam olarak anlamak için bu sorguyu takip ediyorum:

<a href="#" onclick="alert('Hi')">Click Me</a>

Anlayabildiğim kadarıyla bu işlevsel olarak aynı

<script type="text/javascript">
   $(function(){ // I use jQuery in this example
       document.getElementById('click_me').onclick = 
           function () { alert('Hi'); };
   });
</script>
<a href="#" id="click_me">Click Me</a>

Bundan çıkarım yaparak, özniteliğe atanan dizenin onclick, öğenin tıklama işleyicisine atanan anonim bir işlevin içine yerleştirildiği görülmektedir. Durum gerçekten bu mu?

Çünkü bunun gibi şeyler yapmaya başlıyorum:

<a href="#" onclick="$(this).next().fadeIn(); return false;">Display my next sibling</a> <!-- Return false in handler so as not to scroll to top of page! --> 

Hangisi çalışıyor. Ama bunun ne kadar bir hack olduğunu bilmiyorum. Şüpheli görünüyor çünkü geri döndürülen görünürde bir işlev yok!

Sorabilirsin, bunu neden yapıyorsun Steve? Satır içi JS kötü bir uygulamadır!

Dürüst olmak gerekirse, bir sayfanın bir bölümünü değiştirmek için kodun üç farklı bölümünü düzenlemekten yoruldum, özellikle de işe yarayıp yaramayacağını görmek için bir şeyin prototipini oluşturduğumda. Bu HTML öğesiyle özellikle ilgili kodun öğenin içinde tanımlanması çok daha kolaydır ve hatta bazen mantıklıdır : 2 dakika sonra bunun korkunç, berbat bir fikir olduğuna karar verdiğimde tüm div'i (veya her neyse ) ve sayfanın geri kalanında, oluşturma işlemini çok az yavaşlatan bir sürü gizemli JS ve CSS bozukluğum yok. Bu, referansın yerelliği kavramına benzer, ancak önbellek eksiklikleri yerine hatalara ve kod şişmesine bakıyoruz.

Neredeyse doğru anladınız, ancak thissatır içi koda sağlanan değeri hesaba katmadınız.

<a href="#" onclick="alert(this)">Click Me</a>

aslında şuna daha yakın:

<a href="#" id="click_me">Click Me</a>
<script type="text/javascript">
document.getElementById('click_me').addEventListener("click", function(event) {
    (function(event) {
        alert(this);
    }).call(document.getElementById('click_me'), event);
});
</script>

Satır içi olay işleyicileri this, olayın hedefine eşit olarak ayarlanır . Satır içi komut dosyasında anonim işlevi de kullanabilirsiniz

<a href="#" onclick="(function(){alert(this);})()">Click Me</a>

Sahip olduğunuzda tarayıcı ne yapar?

<a onclick="alert('Hi');" ... >

"onclick" in gerçek değerini aşağıdaki gibi etkili bir şekilde ayarlamaktır:

new Function("event", "alert('Hi');");

Yani bir "olay" parametresi bekleyen bir işlev yaratır. (IE değil; daha çok basit ve anonim bir işlev gibi.)

Görünüşe göre Olay İşleyicisi Nitelikleri etrafında birçok kötü uygulama fırlatılıyor. Kötü uygulama, mevcut özellikleri en uygun olduğu yerde bilmemek ve kullanmaktır. Etkinlik Nitelikleri tamamen W3C Belgeli standartlardır ve bunlarla ilgili kötü bir uygulama yoktur. Satır içi stilleri yerleştirmekten farklı değildir, bu da W3C Belgeli ve zaman zaman yararlı olabilir. Senaryo etiketlerine sarılmış olsun ya da olmasın, aynı şekilde yorumlanacaktır.

https://www.w3.org/TR/html5/webappapis.html#event-handler-idl-attributes

Sorunuzu yanıtlamanın en iyi yolu, onu eylem halinde görmektir .

<a id="test" onclick="alert('test')"> test </a> ​

Js içinde

var test = document.getElementById('test');
console.log( test.onclick ); 

Gördüğünüz gibi console, Chrome kullanıyorsanız, IE'de biraz farklı olsa da, içeri giren olay nesnesi ile anonim bir işlev yazdırır.

function onclick(event) {
   alert('test')
}

Satır içi olay işleyicileri hakkındaki bazı noktalarınıza katılıyorum. Evet, yazmaları kolay, ancak kodu birden fazla yerde değiştirmek zorunda olduğunuza katılmıyorum, kodunuzu iyi yapılandırırsanız, bunu yapmanız gerekmez.

Şüpheli görünüyor çünkü geri döndürülen görünürde bir işlev yok!

Nesnenin tıklama olayına eklenen anonim bir işlevdir.

Bunu neden yapıyorsun Steve?

Neden böyle yapıyorsun ..... Ah boşver, bahsettiğin gibi, gerçekten kötü bir uygulama yaygın olarak benimseniyor :)

Bunu konsolda deneyin:

var div = document.createElement('div');

div.setAttribute('onclick', 'alert(event)');

div.onclick

Chrome'da şunu gösterir:

function onclick(event) {
  alert(event)
}

... ve standart dışı namemalıdır div.onclickDİR "onclick".

Bu nedenle, bunun anonim olup olmadığı "anonim" tanımınıza bağlıdır. Boş dizge var foo = new Function()nerede foo.nameolduğu gibi bir şeyle karşılaştırın ve şöyle bir foo.toString()şey üretecektir:

function anonymous() {

}