2011-09-12 10 views
6
<html> 
<head> 
<title>FML</title> 

<script type="text/javascript"> 

function function1(e, div) { 
div.innerHTML="this works" 
document.getElementById('myspan').innerHTML= 'x-pos on click: ' + e.clientX 
div.addEventListener("mousemove", function(){test(event, this)}, true); 
} 

function test(e, div) { 
div.innerHTML+='<br/>so does this' 
//This doesn't work. Can't add event as a parameter to function that has to be executed when using addEventListener 
document.getElementById('myspan2').innerHTML= 'y-pos on move: ' + e.clientY 
} 

</script> 
</head> 
<body> 
<span id="myspan">&nbsp;</span> 
<span id="myspan2">&nbsp;</span> 
<div style="width:100px;height:100px;background-color:blue;overflow:hidden;" onclick="function1(event, this)"> 
</body> 
</html> 

Mavi bölüme tıklayın.işlevini addEventListener kullanarak (FF/IE'de çalışmaz) işlev içinde parametre olarak ekleyerek. Javascript

I, etkinlik mouseover eklemek istediğiniz o testi() yürütmek zorunda - aşağıdaki parametreleri içermelidir fonksiyonu: fonksiyon testi (e div) Ben "bir almaya devam adlandırılan bu, olayı

Chrome ve Safari'de mükemmel bir şekilde çalıştığı halde, firefox ve IE'deki hata tanımlanmamıştır.

Herhangi bir şekilde addEventListener kullanarak olay parametresini ekleyebilir miyim? Bunu chrome ve safari'deki window.event ile çalışmaya başlayabilirim, ancak bu istediğim tam kurulum. Şimdi bir süredir googling ve deneme/yanıltıcı oldum, başarıları olmadan ... yani FML:/Kendimi kafasına vurmanın yanında ...

Biliyorum jquery muhtemelen tüm bunları çözecektir, ama jQuery'ye geçiş yapmadan önce javascript konusunda uzman olmak istiyorum. Yoksa yine de mi taşınmalıyım?

Teşekkür ve şerefe, p.

+0

Cevabımın yanı sıra, "Biliyorum jquery muhtemelen hepsini çözerdi, ama jQuery'ye geçmeden önce javascript konusunda uzman olmak istiyorum." Bir dili öğrenmenin doğru yolu budur. Ve JS topluluğunda nadir görülür. Çünkü insanlar gördüm, buradaki SO'da, jQuery'de özel bir yapının sorulmasını bile istemiyordum, eğer o zaman başka bir şey yerine ...: -D – Imp

cevap

11
div.addEventListener("mousemove", function(){test(event, this)}, true); 

Elbette, "olay tanımsız" olsun! mousemove olay tetikler zaman, olay işleyicisi denir: etkinlik bilgileri nesnesini ulaşmak için iki yol vardır

function(){test(event, this)} 

. Ya olay işleyicisine bir argüman olarak iletilir veya window.event'da bulunabilir.

İkinci muhafaza muhafazasını varsayalım. İşlevinizde event adında yerel bir değişken bulunmadığı gibi, function1'da böyle bir değişkenin de bulunmadığı gibi, tarayıcıda genel nesnede tanımlanmış bir event var. JavaScript'inizde küresel nesne window denir, bu nedenle fonksiyon

function(){test(window.event, this)} 

olarak yorumlanır ve çalışıyor. Bununla birlikte, daha önce de belirttiğim gibi, bazı tarayıcılarda, olay bilgisi argümanda iletilir. Yani olay işleyicisi muhtemelen böyle bakmak istedim:

function(event){test(event, this)} 

aksi test() geçirilen event tanımsız olacaktır. Yani, bu bir çapraz tarayıcı işleyicisi yapmak için yapılması gerekenler:

function(event) { 
    if (!event) // i.e. the argument is undefined or null 
     event = window.event; 

    test(event, this); 
} 

ikinci sorunu addEventListener() yaşlı IE'lerin (olsa, IE9 yaptığı) çalışmıyor olmasıdır. Eski IE'ler için attachEvent() adlı benzer bir işlev kullanmanız gerekir.Yalnızca bir işleyicisi takmak Ya da, bunu basit bir yol olay bir parametre olarak kabul edilmesi gereklidir Firefox gibi bazı tarayıcılarda

div.onmousemove = function() {...}; 
+0

Wow, teşekkürler! Bu beni çok uzun zamandır rahatsız ediyordu, bunun asla çözüleceğini düşünmemiştim. Bir pürist gibi görünüyorsun :) Bu arada jQuery'ye geçiş yaptım, ama yine de (neyse ki) daha küçük şeyler için JavaScript kullanıyorum, bu yüzden tüm (jQuery) bir kütüphaneyi yüklemek zorunda değilim. – Pascalculator

+0

Olay dinleyicisi bu yaklaşımla kaldırılabilir mi? Aksi halde isimlendirilmiş bir işlevi anonim bir işlevin içine yerleştirme noktası bu şekilde nedir? –

1

yapabilirsiniz, dolayısıyla bu kodu

değiştirmek zorunda Bu

div.addEventListener("mousemove", function(event){test(event, this)}, true); 

ile

div.addEventListener("mousemove", function(){test(event, this)}, true); 

kod dikkatlice iki satır karşılaştırın ve olayı fark özellik, ikinci satıra eklenen işlevin parametresi olarak iletildi. Eski IE ver attachEvent() için

kullanılmalıdır;

attachEvent addEventListener ve artık neredeyse tüm modern tarayıcı desteği bu modern standart js yerini almıştır Bildirimi o
div.attachEvent("onclick", function(event){test(event, this)}); 

. http://caniuse.com/#feat=addeventlistener İşte

uyumluluk tablosunu görmek mümkündür.

İlgili konular