Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.08.2012, 16: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) @,!, ^,%, и т.п. иначе произойдет ошибка.
Доступные: ', ", +, =, -, *, :, ?, (, ), [, ], и точка . .


Хочу услышать ваши отзовы .
Спасибо за внимание.
__________________
Интересно я единственный человек у которого чистая --> ⌨?
Ответить с цитированием
  #2 (permalink)  
Старый 18.08.2012, 16:52
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,103

Я этого не видел.
__________________
29375, 35

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

Aetae,
? не понял
__________________
Интересно я единственный человек у которого чистая --> ⌨?
Ответить с цитированием
  #4 (permalink)  
Старый 18.08.2012, 17:14
Аватар для Dim@
Профессор
Отправить личное сообщение для Dim@ Посмотреть профиль Найти все сообщения от Dim@
 
Регистрация: 21.04.2012
Сообщений: 951

Aetae,
даже не пойму как это воспринимать
__________________
Интересно я единственный человек у которого чистая --> ⌨?
Ответить с цитированием
  #5 (permalink)  
Старый 18.08.2012, 17:17
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от Dim@
eval(elem + ".on" + strEvent + " = function (){}");
зачем здесь eval ?
Ответить с цитированием
  #6 (permalink)  
Старый 18.08.2012, 17:20
Аватар для Dim@
Профессор
Отправить личное сообщение для Dim@ Посмотреть профиль Найти все сообщения от Dim@
 
Регистрация: 21.04.2012
Сообщений: 951

melky,
там вообще евал-ов много - недостаток знаю
затем что я не знаю точно что напишет разр. click или ololo в результате получается
при AE("document", "click", function (){alert("lol")});
получиться document.onclick = function (){}
__________________
Интересно я единственный человек у которого чистая --> ⌨?
Ответить с цитированием
  #7 (permalink)  
Старый 18.08.2012, 17:23
Аватар для kobezzza
Быдлокодер;)
Отправить личное сообщение для kobezzza Посмотреть профиль Найти все сообщения от kobezzza
 
Регистрация: 19.11.2010
Сообщений: 4,338

Код треш
Во всех браузерах (кроме ИЕ ниже 9-ки) есть addEventListener, который позволяет вешать много обработчиков, ловить события на любой фазе и this ссылается на элемент (а не на window в случае attachEvent).

Недостатком этих методов является то, что нельзя гарантировать порядок выполнения, но это легко поправить.
__________________
kobezzza
code monkey
Ответить с цитированием
  #8 (permalink)  
Старый 18.08.2012, 17:25
Аватар для Dim@
Профессор
Отправить личное сообщение для Dim@ Посмотреть профиль Найти все сообщения от Dim@
 
Регистрация: 21.04.2012
Сообщений: 951

kobezzza,
я просто был вдохновлен когда читал про AttachEvent
P.S. ----код треш ---- <<==== говнище что ли?
__________________
Интересно я единственный человек у которого чистая --> ⌨?
Ответить с цитированием
  #9 (permalink)  
Старый 18.08.2012, 17:28
Аватар для kobezzza
Быдлокодер;)
Отправить личное сообщение для kobezzza Посмотреть профиль Найти все сообщения от kobezzza
 
Регистрация: 19.11.2010
Сообщений: 4,338

Сообщение от Dim@ Посмотреть сообщение
P.S. ----код треш ---- <<==== говнище что ли?
Полное г без обид)
__________________
kobezzza
code monkey
Ответить с цитированием
  #10 (permalink)  
Старый 18.08.2012, 17:29
Аватар для Dim@
Профессор
Отправить личное сообщение для Dim@ Посмотреть профиль Найти все сообщения от Dim@
 
Регистрация: 21.04.2012
Сообщений: 951

kobezzza,
мне пофиг - мне 13
ну и писал я что бы в ИЕ < 9 работало
__________________
Интересно я единственный человек у которого чистая --> ⌨?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не срабатывает обертка фун-и в IE8 zilker Internet Explorer 6 16.07.2012 17:54
Кроссбраузерная обработка нажатий клавиш micscr Общие вопросы Javascript 12 22.12.2009 18:16
как переписать через attachEvent olgatcpip Internet Explorer 3 13.07.2009 15:30
attachEvent Игорь Р. Events/DOM/Window 0 19.01.2009 22:34
Ссылка на объект при использовании attachEvent Octane Events/DOM/Window 13 23.07.2008 16:37