Event Fonksiyonu

JavaScript ile bir fonksiyon yazdım ve başka yerlerden bu fonsiyonu çağırdım. Ancak, fonksiyona gelen isteğin, hangi nesneden geldiğini öğrenmek için, yeni bir parametre tanımlamak zorunda kaldım
www.dijitalders.comDaha somut olsun, örnek vereyim.

function Download(pSender, pURL){
  var strHTML=""
  if (pSender!=null){
   var strTitle=pSender.innerText;
   strHTML = "<span id='spnTitle'><b>" + strTitle + "</b></span><br>";
  }

strHTML += "<br><span id='spnDownload'><a href='" + pURL + "'><b>İndir</b></a></span>";
 
  document.getElementById("divWMP").innerHTML=strHTML;
}

Bu fonksiyonu çağıran linklerimiz şöyle olacaktır.
<a href="#" onclick="Download(this, 'http://www.freewebtown.com/m1gin/kisisel/kapi.wma')">Mustafa Birgin - Kapıyı Kim Çaldı?</a><br>
<a href="#" onclick="Download(this, 'http://www.freewebtown.com/m1gin/audio/Miyav_Miyav.mp3')">Mustafa Birgin & Mustafa Kütükçü - Miyav Miyav</a><br>

Görüldüğü gibi, her kullanımda, "this" ibaresini kullanmak durumunda kalıyoruz.

Acaba bunu kullanmadan, fonksiyona istek gönderen nesneyi öğrenebilir miyiz?

function Download(pURL){
  var pSender = event.srcElement;
  var strHTML=""
  if (pSender!=null){
   var strTitle=pSender.innerText;
   strHTML = "<span id='spnTitle'><b>" + strTitle + "</b></span><br>";
  }

strHTML += "<br><span id='spnDownload'><a href='" + pURL + "'><b>İndir</b></a></span>";
 
  document.getElementById("divWMP").innerHTML=strHTML;
 }

Böylece bu fonksiyonu çağırırken, "this" ibaresini kullanmak zorunda olmayacaktım artık!
<a href="#" onclick="Download('http://www.freewebtown.com/m1gin/kisisel/gosteri.wma')">Mustafa Birgin - Gösteri</a><br>
<a href="#" onclick="Download('http://www.freewebtown.com/m1gin/audio/Daniel_Bernoulli.wma')">Mustafa Birgin - Daniel Bernoulli</a><br>


window.event.type
function doSomething(e) {
if (!e) var e = window.event;
alert(e.type);

}
window.event.srcElement-target
function doSomething(e) {
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode;

}

Other targets

There are some more targeting properties. I discuss currentTarget on the Event order page and relatedTarget, fromElement and toElement on the Mouse events page.

Mousedown, mouseup, click

mousedown, user depresses the mouse button on this element
mouseup, user releases the mouse button on this element
click, one mousedown and one mouseup detected on this element
In general mousedown and mouseup are more useful than click. Some browsers don’t allow you to read out mouse button information onclick. Furthermore, sometimes the user does something with his mouse but no click event follows.

Dblclick

The dblclick event is rarely used. Even when you use it, you should be sure never to register both an onclick and an ondblclick event handler on the same HTML element. Finding out what the user has actually done is nearly impossible if you register both.

Mousemove

The mousemove event works fine, but you should be aware that it may take quite some system time to process all mousemove events. If the user moves the mouse one pixel, the mousemove event fires. Even when nothing actually happens, long and complicated functions take time and this may affect the usability of the site: everything goes very slowly, especially on old computers.

Therefore it’s best to register an onmousemove event handler only when you need it and to remove it as soon as it’s not needed any more:

Mouseover and mouseout

The reason for this is of course event bubbling. The user causes a mouseover event on ev4. There is no onmouseover event handler on this element, but there is one on ev3. As soon as the event has bubbled up to this element, the event handler is executed.
window.event.keyCode-which
function doSomething(e) {
var code;
if (!e) var e = window.event;
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;
var character = String.fromCharCode(code);
alert('Character was ' + character);
}

window.event.which-button

function doSomething(e) {
var rightclick;
if (!e) var e = window.event;
if (e.which) rightclick = (e.which == 3);
else if (e.button) rightclick = (e.button == 2);
alert('Rightclick: ' + rightclick); // true or false
}

window.event.clientX,clientY layerX,layerY offsetX,offsetY pageX,pageY screenX,screenY x,y
function doSomething(e) {
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
// posx and posy contain the mouse position relative to the document
// Do something with this information
}

relatedTarget, fromElement, toElement

W3C added the relatedTarget property to mouseover and mouseout events. This contains the element the mouse came from in case of mouseover, or the element it goes to in case of mouseout.

Microsoft created two properties to contain this information:

  • fromElement refers to the element the mouse comes from. This is interesting to know in case of mouseover.
  • toElement refers to the element the mouse goes to. This is interesting to know in case of mouseout.

In our first example, relatedTarget/fromElement contains a reference to ev4, in our second example to the SPAN. Now you know where the mouse came from.

Cross–browser scripts

So if you want to know where the mouse comes from in case of mouseover, do:

function doSomething(e) {
if (!e) var e = window.event;
var relTarg = e.relatedTarget || e.fromElement;
}

If you want to know where the mouse goes to in case of mouseout, do:

function doSomething(e) {
if (!e) var e = window.event;
var relTarg = e.relatedTarget || e.toElement;
}
 
Properties Description NS Equivalent?
altKey, ctrlKey, shiftKey Boolean properties that indicate whether the Alt, Ctrl, and Shift keys were pressed at time of the event. Same.
button An integer indicating which mouse button was pressed or released, 1 = left, 2 = right, 4 = middle. If multiple buttons are pressed, the value is the sum of both buttons, such as 3 (1+2) for left and right. Same, but different return values.
cancelBubble Set to true to prevent the event from bubbling. stopPropagation()
clientX, clientY Returns the mouse coordinates at the time of the event relative to upper-left corner of the window. Example(s). Same.
fromElement, toElement For mouseover and mouseout events, these properties indicate the elements the mouse is leaving from and moving onto, respectively. relatedTarget
keyCode Property indicating the Unicode for the key pressed. Use String.fromCharCode(keyCode) to convert code to string. charCode
offsetX, offsetY Returns the mouse coordinates relative to the originating element. N/A
returnValue Set to false to cancel any default action for the event. preventDefault()
srcElement The element in which the event occurred on. target
type A string indicating the type of event, such as "mouseover", "click", etc. Same.

Kaynak www.mbirgin.com/Default.aspx , www.quirksmode.org/js/events_properties.html , www.javascriptkit.com/jsref/event.shtml
Yorumunuzu Ekleyin


Yükleniyor...
Yükleniyor...