Нужна помощь! Обработка JS событий до загрузки HTML кода
 

Здравствуйте! У меня такая проблема:
Есть код:

<!-- JS -->

<script type='text/javascript'>

 document.querySelector('#mytest').onclick=function(){
 alert('Тест удался!');

}
</script>

<!-- HTML -->

<span id='mytest'>Click ME</span>

Обработчик не работает, т.к. еще не обработан HTML, я вычитал вариант использовать window.onload , но это слишком громоздко и проблематично.
Моя проблема заключается в следующем: Мне нужно, что бы все обработчики событий и все возможные функции JS работали верху, до написания HTML, т.к. писать JS код после HTML мне не нравиться.
P.S. Привык как в php пишешь код скрипта в верху, а html уже в низу.
Хочу так-же только с JS.
Надо чтобы работало как у Jquery т.е.

$('бал бал').click(
                        function(){ alert('бла бла');}
                       );

Помогите пожалуйста решиться задачу!

onload - самый легкий, кроссбраузерный и понятный способ решения этой проблемы.

onload = function() {

здесь код, в том числе и для работы с DOM-деревом

};

Или подключай библиотеки вверху страницы, а свои скрипты внизу.

2 лишние строчки - это громоздко?

qvab,
:yes:А Что мешает добавить библиотеку jQuery на страницу?

