Кроссбраузерная обертка AttachEvent
Всем привет :)
сегодня хочу представить вам свой скрипт - обертку функции AttachEvent. Все (ну или почти все) мы прекрасно знаем замечательную функцию AttachEvent позволяющую ставить сразу несколько обработчиков на одно событие, но данная функция поддерживается только ИЕ и Оперой. И вот собственно сам скрипт. function attachEvent (elem, strEvent, func, item){ if ((typeof elem != "string") || (typeof strEvent != "string") || (typeof func != "function")){ console.log("attachEvent error"); return; } var atElem = elem.replace(/((\[)|(\]))/img, "rec"); atElem = atElem.replace(/((\')|(\"))/g, "kav"); atElem = atElem.replace(/((\()|(\)))/img, "block"); atElem = atElem.replace(/(\.)/img, "point"); atElem = atElem.replace(/(\*)/img, "zvzd"); atElem = atElem.replace(/(\-)/img, "mins"); atElem = atElem.replace(/(\+)/img, "pls"); atElem = atElem.replace(/(\=)/img, "rvs"); atElem = atElem.replace(/(\:)/img, "dv"); atElem = atElem.replace(/(\?)/img, "vps"); if (typeof eval(elem + ".on" + strEvent) != "function"){ eval(elem + ".on" + strEvent + " = function (){}"); } if (typeof eval("attachEvent." + atElem) == "undefined"){ var str = "attachEvent." + atElem; eval(str + " = new Object()"); str += ".on" + strEvent; eval(str + " = new Array()"); } else{ if(typeof eval("attachEvent." + atElem + ".on" + strEvent) == "undefined"){ var str = "attachEvent." + atElem; str += ".on" + strEvent; eval(str + " = new Array()"); } } var str = "attachEvent." + atElem + ".on" + strEvent; var k = "attachEvent." + atElem + ".on" + strEvent; eval("attachEvent." + atElem + ".on" + strEvent + ".str2 = k"); var k = this.k; var txtfunc = eval(elem + ".on" + strEvent); eval(str + ".push( " + txtfunc + ")"); eval(str + ".push(" + (func + "") + ")"); var str2 = elem + ".on" + strEvent; eval(str2 + " = function () {\n \ for (var h = 0; h < " + str + ".length; h++){\n \ if (typeof " + str + "[h] == 'function'){\n \ eval('" + str + "[h](" + eval("attachEvent." + atElem + ".on" + strEvent + ".str2") + ".arguments)');\n \ }\n \ }\n \ }"); var arr = eval(str); arr = arr.join(); arr = arr.replace("function () {\n \ for (var h = 0; h < " + str + ".length; h++){\n \ if (typeof " + str + "[h] == 'function'){\n \ eval('" + str + "[h](" + eval("attachEvent." + atElem + ".on" + strEvent + ".str2") + ".arguments)');\n \ }\n \ }\n \ },",""); arr = arr.split(","); eval(str + " = arr"); arr = this.arr; for (var h = 0, mes; h < eval(str + ".length"); h++){ mes = str + "[h]"; eval(str + "[" + h + "] = " + eval(mes)); } var h = this.h; } Поддержка - оптимально работает в следующих браузерах и ИЕ (с каких это пор он браузер :lol: ) Хроме, Опере, Сафари, Файрфокс. Что он делает - как понятно из выше сказанного - он позволяет ставить сразу несколько обработчиков на одно событие. Как document.onkeydown = function (e){ e = e || window.event; alert(e.keyCode); } то она его не убьет (если он ставился на это же событие), а будет выполнять с другими, установленными спомощью AttachEvent. Как устанавливать? Надо вызвать функцию attachEvent (с маленькой буквы) с тремя параметрами: 1) На что ставиться обработчик - строка - ссылка на элемент (тпа если надо ставить на документ, то "document" и т.п.). 2) Строка обозначающая событие (без on) - "click", "keydown". 3) Функция обработчик - типа function () {alert("LOOOOOL")} И так - практика (пример): <!DOCTYPE html> <html> <head> <script type="text/javascript"> function attachEvent (elem, strEvent, func, item){ if ((typeof elem != "string") || (typeof strEvent != "string") || (typeof func != "function")){ console.log("attachEvent error"); return; } var atElem = elem.replace(/((\[)|(\]))/img, "rec"); atElem = atElem.replace(/((\')|(\"))/g, "kav"); atElem = atElem.replace(/((\()|(\)))/img, "block"); atElem = atElem.replace(/(\.)/img, "point"); atElem = atElem.replace(/(\*)/img, "zvzd"); atElem = atElem.replace(/(\-)/img, "mins"); atElem = atElem.replace(/(\+)/img, "pls"); atElem = atElem.replace(/(\=)/img, "rvs"); atElem = atElem.replace(/(\:)/img, "dv"); atElem = atElem.replace(/(\?)/img, "vps"); if (typeof eval(elem + ".on" + strEvent) != "function"){ eval(elem + ".on" + strEvent + " = function (){}"); } if (typeof eval("attachEvent." + atElem) == "undefined"){ var str = "attachEvent." + atElem; eval(str + " = new Object()"); str += ".on" + strEvent; eval(str + " = new Array()"); } else{ if(typeof eval("attachEvent." + atElem + ".on" + strEvent) == "undefined"){ var str = "attachEvent." + atElem; str += ".on" + strEvent; eval(str + " = new Array()"); } } var str = "attachEvent." + atElem + ".on" + strEvent; var k = "attachEvent." + atElem + ".on" + strEvent; eval("attachEvent." + atElem + ".on" + strEvent + ".str2 = k"); var k = this.k; var txtfunc = eval(elem + ".on" + strEvent); eval(str + ".push( " + txtfunc + ")"); eval(str + ".push(" + (func + "") + ")"); var str2 = elem + ".on" + strEvent; eval(str2 + " = function () {\n \ for (var h = 0; h < " + str + ".length; h++){\n \ if (typeof " + str + "[h] == 'function'){\n \ eval('" + str + "[h](" + eval("attachEvent." + atElem + ".on" + strEvent + ".str2") + ".arguments)');\n \ }\n \ }\n \ }"); var arr = eval(str); arr = arr.join(); arr = arr.replace("function () {\n \ for (var h = 0; h < " + str + ".length; h++){\n \ if (typeof " + str + "[h] == 'function'){\n \ eval('" + str + "[h](" + eval("attachEvent." + atElem + ".on" + strEvent + ".str2") + ".arguments)');\n \ }\n \ }\n \ },",""); arr = arr.split(","); eval(str + " = arr"); arr = this.arr; for (var h = 0, mes; h < eval(str + ".length"); h++){ mes = str + "[h]"; eval(str + "[" + h + "] = " + eval(mes)); } var h = this.h; } </script> <meta encoding="windows-1752" > <script type="text/javascript"> var i = -1; window.onload = function (){ document.getElementById('LOL').onclick = function (){alert(i++);}; attachEvent("document", "click", function (){alert(i++);}); attachEvent("document.getElementById('LOL')", "click", function (e){ e = e || window.event; alert("x = " + e.clientX); }); } </script> </head> <body> <div id="LOL">ввввввввввввввввввввввввввввввввввввввввввв </div> </body> </html> P.S. Вопрос. 1) Что если после AE (AttachEvent) сделать так: До: attachEvent("document", "click", function () {alert("Вы нажали на кнопку мыши.")}); attachEvent("document", "click", function () {alert("Это второй алерт.")}); После: document.onclick = function () {alert("LLLLOOOOLL")} Ответ: будет снесен обработчик AE, но если после будет поставить ещё один AE, то будут работать все те что были установлены до и после. P.P.S. Нельзя использовать символы (к примеру когда пишут getElementById) @,!, ^,%, и т.п. иначе произойдет ошибка. Доступные: ', ", +, =, -, *, :, ?, (, ), [, ], и точка . . Хочу услышать ваши отзовы :) :yes: . Спасибо за внимание. :dance: :dance: |
Я этого не видел.
|
Aetae,
?:blink: не понял |
Aetae,
даже не пойму как это воспринимать :) |
Цитата:
|
melky,
там вообще евал-ов много - недостаток знаю:) затем что я не знаю точно что напишет разр. click или ololo в результате получается при AE("document", "click", function (){alert("lol")}); получиться document.onclick = function (){} |
Код треш:)
Во всех браузерах (кроме ИЕ ниже 9-ки) есть addEventListener, который позволяет вешать много обработчиков, ловить события на любой фазе и this ссылается на элемент (а не на window в случае attachEvent). Недостатком этих методов является то, что нельзя гарантировать порядок выполнения, но это легко поправить. |
kobezzza,
я просто был вдохновлен когда читал про AttachEvent :lol: P.S. ----код треш :)---- <<==== говнище что ли? :) |
Цитата:
|
kobezzza,
мне пофиг - мне 13 :lol: ну и писал я что бы в ИЕ < 9 работало ;) |
Часовой пояс GMT +3, время: 08:59. |