Java: Java Programming For Beginners a simple Start To Java Programming (Written By a software Engineer)
Download 0.82 Mb. Pdf ko'rish
|
Java Programming For Beginners - A Simple Start to Java Programming ( PDFDrive )
|
DOM objects
The primary objects that you need to access while building an application, are the DOM objects associated with it. This access is necessary for you to control and get notified about events that are occurring on the webpage. The DOM is a representation of a hierarchy of objects. These objects can be accessed using the document variable, which is built-in. This variable references the DOM and performs a search, which may return an active or static NodeList. While the active NodeList contains a list of elements that keep changing, the static NodeList contains elements that do not change over time. Since the retrieval of the static NodeList takes longer, it is advisable to choose search methods that work with active NodeList. The search methods available for DOM include: getElementById This method returns a reference to the first element that has the specified ID. getElementsByTagName This method returns the active NodeList, which has the specified tag name. getElementsByName This method returns the active NodeList, which has the specified name. This is a preferred method for option buttons. getElementsByClass This method returns the active NodeList, which has the specified class name. However, this method is not supported by Internet Explorer version 8 and earlier. querySelector This method accepts CSS selector as parameter and return the first matched element. However, this method is not supported by Internet Explorer version 7 and earlier. querySelectorAll This method accepts CSS selector as parameter and return all the matched elements. Therefore, it returns a static NodeList. However, this method is not supported by Internet Explorer version 7 and earlier. Events If you look at JavaScript as an engine, then events are what give it the required spark. Events can occur in two situations. The first type of events are those that occur during user interactions. A user may click an image or enter text. All these are classified as events. Besides this, changes in state of the system are also considered an event. For instance, if a video starts or stops, an event is said to have occurred. The DOM allows you to capture events and execute code for the same. In JavaScript, events are based on the publish-subscribe methodology. Upon creation of an object, the developer can publish the events that are related to this object. Moreover, event handlers can be added to this object whenever it is used. The event handler function notifies the subscribed events that the event has been triggered. This notification includes information about the event like location of the mouse and key-presses, in addition to several other details relevant to the event. Capturing events: There may be situations when an event may be attached to a button click, which may lie inside a hyperlink. In this situation, there is nesting of elements. Therefore, the event, when triggered, is passed down the DOM hierarchy. This process is called event capturing. However, once the event has reached the element, this event is bubbled up the hierarchy. This process is called event bubbling. This movement of the event across the hierarchy gives the developer an opportunity to subscribe or cancel the propagation, on need basis. Subscribing to event: The function, addEventListener, can be used for the subscription process. This function requires three arguments, the event, the function that needs to be called for the event and a Boolean value that determines if the function will be called during the capture or bubble process (true – capture, false – bubble). Mostly, this value is set to false. This is the preferred method for subscription as it is mentioned in the W3C standard. Sample Code: var btn = document.getElementById(‘btnDownload’); btn.addEventListener(‘click’, initiateDownload, false); However, other methods also exist, which include giving an online subscription to the html tag. This subscribes the event to the bubble process. The advantage of using this method is that it is the oldest and most accepted method. therefore, you can be sure that this method will work, regardless of what browser you are using. Please see the tag below to understand how this can be done. You can also use the traditional subscription process that uses JavaScript for subscribing the event. var btn = document.getElementById(‘btnDownload’); btn.onclick = initiateDownload; Unsubscribing: Events can be unsubscribed using the function, removeEventListener, which takes the same set of parameters as addEventListener. For the btn variable used in the previous example, this can be done in the following manner: var btn = document.getElementById(‘btnDownload’); btn.removeEventListener(‘click’, initiateDownload, false); How to cancel propagation? The function, stopPropagation, is used for performing this operation. This can be done in the following manner: var btn = document.getElementById(‘btnDownload’); btn.addEventListener(‘click’, initiateDownload, false); function initiateDownload (e){ //download e.stopPropagation(); } How to prevent the default operation? This can be done by using the function, preventDefault, in the following manner: var hyperlink = document.getElementById(‘linkSave’); hyperlink.addEventListener(‘click’, saveData, false); function saveData(e){ //save data e.preventDefault(); } JavaScript also provides the this keyword, which can be used if you wish to access the event causing element, on a frequent basis. Window Event Reference The current browser window is represented by the window variable, which is an instance of the Window object. The following events are associated with this object: afterprint beforeonload beforeprint error blur haschange load message focus online offline pageshow pagehide redo popstate storage resize unload undo Form Event Reference The actions that occur inside an HTML form trigger the flowing events: change blur focus contextmenu forminput formchange invalid input submit select Keyboard Event Reference The keyboard triggers the following events: keyup keypress keydown Mouse Event Reference The mouse triggers the following events: click drag drop scroll dblclick dragenter dragstart dragend dragover dragleave mousemove mousedown mouseover mouseout mousewheel mouseup Media Event Reference Media elements like videos, images and audios also trigger events, which are as follows: canplay abort waiting durationchange canplaythrough ended emptied loadeddata error loadstart loadedmetadata play pause progress playing readystatechange ratechange seeking seeked suspend stalled volumechange timeupdate Download 0.82 Mb. Do'stlaringiz bilan baham: 
|