Показать сообщение отдельно
  #1 (permalink)  
Старый 18.08.2012, 17:31
Аватар для Dim@
Профессор
Отправить личное сообщение для Dim@ Посмотреть профиль Найти все сообщения от Dim@
 
Регистрация: 21.04.2012
Сообщений: 951

Кроссбраузерная обертка 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;
}

Поддержка - оптимально работает в следующих браузерах и ИЕ (с каких это пор он браузер )
Хроме,
Опере,
Сафари,
Файрфокс.

Что он делает - как понятно из выше сказанного - он позволяет ставить сразу несколько обработчиков на одно событие.

Как работает, срабатывает - он не убивает прошлый обработчик (если он вообще есть), то есть если до вызова функции 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) @,!, ^,%, и т.п. иначе произойдет ошибка.
Доступные: ', ", +, =, -, *, :, ?, (, ), [, ], и точка . .


Хочу услышать ваши отзовы .
Спасибо за внимание.
Ответить с цитированием