Genel bakış: In this article we will discuss about the browser events in JavaScript. Java script events are very important as they perform most of the tasks. The other important point is the browser compatibility. As the java script is embedded in html files, the execution of java script is browser dependent. Java scripts are also matured enough to handle browser events.
Giriş:
A browser event is a signal from the browser to the application in case an action is performed. These events are of following types
- DOM Events: These are initiated by the DOM elements e.g. a click event is triggered when an element is clicked or a mouse over event is triggered when the mouse pointer is hovered on an element. These events connect a java script code with the document.
- Window Events: These are initiated when the browser window is resized.
What are the events?
An event can be defined as an action/work that sends a signal to java script. Now java script executes in response to some event. But the event should be registered to send signal to the respective java script component. Following are some of the events.
Window events: These events are initiated when browser window is resized.
DOM events: These are initiated when a DOM element is performing some action.
Other events: These events are considering all other types of events apart from the above two.
Event handlers: We need to understand that there is a big difference between java and java script. Java, multi threading is possible but java script events are single threaded. So the event handlers are executed sequentially. To clarify it, let us assume one user has performed two events, mouseover and then mousemove. So the mouseover event will be executed first. Once the first event is complete, mousemove event will get executed.
If a script has to perform an action against an event, it should have a function associated to it. These functions are referred as event handlers. Usually these functions are named in the format – on EVENT_NAME e.g. onclick etc. Event handlers in java script are single threaded and are executed sequentially. Hence if two events occur at the same time, their handlers will be executed one after other. There are many ways in which the event handlers are assigned. These are.
Using HTML tag: The event handler can be associated directly in to the markup using attribute on-event.
Listing 1: html etiketini kullanarak olay işleyicisi
[Code]
<input id = “b1” value = “Click me” onclick = “alert(‘Thanks! I am clicked. ‘); ” type = “button” />
[/Code]
When this code is executed, we see a button with a label – ‘Click me’. If the user hits this button an alert window with a message – Thanks! I am clicked. We can also call a function for event handling. Consider the following code
Listing 2: Event handler using function
[Code]
| <!DOCTYPE HTML> | |||||||||||||||
| <html> | |||||||||||||||
| <baş> | |||||||||||||||
| <script type=”text/javascript”> | |||||||||||||||
| fonksiyon count_rabbits() { | |||||||||||||||
| için(var i = 1; ben <= 3; i ,) { | |||||||||||||||
| alert( “Rabbit “+i ” out of the hat!” ) | |||||||||||||||
| } | |||||||||||||||
| } | |||||||||||||||
| </senaryo> | |||||||||||||||
| </baş> | |||||||||||||||
| <vücut> | |||||||||||||||
| <input type = “button” onclick = “count_rabbits()” value = “Count rabbits!”/> | |||||||||||||||
| </vücut> | |||||||||||||||
| </html>[/Code]Another approach to bind the event is using this.innerHTML where this refers to the current element. The following code illustrates thisListing 3: Event handler using this.innerHTML
[Code] <button onclick = “alert ( this.innerHTML )”> Click me to see me </button> [/Code] Using DOM Object Property: Here the assignment is made using the property – onevent. In this case we need to get the element first and then assign a handler to the property onevent. Aşağıdaki kod kimliği 'MyID ile elemana bir tıklama işleyicisi ayarlama bir örnektir’ Listing 4: Event handler using DOM Object Property [Code] <input id = “myId” type = “button” value = “Press me”/> <senaryo> document.getElementById( ‘ myId ‘ ).onclick = function() { alert(‘Thanks’) } </senaryo> [/Code] Here the following two things must be noted in order to use this – · Bu bir özelliktir, not an attribute and its name is onevent which is case sensitive and should be in lower case. · işleyici bir işlev değil bir dize olmalıdır. When the browser finds an onevent attribute in the HTML markup, it creates a function using its contents and assigns it to the property. So the following two codes does the same Listing 5: Event handler using only HTML [Code] <input type = “button” onclick = “alert( ‘Click!’ )” value = “Button”/> [/Code] Listing 6: Event handler using HTML & JS. [Code] <input type = “button” id = “button” value = “Button”/> <senaryo> document.getElementById(‘button’).onclick = function() { alert(‘Click!’) } </senaryo> [/Code] JavaScript overwrites a handler set in markup. The following snippet replaces a markup handler with a new one Listing 7: Overwriting a handler set. <input type =”button” onclick=”alert(‘Before’)” value=”Press me”/> <senaryo> document.getElementsByTagName(‘input’)[0].onclick = function() { alert(‘After’) } </senaryo> [/Code] Using Special methods: In a complex JavaScript application, Farklı arabirim yöntemleri yaygın olay özel yöntemleri işleyicileri atamak için kullanılır ele nerede. Microsoft, yalnızca daha az IE sürümü ile çalışan bir çözüm sağlar 9 ve ayrıca Opera ile. Eylemciler atanmış ve altı olarak ayrılır Listing 8: işleyicileri takma ve çıkarma element.attachEvent( “on” + olay, işleyicisi) [/Code] Bir işleyicisi Çıkarma – [Code] element.detachEvent( “on” + olay, işleyicisi) [/Code] olay eklemek kullanarak, Aynı elemana birden işleyicileri atayabilirsiniz. Aşağıdaki kod parçası bu gösteriyor Listing 9: bir eleman birden fazla işleyicileri atama. [Code] <input id = “myElement” type = “button” value = “Press me” /> <senaryo> var myElement = document.getElementById( “myElement” ) davranıyordu = function() { alert( ‘Thanks!’ ) } olan esnaf 2. = fonksiyonu() { alert( 'Tekrar teşekkürler!’ ) } myElement.attachEvent( “tıklamada”, işleyicisi) myElement.attachEvent( “tıklamada”, handler2) </senaryo> [/Code] parametresini 'Bu' geçmez olayları takın. W3C standardına göre aşağıdaki işleyicisi atama bugün kullanılan hemen hemen tüm tarayıcılarda çalışır. Bir işleyicisi takılması Listing 10: Takma ve W3C göre işleyicileri kaldırma element.addEventListener ( olay, işleyicisi, faz ) [/Code] eleman. removeEventListener ( olay, işleyicisi, faz ) [/Code]
Olaya ilişkin işlemler: olaya ilişkin eylemleri işlerken Biz şu dört eylemlerin özen · olay işleyicisi Kayıt Ol: Bu unsurları onevent özellik örneğin ayarlayarak yapılabilir. onclick veya onkeypress vb. Bu, tüm tarayıcı ile çalışır ama biz bir eleman sadece bir olay işleyicisi ekleyebilirsiniz bir sınırlama vardır. bağlı olaylar detachEvent ya removeEventListener kullanılarak benzer bir şekilde temizlenebilir. · olay nesnesini alın: tarayıcılar Çoğunluk işleyicisi bir argüman olarak olay nesnesini iletin. kullanıcı kendi fare tıkladığında aşağıdaki üç olay oluşturulur. o mousedown: Fare basılı olduğunu gösterir. o mouseup: Fare serbest olduğunu gösterir. o tıklayın: Fare tıklandığında olduğunu gösterir. Bu arka arkaya olursa, Bu bir çift tıklama oldu belirtir. · nesneden bilgilerini ayıklayın – Üçüncü adım nesneden özü eylem ile ilgili bilgi ve eylemin başlatılması. · Etkinliğin tamamlanmasından hakkında bilgi – Bu son adımdır. Olay başarıyla ihalesi sonra olayın tamamlanması işaretlenir. Summary: tartışma sonucuna aklımızda şu noktaları tutabilir · Müşterilerin ihtiyaç başı olarak yapılmalıdır bir işlemi başlatmak için kullanılır. · Olaylar iki türlüdür – DOM olayları ve Pencere olayları. · Olay işleyicileri fonksiyonları olaylara ilişkilidir. · Olay işleyicileri şu şekilde atanır HTML etiketini kullanarak o DOM nesnesi özelliğini kullanarak o o özel yöntemler kullanılarak |
||||
READ MORE JAVA SCRIPT ARTICLES
Java Script Design Patterns
CSS3 & JavaScript
Java Script and CSS3 properties
