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
Daha 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-targetfunction 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 elementmouseup, user releases the mouse button on this elementclick, one mousedown and one mouseup detected on this elementIn 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
Thedblclick 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
Themousemove 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 amouseover 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-whichwindow.event.clientX,clientY layerX,layerY offsetX,offsetY pageX,pageY screenX,screenY x,y
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
}
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:
fromElementrefers to the element the mouse comes from. This is interesting to know in case of mouseover.toElementrefers 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