(Сегодня форма одежды - порадная - белый верх - черный низ - (Привык я так....) Хотя сам в футболке

Лишние 90кб ради одной бессмысленной фичи?

а не проще взять именно то что нужно из библиотеки а не подключать ее полностью

Раед,
Мну по себе судит - поставил 90 - остальные скрипты сократились на 40-50 %
Не забывайте про кешируемость, в отличие от полнотекстовых скриптов на странице - библиотека грузится только в первый раз!

Господа! Jquery - не вариант, для меня это... как чистить зубы чужой щеткой, не люблю я библиотеки, сокращают потенциал...
Если кто знает, какие образом в Jquery события прописанные в верху работаю? Как там обрабатывается код?

P.S. На самом деле пишу свою библиотеку для своих нужд, только не обходимое: hide, show, fadeIn, fadeOut и т.п. По этому Jquery мне не как не надо.

ну дак проверяйте есть появился ли элемент в dom дереве и выполняйте события привязанные к нему. Для этого делайте "стек событий" каждый элемент которого -элемент для какого подвязано событие,событие , и действие.
Т.е наблюдайте за всеми событиями на странице,при появлении такого что есть в "стеке" проверяйте произошло ли на необходимом элементе , и если да выполняйте действие.-Что то на манер наблюдателя

По моему путь гораздо длиннее.

qvab,
Чем вас window.onload не устраивает?

Придумал такой вариант:

function newobj(elem){
this.click=function(fun){
 
document.addEventListener('DOMContentLoaded', function(){
                                                         

        document.querySelector(elem).addEventListener('click', fun, false);

                                                        }, false)

}

}


function MY(t){ return new newobj(t);}

// Получается как в JQ

MY('#test').click(function(){
                                      alert('Тест');
                                  });

Прощу комментарии. Может кто лучше вариант предложит?

Этот работает отлично, и без window.onload - не устраивает тем,
что надо оборачивать каждый раз, и onload ждет полностью загрузки всего содержимого. DOMContentLoaded определенно выигрывает.

(этот пример не кроссбраузерный).

Да , чот надумано всё, а если б Вы начали с JS - Пошли б PHP переиначивать ?, Ни к чему лишние наволочки, оно и без этого багов хватает...

Ну не ходят со своим уставом в чужой монастырь, присмотрецо нун сызново... После и под себя делайте..

qvab,

скрипт:

(function(){
    var doc = document, data = {}, docEl = doc.documentElement;
    
    // главная функция.
    function addHandler(evt, selector, handler) {
      if (!data[evt]) { // первый запуск для этого типа событий
        data[evt] = {};
        // надо установить обработчик
        // ставим его на документ. так же делает live у jquery.
        if (doc.addEventListener) {
          doc.addEventListener(evt, universal, false);
        } else if (doc.attachEvent) {
          doc.attachEvent("on" + evt, universal);
        } else {
            // тут выпендриваемся со свойствами. но оно уже не нужно.
        }
      }
      if (!data[evt][selector]) {
        data[evt][selector] = [];
      }
      data[evt][selector].push(handler);
    }
    
    // этот обработчик будет расфасовывать поступающие сообщения.
    function universal(e) {
      var selector, i;
      // фикс ивента для IE
      e = fixEvent(e || window.event);
*!*
      if (e.type in data) {// тут может быть баг в IE. у меня под рукой его нет.
*/!*     
   
        for (selector in data[e.type]) { // обходим все селекторы 
          if (matches(e.target, selector)) {// и находим тот, под который попадает элемент
            for(i = 0; i < data[e.type][selector].length; i += 1) { // и исполняем массив обработчиков.
              data[e.type][selector][i].call(e.target, e);
            }
          }
        }
        
      }
    }
    
    // тут добавляются w3c фишки для IE
    function fixEvent(e) {
        if (!e.target) {
            e.target = e.srcElement;
        }
    
        return e;
    }
    
    // тут проверяется соответствие элемнта селектору
    function matchesSel(selector) {
      // исп. this для поддержки нативных методов.
        return selector === "*" || this.tagName.toLowerCase() === selector.toLowerCase();
    }
    // если есть нативные реализации проверки соотв. селектору, то исп. их.
    matchesSel = docEl.matchesSelector || docEl.mozMatchesSelector || docEl.webkitMatchesSelector || docEl.oMatchesSelector || docEl.msMatchesSelector || matchesSel;
    
    // оборачиваем.
    var matches = function(element, selector){
      return matchesSel.call(element, selector);
    };

    window["addHandler"] = addHandler;
})();

пример:

<!DOCTYPE html>
<html>
<head>
<script>
(function(){function h(a){var c,d,a=a||window.event;a.target||(a.target=a.srcElement);if(a.type in b)for(c in b[a.type])if(g.call(a.target,c))for(d=0;d<b[a.type][c].length;d+=1)b[a.type][c][d].call(a.target,a)}function g(a){return"*"===a||this.tagName.toLowerCase()===a.toLowerCase()}var f=document,b={},e=document.documentElement,g=e.matchesSelector||e.mozMatchesSelector||e.webkitMatchesSelector||e.a||e.msMatchesSelector||g;window.addHandler=function(a,c,d){b[a]||(b[a]={},f.addEventListener?f.addEventListener(a,
h,!1):f.attachEvent&&f.attachEvent("on"+a,h));b[a][c]||(b[a][c]=[]);b[a][c].push(d)}})();</script>

<!-- ДО ЗАГРУЗКИ ДЕРЕВА! -->
<script>
  addHandler("click", "div", function(){alert("клик по диву");});
  addHandler("click", "*", function(){alert("клик по документу");});
  addHandler("click", "span", function(){alert("клик по спану");});
</script>

</head>
<body>
<h1>Кликни на них!</h1>

<div>Я див!</div><br><span>Я span</span>


</body>
</html>

Есть Нормальный эмуль всех Ие вплоть до 8 => * может сейчас и лучше
http://www.my-debugbar.com/wiki/IETester/HomePage

melky,
Что-то мне не нравиться идея вешать события на селектор, а не на элемент.

P.S. В примере баг есть. Когда кликаешь по спану, то сначала вылетает алерт клик по документу. Какоето странное всплытие получается.

когда возникает неотложная необходимость в IE, я врубаю ноутбук с восьмёркой, и там уже нормально дебажу код в IE 10 и нативных developer tools.

так работает live в jQuery, только с несколькими правками багов типа всплытия.
а там и не учитывается всплытие. порядок исполнения обработчиков вообще может быть разным в браузерах (он зависит от порядка значений в data[evt], и от порядка добавления обработчика)

прикол то в том, что оно работает без загрузки дерева :)

Порядок порядком, а всплытие везде одинаковое. Неужели jQ его тоже не учитывает?

учитывает, я слышал, что у них есть эмуляция механизма всплытия событий (для старых браузеров)

в принципе, это решится парой циклов сортировки... но для этого нужно иметь полноценный matchesSel.