 setEventHandler |
  |
  7.09.2007г. в 08:05ч.
Коментар:
#1
|
|
|
Бакалавър  Група: Потребители Съобщения: 455 Дата на регистрация: 8.03.2007г. Потребител # 2 317  |
Здравейте, През последните 2-3 години, с навлизането в така наречения Web 2.0, се заговори много не само за разделяне на презентацията на един сайт от неговата структура, но също и пълно отделяне на функционалността от структурата. Второто се постига с една техника, която се нарича unobtrusive javascript, и идеята, която стои зад нея е, че един сайт трябва да може да работи и ако посетителят му е изключил javascript на своя браузър, а също че html елементите трябва да съдържат в себе си само html атрибути, но не и javascript event-и като onclick, onmouseover, onmouseout, onsubmit, onkeyup, onkeydown, onreset и т.н. Това се постига чрез така наречените event handler-и и чрез документно-обектния модел (DOM). Тук, разбира се идва интересната и предизвикателна част - различните рендъринг енджини на браузърите, а именно Trident (Internet Explorer), Gecko (Mozilla Firefox, Netscape, Safari, Seamonkey) и Opera (Opera) предоставят различни методи за event хендлинг, а също и различни имена на самите event хендлъри - при Internet Explorer методът се нарича attachEvent(type, listener) а при всички останали - addEventListener(type, listener, usecapture), където: "type" e името на event хендлъра, който при Internet Explorer е наследил оригиналното си име - onclick, onmouseover, onmouseout, onsubmit, onkeyup, onkeydown, onreset, но при Gecko и Opera, тези event-и са без префикса "on", т.е. click, mouseover, mouseout, submit, keyup, keydown, reset и т.н; "listener" - името на функцията, или самата функция; "usecapture" - boolean (true или false) атрибут само за Gecko браузъри; Искам да ви покажа една функция, която бях написал преди време, която поддържа и двата метода за event хендлинг, без да се налага да се прави проверка за браузъри и да се пише функционалност на две места: КОД <script type="text/javascript"> function setEventHandler(ElementId, EventType, ClientFunction, UseCapture) { var ClientEventType; if(window.attachEvent) { ClientEventType = 'on' + EventType; document.getElementById(ElementId).attachEvent(ClientEventType, ClientFunction) } else { document.getElementById(ElementId).addEventListener(EventType, ClientFunction, UseCapture); } } </script> ... където аргументите на функцията setEventHandler означават: "ElementId" - ID на html елемента, на който искаме да "закачим" събитие "EventType" - тип на събитието, които може да бъде всеки event хендлър, но без префикса "on", т.е. click, focus, blur, mouseup, mousedown, submit, reset, keyup, keydown и т.н. "ClientFunction" - функцията, която ще се файърва на при извършване на дадено действие върху дадения елемент; "UseCapture" - bubbling events, или useCapture за Gecko. Ето и едно малко примерче, което демонстрира постигането на unobtrusive javascript event handling с горната функция: HTML: КОД <input type="button" id="AlertButton" value="Click to See the Alert" /> JavaScript (в <head>...</head> секцията на страницата, или във външен .js файл): КОД <script type="text/javascript"> // universal function for unobtrusive event handling function setEventHandler(ElementId, EventType, ClientFunction, UseCapture) { var ClientEventType; if(window.attachEvent) { ClientEventType = 'on' + EventType; document.getElementById(ElementId).attachEvent(ClientEventType, ClientFunction) } else { document.getElementById(ElementId).addEventListener(EventType, ClientFunction, UseCapture); } } // common pageload events window.onload = function() { /* other common pageload events */ // set unobtrusive event handling for the "AlertButton" setEventHandler('AlertButton', 'click', function(e) { alert('Button was Clicked!'); }, false) } </script> От този линк можете да си свалите и кода от примерчето. Надявам се това да ви е полезно! Успех! Това съобщение е било редактирано от acidmartin на 14.03.2008г. в 20:25ч. |
 |
 
|
|
22.04.2013г. в 16:44ч.
Коментар:
#2
|
|
|
Новак Група: Потребители Съобщения: 2 Дата на регистрация: 28.03.2013г. От: Ямбол Потребител # 23 150 |
А можеш ли да ми кажеш как да изведа "Button was clicked!" СЪС снимка и да е във самата страница или на част от страницата?
|
|
|
|
|
1 потребители преглеждат тази тема в момента (1 гости, 0 анонимни потребители)
Потребители, преглеждащи темата в момента:
|
Олекотена Версия | Сега е: 09:06 - 9.06.2026г. |