Ўвядзенне ў падзеі JavaScript у браўзэры

Агляд: У гэтым артыкуле мы абмяркуем пра падзеі ў браўзэры 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” значэнне = “націсніце мяне” OnClick = “пільны('Дзякуй! Я націснуў. ‘); ” тып = “кнопка” />

[/Code]
Калі гэты код выконваецца, мы бачым кнопку з пазнакай – "Націсніце мяне". Калі карыстальнік націскае гэтую кнопку акно папярэджання з паведамленнем – Дзякуй! Я націснуў. Мы можам таксама выклікаць функцыю для апрацоўкі падзей. Разгледзім наступны код

Listing 2: апрацоўшчык падзей з дапамогай функцыі
[Code]

<!DOCTYPE HTML>

<HTML>

<галава>

<тып скрыпту =”тэкст / JavaScript”>

function count_rabbits() {

для(вар я = 1; я <= 3; я ) {

пільны( “трусік “+я ” з капелюша!” )

}

</скрыпт>

</галава>

<цела>

<тып ўваходу = “кнопка” OnClick = “count_rabbits()” значэнне = “колькасць трусоў!”/>

</цела>

</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” тып = “кнопка” значэнне = “націсніце мяне”/>

<скрыпт>

document.getElementById( ‘ MyID ‘ ).OnClick = функцыя() {

пільны("Дзякуй")

}

</скрыпт>

[/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 = “кнопка” значэнне = “кнопка”/>

<скрыпт>

document.getElementById('Кнопка').OnClick = функцыя() {

пільны('Націсніце!’)

}

</скрыпт>

[/Code]

JavaScript перазапісвае апрацоўшчык набору ў разметцы. Наступны фрагмент замяняе апрацоўшчык разметкі з новым

Listing 7: Перапісванне набор апрацоўшчыкаў.
[Code]

<тып ўваходу =”кнопка” OnClick =”пільны('Перад')” value=”націсніце мяне”/>

<скрыпт>

document.getElementsByTagName('Уваход')[0].OnClick = функцыя() {

пільны("Пасля таго, як ')

}

</скрыпт>

[/Code]

Выкарыстанне спецыяльных метадаў: У комплексным ўжыванні JavaScript, дзе апрацоўваць розныя метады агульнай інтэрфейсу падзей прыстасаваныя метады выкарыстоўваюцца для прызначэння апрацоўшчыкаў. Microsoft прапануе рашэнне, якое працуе толькі з IE версіі менш 9 а таксама з Opera. Апрацоўшчыкі прызначаюцца і адлучаць ў адпаведнасці
далучэнне Handler

Listing 8: Ўстаноўка і выдаленне апрацоўшчыкаў
[Code]

element.attachEvent( “на” + падзея, апрацоўшчык)

[/Code]

выдаленне апрацоўшчыка –

[Code]

element.detachEvent( “на” + падзея, апрацоўшчык)

[/Code]

Выкарыстанне прымацаваць падзея, мы можам прызначыць некалькі апрацоўшчыкаў да аднаго элементу. Наступны фрагмент кода паказвае, што гэта

Listing 9: Прызначэнне некалькіх апрацоўшчыкаў да аднаго элементу.

[Code]

<ўвод ID = “MyElement” тып = “кнопка” значэнне = “націсніце мяне” />

<скрыпт>

пераменная MyElement = document.getElementById( “MyElement” )

дзейнічае = функцыя() {

пільны( 'Дзякуй!’ )

}

былі здзелкі 2. = функцыя() {

пільны( "Яшчэ раз дзякуй!’ )

}

myElement.attachEvent( “OnClick”, апрацоўшчык)

myElement.attachEvent( “OnClick”, Handler2)

</скрыпт>

[/Code]

Прыкласці падзеі не передать параметр 'гэта'. Паводле стандарту W3C наступнае прызначэнне апрацоўшчыка працуе амаль ва ўсіх браўзэрах, якія выкарыстоўваюцца сёння.

далучэнне Handler

Listing 10: Ўстаноўка і выдаленне апрацоўшчыкаў ў адпаведнасці з w3c
[Code]

element.addEventListener ( падзея, апрацоўшчык, фаза )

[/Code]
выдаленне апрацоўшчыка
[Code]

элемент. removeEventListener ( падзея, апрацоўшчык, фаза )

[/Code]

Related Event мерапрыемствы: Мы павінны клапаціцца аб наступных чатырох дзеянняў пры апрацоўцы дзеянняў, звязаных падзей

· Рэгістрацыя апрацоўшчыка падзей: Гэта можа быць зроблена шляхам ўстаноўкі элементаў OnEvent уласцівасцяў e.g. OnClick або OnKeyPress і г.д.. Гэта працуе з усім браўзэрам, але мае абмежаванне, якое мы можам прымацаваць толькі адзін апрацоўшчык падзей да элемента. Прыкладзеныя падзеі могуць быць выдаленыя падобным спосабам з выкарыстаннем detachEvent або removeEventListener.

· Атрымаць аб'ект падзеі: Большасць браўзэраў перадаць аб'ект падзеі ў якасці аргументу апрацоўшчыка. Наступныя тры падзеі генеруюцца, калі карыстальнік пстрыкае мышшу.

o MouseDown: паказвае на тое, што мышы націснутая.

o MouseUp: паказвае на тое, што мыш выпушчаная.

o Click: паказвае на тое, што мыш націснутая. Калі гэта адбываецца паслядоўна, гэта паказвае на тое, што двайны пстрычка адбылося.

· Extract information from the object – Трэцім крокам з'яўляецца выманне дзеянні інфармацыя, звязаная з аб'ектам і ініцыяваць дзеянне.

· Inform about the completion of the event – Гэта апошні крок. Пасля таго, як падзея паспяхова прададзеная з аўкцыёну завяршэнне мерапрыемства адзначаны.

Summary: У заключэнне абмеркавання мы можам трымаць наступныя моманты на ўвазе
· An event is a signal from the front end to the back end.

· 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