Огляд: У цій статті ми обговоримо про події в браузері JavaScript. події сценаріїв Java дуже важливі, оскільки вони виконують більшість задач. Іншим важливим моментом є сумісність браузера. Так як скрипт Java вбудований в HTML файли, виконання Java Script залежить браузер. Java скрипти також дозріли для обробки подій браузера.
Введення:
Подія браузер є сигналом від браузера до додатка в разі виконується дію. Ці події мають наступні типи
- події DOM: Вони ініціюються DOM елементів e.g. подія натисніть спрацьовує при натисканні на елемент або миші на подію спрацьовує, коли курсор миші наведений на елемент. Ці події підключити код Java Script з документом.
- вікно Події: Вони ініціюються, коли вікно браузера змінюється.
які події?
Подія може бути визначена як дія / роботу, яка посилає сигнал на Java Script. Тепер Java-скрипт виконується у відповідь на якусь подію. Але подія має бути зареєстровано, щоб відправити сигнал на відповідний компонент Java Script. Нижче наведені деякі з подій.
події вікна: Ці події ініціюються, коли вікно браузера змінюється.
події DOM: Вони ініціюються, коли DOM елемент виконує будь-яку дію.
інші події: Ці події розглядають всі інші типи подій, крім вищезазначених двох.
обробники подій: Нам потрібно зрозуміти, що є велика різниця між Java і Java Script. У Java, многопоточность можливо, але події Java Script є однопоточен. Таким чином, обробники подій виконуються послідовно. Для того, щоб уточнити його, давайте припустимо, один користувач виконав дві події, Mouseover, а потім MouseMove. Так подія Mouseover буде виконуватися першим. Після того, як перша подія завершення, MouseMove подія будуть виконані.
Якщо сценарій повинен виконати дію проти події, вона повинна мати функцію, пов'язану з ним. Ці функції називаються в якості обробників подій. Зазвичай ці функції називаються в форматі - на EVENT_NAME e.g. OnClick і т.д.. обробники подій в Java Script є однопоточен і виконуються послідовно. Отже, якщо дві події відбуваються одночасно, їх обробники виконуватимуться один за іншим. Є багато способів, в яких призначені обробники подій. These are.
Використання HTML-тег: Оброблювач подій може бути пов'язаний безпосередньо в розмітці, використовуючи атрибут-події.
Listing 1: Event handler using html tag
[Code]
<введення ID = “b1” value = “натисніть мене” OnClick = “пильний('Дякую! Я натиснув. ‘); ” type = “button” />
[/Code]
Коли цей код виконується, ми бачимо кнопку з міткою – "Натисніть мене". Якщо користувач натискає цю кнопку вікно попередження з повідомленням – Thanks! Я натиснув. Ми можемо також викликати функцію для обробки подій. Розглянемо наступний код
Listing 2: обробник подій за допомогою функції
[Code]
| <!DOCTYPE HTML> | |||||||||||||||
| <html> | |||||||||||||||
| <head> | |||||||||||||||
| <тип скрипта =”текст / JavaScript”> | |||||||||||||||
| function count_rabbits() { | |||||||||||||||
| для(вар я = 1; я <= 3; я ) { | |||||||||||||||
| пильний( “кролик “+я ” з капелюха!” ) | |||||||||||||||
| } | |||||||||||||||
| } | |||||||||||||||
| </script> | |||||||||||||||
| </head> | |||||||||||||||
| <body> | |||||||||||||||
| <тип входу = “button” OnClick = “count_rabbits()” value = “кількість кроликів!”/> | |||||||||||||||
| </body> | |||||||||||||||
| </html>[/Code]Інший підхід, щоб зв'язати подія використовує this.innerHTML, де це відноситься до поточного елементу. Наступний код ілюструє цеListing 3: обробник подій за допомогою this.innerHTML
[Code] <Кнопка OnClick = “пильний ( this.innerHTML )”> Натисніть мене, щоб побачити мене </button> [/Code] Використання DOM властивість об'єкта: При цьому призначення проводиться за допомогою властивості – OnEvent. У цьому випадку ми повинні отримати перший елемент, а потім призначити обробник до властивості OnEvent. The following code is an example of setting a click handler to the element with id ‘myId’ Listing 4: обробник подій за допомогою DOM властивість об'єкта [Code] <введення ID = “MyID” type = “button” value = “натисніть мене”/> <script> document.getElementById( ‘ MyID ‘ ).OnClick = функція() { пильний('Дякую') } </script> [/Code] Ось такі дві речі, які необхідно зазначити, для того, щоб використовувати цю – · It is a property, не є атрибутом і його ім'я OnEvent, яке чутливе до регістру і повинні бути в нижньому регістрі. · The handler should be a function not a String. Коли браузер знаходить OnEvent атрибут в HTML-розмітки, вона створює функцію, використовуючи її вміст і привласнює його властивості. Так що наступні два коду робить те ж саме Listing 5: обробник подій, використовуючи тільки HTML [Code] <тип входу = “button” OnClick = “пильний( 'Натисніть!’ )” value = “кнопка”/> [/Code] Listing 6: обробник подій за допомогою HTML & JS. [Code] <тип входу = “button” ID = “button” value = “кнопка”/> <script> document.getElementById('Кнопка').OnClick = функція() { пильний('Натисніть!’) } </script> [/Code] JavaScript перезаписує обробник набору в розмітці. Наступний фрагмент замінює обробник розмітки з новим Listing 7: Переписування набір обробників. <тип входу =”button” OnClick =”пильний('Перед')” value=”натисніть мене”/> <script> document.getElementsByTagName('Вхід')[0].OnClick = функція() { пильний("Після того, як ') } </script> [/Code] Використання спеціальних методів: У комплексному застосуванні JavaScript, де обробляти різні методи загального інтерфейсу подій призначені для користувача методи використовуються для призначення обробників. Microsoft пропонує рішення, яке працює тільки з IE версії менше 9 а також з Opera. Обробники призначаються і від'єднувати відповідно Listing 8: Установка і видалення обробників element.attachEvent( “на” + подія, обробник) [/Code] видалення обробника – [Code] element.detachEvent( “на” + подія, обробник) [/Code] Використання прикріпити подія, ми можемо призначити кілька обробників до одного елементу. Наступний фрагмент коду показує, що це Listing 9: Призначення декількох обробників до одного елементу. [Code] <введення ID = “MyElement” type = “button” value = “натисніть мене” /> <script> змінна MyElement = document.getElementById( “MyElement” ) діє = функція() { пильний( 'Дякую!’ ) } були угоди 2. = функція() { пильний( 'Знову дякую!’ ) } myElement.attachEvent( “OnClick”, обробник) myElement.attachEvent( “OnClick”, Handler2) </script> [/Code] Докласти події не передати параметр 'це'. Відповідно до стандарту W3C наступне призначення обробника працює майже у всіх браузерах, які використовуються сьогодні. приєднання Handler Listing 10: Установка і видалення обробників відповідно до w3c element.addEventListener ( подія, обробник, фаза ) [/Code] елемент. removeEventListener ( подія, обробник, фаза ) [/Code]
Related Event заходи: Ми повинні дбати про наступних чотирьох дій при обробці дій, пов'язаних подій · Реєстрація обробника подій: Це може бути зроблено шляхом установки елементів OnEvent властивостей e.g. OnClick або OnKeyPress і т.д.. Це працює з усім браузером, але має обмеження, яке ми можемо прикріпити тільки один обробник подій до елементу. Додані події можуть бути видалені подібним способом з використанням detachEvent або removeEventListener. · Отримати об'єкт події: Більшість браузерів передати об'єкт події як аргумент обробника. Наступні три події генеруються, коли користувач клацає мишею. o MouseDown: вказує на те, що миші натиснута. o MouseUp: вказує на те, що миша випущена. o натисніть: вказує на те, що миша натиснута. Якщо це відбувається послідовно, це вказує на те, що подвійне клацання сталося. · Extract information from the object – Третім кроком є отримання дії інформація, пов'язана з об'єктом і ініціювати дію. · Inform about the completion of the event – Це останній крок. Після того, як подія успішно продана з аукціону завершення заходу відзначений. Summary: На закінчення обговорення ми можемо тримати такі моменти на увазі · Used to initiate an action which should be performed as per the customers need. · Events are of two types – DOM подій і подій вікна. · Event handlers are functions associated to events. · Event handlers are assigned in the following way o Using HTML tag o Using DOM object property o Using special methods |
||||
READ MORE JAVA SCRIPT ARTICLES
Шаблони Java Script Дизайн
CSS3 & JavaScript
Java Script and CSS3 properties
