tailieunhanh - Học JavaScript qua ví dụ part 75

Các HTML Inline Way Chúng tôi đã được sử dụng như xử lý sự kiện onClick, onSubmit, onmouseover, trong văn bản này. Trong thực tế, Chương 13, "Xử lý sự kiện," mô tả chi tiết tất cả các xử lý sự kiện khác nhau và làm thế nào để sử dụng chúng | Event Handling and the DOM 661 Figure A scrolling marquee continues to print news across the image. Event Handling and the DOM The HTML Inline Way We have been using event handlers like onClick onSubmit onMouseOver throughout this text. In fact Chapter 13 Handling Events described in detail all of the different event handlers and how to use them. They are the oldest and simplest way that is browser compatible. The following example uses the onClick handler as an attribute of the button element. When the user clicks the button the function movePosition will be called. input type button value move text onClick movePosition But using this type of handler violates the principle of separation of the layers that is the separation of markup from JavaScript. The Scripting Way To keep the markup and the JavaScript separate the JavaScript provided a way for programmers to apply properties to any object in the HTML tree. In the following example the onLoad event property is applied to the window object so that when the document has completed loading the function assigned to that object will be triggered. In this example the background color will be changed to light green. See Chapter 13 for details if you need to be refreshed on this traditional model for handling events. From the Library of 662 Chapter 15 The W3C DOM and JavaScript function bdy . lightgreen The DOM Way The W3C Dom Level 2 standardized the event model to solve compatibility problems between browsers. Most modern browsers Mozilla Opera Safari Chrome and Kon-queror are W3C compliant except Microsoft Internet Explorer which has its own model. DOM objects can be registered as event listeners. This feature can be used to assign multiple handlers for a given event which is the main difference from the traditional model. To achieve this event listeners are no longer stored as HTML attribute values but are .