Кроссбраузерная обертка 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, время: 17:54. |