Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как сделать функцию, которая могла бы возврщать объект по клику на нем (https://javascript.ru/forum/misc/14407-kak-sdelat-funkciyu-kotoraya-mogla-vozvrshhat-obekt-po-kliku-na-nem.html)

DimonCry 14.01.2011 20:45

Как сделать функцию, которая могла бы возврщать объект по клику на нем
 
Другими словами, есть документ, в нем есть несколько дивов (которые находятся не сразу в body), а в другом родительском диве. Необходима функция, которая возвращала тот объект по которому кликнули в этом родительском диве.
Нужна функция, ну или какие-нибудь идеи...

Amphiluke 14.01.2011 21:04

Просто навешиваете обработчики события "click" на нужные дивы, а информация о кликнутом в данный момент диве приходит в обработчик как аргумент в виде атрибута target или srcElement объекта Event.

Более того, ключевое слово this в обработчике указывает на объект, вызвавший событие.

DimonCry 14.01.2011 21:09

Amphiluke, эти дивы создаются динамически. А как им можно в таком случае навешать обработчики?
их количество заранее не известно

Amphiluke 14.01.2011 21:13

А создаются кем? Вы их создаете? Если да, то при создании и задавайте им в атрибуте onclick ссылку на обработчик.

DimonCry 14.01.2011 21:15

ааа... блин, точно! Спасибо!

monolithed 14.01.2011 21:16

Цитата:

Сообщение от DimonCry
не сразу в body), а в другом родительском диве

что за бред, излагайте свои мысли конкретней!
Обход дочерних элементов:
<script type="text/javascript">
window.onload = function(){
    var element = document.getElementById('div'), children = element.childNodes,  i = children.length;
    if(element.hasChildNodes()){
        while(i--){
            children[i].onclick = (function(i){
                return function(){
                    children[i].nodeType == 1 && alert(this.tagName + ':' + i);
                    return false;
                };
            }(i));
        }
    }
};
</script>

<div id="div">
    <a href="#">click1</a>
    <a href="#">click2</a>
</div>

Более упрощенный вариант:
<script type="text/javascript">
window.onload = function(){
    var children = document.getElementById('div').childNodes,  i = children.length;
    while(i--){
        children[i].onclick = (function(i){
            return function(){
                this.nodeType == 1  && alert(this.tagName + ':' + i);
                return false;
            };
        }(i));
    }
};
</script>

<div id="div">
    <a href="#">click1</a>
    <a href="#">click2</a>
</div>

Обход определенных дочерних элементов (упорядоченный nodeList):
<script type="text/javascript">
window.onload = function(){
    var children = document.getElementById('div').getElementsByTagName('a'),  i = children.length;
    while(i--){
        children[i].onclick = (function(i){
            return function(){
                alert(this.tagName + ':' + i);
                return false;
            };
         }(i));
    }
};
</script>

<div id="div">
    <a href="#">click1</a>
    <a href="#">click2</a>
</div>

Более упрощенный вариант обхода определенных дочерних элементов без возвращение индекса:
<script type="text/javascript">
window.onload = function(){
    var children = document.getElementById('div').getElementsByTagName('a'),  i = children.length;
    while(i--){
        children[i].onclick = function(){
            this.style.color = this.style.color != 'red' ? 'red' : '';
            return false;
         };
    }
};
</script>

<div id="div">
    <a href="#">click1</a>
    <a href="#">click2</a>
</div>

Или же выбрать элемент на котором произошло событие:
<script type="text/javascript">
window.onload = function(){
    var children = document.getElementById('div').getElementsByTagName('a'),  i = children.length;
    while(i--){
        children[i].onclick = function(event){
            var event = event || event.window, element = (event.target) ? event.target : event.srcElement;
            element.style.color = element.style.color != 'red' ? 'red' : '';
            return false;
        };
    }
};
</script>

<div id="div">
    <a href="#">click1</a>
    <a href="#">click2</a>
</div>

Amphiluke 14.01.2011 21:21

Кстати, благодаря механизму «всплытия» можно иметь один-единственный обработчик на родительском контейнере динамически создаваемых блоков.

<div id="adiv"></div>
<script type="text/javascript">
	function foo(e) {
		if (!e) e = event;
		var sender = (e.target) ? e.target : e.srcElement;
		alert(sender.innerHTML);
	}
	var adiv = document.getElementById("adiv");
	if (adiv.addEventListener) {
		adiv.addEventListener("click", foo, false);
	} else {
		adiv.attachEvent("onclick", foo);
	}
	adiv.innerHTML = "<div>ololo</div><div>I'm a div</div><div>O_o</div>";
</script>

DimonCry 14.01.2011 21:39

Цитата:

Сообщение от monolithed
излагайте свои мысли конкретней!

я имел ввиду: не сразу в боди, они находятся, а через несколько уровней его потомков.(хотя это было не так важно)
спасибо за ответ, сейчас буду разбираться в нем...

monolithed 14.01.2011 21:46

Amphilukehttp, точно, есть же еще и такой вариант, а то запамятовал (тоже добавил выше) :)
кстати, если еще не знаете как запускать код на форуме, прочтите тут

Цитата:

Сообщение от DimonCry
я имел ввиду: не сразу в боди

Цитата:

Сообщение от DimonCry
а через несколько уровней его потомков

одно другому противоречит. поясните или лучше покажите код?


Часовой пояс GMT +3, время: 22:32.