Преглед: В тази статия ще говорим за събития на браузъра в JavaScript. Java Script събития са много важни, тъй като те изпълняват повечето от задачите,. Другият важен момент е съвместимостта на браузъра. Тъй като Java Script се вгражда в HTML файлове, изпълнение на Java Script е браузър зависими. Java скриптове също са узрели достатъчно, за да се справят събития на браузъра.
Въвеждане:
A събитие браузър е сигнал от браузъра към заявлението в случай, че се извършва дадено действие. Тези събития са от следните видове
- DOM Събития: Те са инициирани от елементите на DOM например. събитие кликване се задейства, когато един елемент е щракване или мишката върху събитие се задейства, когато показалецът на мишката се задържа върху един елемент. Тези събития се свързват с код на Java Script с документа.
- Window Събития: Те са инициирани, когато прозореца на браузъра е оразмерен.
Какви са събитията?
Едно събитие може да се определи като действие / работа, която изпраща сигнал към Java Script. Сега Java Script изпълнява в отговор на някакво събитие. Но събитието следва да се регистрира, за да изпрати сигнал към съответния компонент на Java Script. Следват някои от събитията.
Window събития: Тези събития са започнати, когато прозореца на браузъра е оразмерен.
DOM събития: Те са инициирани, когато DOM елемент е извършване на някои действия.
Други събития: Тези събития се обмислят всички други видове събития отделно от горните две.
манипулатори на събития: Ние трябва да разберем, че има голяма разлика между Java и Java Script. В Java, мулти резба е възможно, но Java Script събития са единични резба. Така че, занимаващо се със събития се изпълняват последователно. За да го поясни, нека приемем един потребител е извършил две събития, Задържането на курсора и след това mousemove. Така че събитието на Задържането на курсора ще бъде изпълнена първата. След първото събитие е пълна, mousemove събитие ще се изпълнява.
Ако скрипт трябва да извърши действие срещу събитие, тя трябва да има функция, свързана с него. Тези функции са посочени като отговорни за събития. Обикновено тези функции са именувани във формат - на EVENT_NAME например. OnClick т.н.. манипулатори на събития в Java Script са единични резба и се изпълняват последователно. Следователно, ако се появят две събития едновременно, техните работещи ще се изпълняват една след друга. Има много начини, по които са възложени, занимаващо се със събития. These are.
Използване на HTML тагове: Водачът на събитие може да се свърже директно в маркирането използване атрибут на събитие.
Listing 1: Event handler using html tag
[Code]
<вход ID = “b1” стойност = “Кликнете мен” OnClick = “тревога('Благодаря! Аз съм кликнал. ‘); ” тип = “бутон” />
[/Code]
Когато този код се изпълнява, ние виждаме един бутон с етикет – "Щракнете ме". Ако потребителят удари този бутон предупредителен прозорец със съобщение – Благодаря! Аз съм кликнал. Можем също така да извикате функция за манипулиране събитие. Да разгледаме следния код
Listing 2: манипулатор събитие с помощта на функцията
[Code]
| <!DOCTYPE HTML> | |||||||||||||||
| <HTML> | |||||||||||||||
| <глава> | |||||||||||||||
| <скрипт тип =”текст / JavaScript”> | |||||||||||||||
| function count_rabbits() { | |||||||||||||||
| за(Var I = 1; аз <= 3; I ) { | |||||||||||||||
| тревога( “Заек “+I ” от шапката!” ) | |||||||||||||||
| } | |||||||||||||||
| } | |||||||||||||||
| </script> | |||||||||||||||
| </глава> | |||||||||||||||
| <body> | |||||||||||||||
| <вход тип = “бутон” OnClick = “count_rabbits()” стойност = “граф зайци!”/> | |||||||||||||||
| </body> | |||||||||||||||
| </HTML>[/Code]Друг подход за обвързване на събитието е използването this.innerHTML когато това се отнася за текущия елемент. Следният код илюстрира тозиListing 3: манипулатор събитие с помощта this.innerHTML
[Code] <бутон OnClick = “тревога ( this.innerHTML )”> Кликнете мен да ме види </бутон> [/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” тип = “бутон” стойност = “Натиснете мен”/> <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] <вход тип = “бутон” OnClick = “тревога( "Щракнете!’ )” стойност = “бутон”/> [/Code] Listing 6: манипулатор събитие с помощта на HTML & JS. [Code] <вход тип = “бутон” ID = “бутон” стойност = “бутон”/> <script> document.getElementById("Бутон").OnClick = функция() { тревога("Щракнете!’) } </script> [/Code] JavaScript презаписва един манипулатор, определен в маркиране. Следващият фрагмент замества маркиране манипулатор с нова Listing 7: Замяна набор манипулатор. <вход тип =”бутон” OnClick =”тревога('Преди')” value=”Натиснете мен”/> <script> document.getElementsByTagName('вход')[0].OnClick = функция() { тревога('След') } </script> [/Code] С помощта на специални методи: В комплекс заявление JavaScript, където различни методи интерфейс справят обща събития потребителски методи се използват, за да присвоите товарачи. Microsoft предлага решение, което работи само с IE версия по-малко от 9 а също и с Opera. Манипулатори са възложени и обособени като под Listing 8: Поставяне и изваждане товарачи element.attachEvent( “on” + събитие, треньор) [/Code] Премахването на Handler – [Code] element.detachEvent( “on” + събитие, треньор) [/Code] Използването придават събитие, ние може да зададете няколко работещи за един и същ елемент. Следният код фрагмент показва това Listing 9: Присвояване на множество работещи за един елемент. [Code] <вход ID = “myElement” тип = “бутон” стойност = “Натиснете мен” /> <script> Var myElement = document.getElementById( “myElement” ) е действал = функция() { тревога( 'Благодаря!’ ) } бяха сделки 2. = функция() { тревога( 'Благодаря отново!’ ) } myElement.attachEvent( “OnClick”, треньор) myElement.attachEvent( “OnClick”, handler2) </script> [/Code] Прикрепете събития не минава параметъра 'това'. Съгласно W3C стандарт следната задача манипулатор работи в почти всички браузъри, които се използват днес. Поставяне на Handler Listing 10: Поставяне и изваждане, работещи по W3C element.addEventListener ( събитие, треньор, фаза ) [/Code] елемент. removeEventListener ( събитие, треньор, фаза ) [/Code]
действия, свързани събития: Ние трябва да се грижим за следните четири действия по време на работа действия, свързани събития · Регистрирайте събитието манипулатор: Това може да бъде направено чрез определяне на елементите onevent собственост например. OnClick или onkeypress т.н.. Това работи с целия браузър, но има ограничение, че можем да се приложи само едно събитие манипулатор към елемент. Приложените събития могат да бъдат отстранени по подобен начин, използвайки detachEvent или removeEventListener. · Вземете обект на събитие: Повечето браузъри премине обект на събитие като аргумент за водача. Следващите три събития се генерират, когато потребителят кликне на мишката си. o Mousedown: показва, че мишката е натиснат. o Mouseup: показва, че мишката се освобождава. o Click: показва, че се кликне. Ако това се случи победа, това показва, че двойно кликване се е случило. · 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 Design Patterns
CSS3 & JavaScript
Java Script and CSS3 properties
