Всем привет
сегодня хочу представить вам
свой скрипт - обертку функции 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;
}
Поддержка - оптимально работает в следующих браузерах и ИЕ (с каких это пор он браузер 
)
Хроме,
Опере,
Сафари,
Файрфокс.
Что он делает - как понятно из выше сказанного - он позволяет ставить сразу несколько обработчиков на одно событие.
Как
работает, срабатывает - он не убивает прошлый обработчик (если он вообще есть), то есть если до вызова функции AttachEvent на определенный элемент на этом элементе есть обработчик, типа:
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) @,!, ^,%, и т.п. иначе произойдет ошибка.
Доступные: ', ", +, =, -, *, :, ?, (, ), [, ], и точка . .
Хочу услышать ваши отзовы
.
Спасибо за внимание.
