30.05.2012, 18:54
|
|
Новичок на форуме
|
|
Регистрация: 27.05.2012
Сообщений: 3
|
|
Придумал такой вариант:
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 определенно выигрывает.
(этот пример не кроссбраузерный).
Последний раз редактировалось qvab, 30.05.2012 в 18:56.
|
|
30.05.2012, 19:02
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
|
Да , чот надумано всё, а если б Вы начали с JS - Пошли б PHP переиначивать ?, Ни к чему лишние наволочки, оно и без этого багов хватает...
Ну не ходят со своим уставом в чужой монастырь, присмотрецо нун сызново... После и под себя делайте..
|
|
31.05.2012, 11:20
|
|
sinistral
|
|
Регистрация: 28.03.2011
Сообщений: 5,418
|
|
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>
Последний раз редактировалось melky, 31.05.2012 в 11:23.
|
|
31.05.2012, 12:17
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
|
Сообщение от melky
|
|
if (e.type in data) {// тут может быть баг в IE. у меня под рукой его нет.
|
Есть Нормальный эмуль всех Ие вплоть до 8 => * может сейчас и лучше
http://www.my-debugbar.com/wiki/IETester/HomePage |
|
31.05.2012, 14:01
|
 |
''
|
|
Регистрация: 11.12.2011
Сообщений: 636
|
|
|
melky,
Что-то мне не нравиться идея вешать события на селектор, а не на элемент.
P.S. В примере баг есть. Когда кликаешь по спану, то сначала вылетает алерт клик по документу. Какоето странное всплытие получается.
Последний раз редактировалось Раед, 31.05.2012 в 14:26.
|
|
31.05.2012, 18:01
|
|
sinistral
|
|
Регистрация: 28.03.2011
Сообщений: 5,418
|
|
когда возникает неотложная необходимость в IE, я врубаю ноутбук с восьмёркой, и там уже нормально дебажу код в IE 10 и нативных developer tools.
Сообщение от Раед
|
melky,
Что-то мне не нравиться идея вешать события на селектор, а не на элемент.
|
так работает live в jQuery, только с несколькими правками багов типа всплытия.
|
Сообщение от Раед
|
|
P.S. В примере баг есть. Когда кликаешь по спану, то сначала вылетает алерт клик по документу. Какоето странное всплытие получается.
|
а там и не учитывается всплытие. порядок исполнения обработчиков вообще может быть разным в браузерах (он зависит от порядка значений в data[evt], и от порядка добавления обработчика)
прикол то в том, что оно работает без загрузки дерева  |
|
31.05.2012, 18:37
|
|
''
|
|
Регистрация: 11.12.2011
Сообщений: 636
|
|
|
Сообщение от melky
|
|
а там и не учитывается всплытие. порядок исполнения обработчиков вообще может быть разным в браузерах (он зависит от порядка значений в data[evt], и от порядка добавления обработчика)
|
Порядок порядком, а всплытие везде одинаковое. Неужели jQ его тоже не учитывает? |
|
31.05.2012, 19:10
|
|
sinistral
|
|
Регистрация: 28.03.2011
Сообщений: 5,418
|
|
|
Сообщение от Раед
|
|
Порядок порядком, а всплытие везде одинаковое. Неужели jQ его тоже не учитывает?
|
учитывает, я слышал, что у них есть эмуляция механизма всплытия событий (для старых браузеров)
в принципе, это решится парой циклов сортировки... но для этого нужно иметь полноценный matchesSel. |
|
|
|
