на что навешать обработчик события
насколько я знаю обычто навешивают на id или cssClass
но вот к примеру сейчас верстальщик хочет удалить некоторые cssClassы из атрибута class но так как в js эти cssClassы используются удалить их как-то затруднительно на будущее собираюсь навешать обработчик события на атрибут "data-js-selector", чем это плохо, какие есть подводные камни? поделитесь опытом/мнением как делаете/сделали бы вы |
leko,
Походу Вы говорите о jQuery, посколь навешивать на класс в нативном JS - затруднительно |
leko - Вам нужно разобраться что такое выборка елементов, а что такое навешивание событий.
Событие не навешивается на аттрибуты элемента, событие навешивается на сам элемент. В данном случае по аттрибутам Вы находите элемент на странице и после на сам элемент уже навешиваете событие. В данном случае никаких проблем не будет, кроме того что JQuery будет немного медлене находить элемент на странице. |
Цитата:
var element = document.querySelector(,,,,,); // БАБАХ!! 20мс сожрали // тут код // а тут ещё поиск var elements = document.querySelectorAll(........); // ВСПЫШКА !!! отожрали 50мс, ибо querySelector прекращает поиск после первого найденного, а эта штука идет дальше. Цитата:
|
Цитата:
При много тегах - может чаша и склонится в Вашу сторону |
Цитата:
|
Цитата:
хм ... напомните, почему нельзя вешать обработчики через атрибуты? из-за того, что низя получить объект события? да вроде можно :
<script>
function rand () {
return 255 * Math.random() | 0;
}
function delegater (e) {
e = e || event;
e = e.target || e.srcElement;
e.style.backgroundColor = "rgb("+ rand() +", " + rand() + ", " + rand() + ")";
}
</script>
<body onclick="delegater(event)">
<div>DIV</div>
<p>P</p>
<a href="#">A</a>
</body>
Потому что устарело? смешно же. |
Цитата:
Цитата:
Имеется в виду лучше для производительности или удобства разработки (или может быть и то и другое)? |
Цитата:
Цитата:
Цитата:
|
Цитата:
Цитата:
Цитата:
|
leko,
<a onclick="B_Funck()" >Тут что то</a>Ни наю - что Вы пропустите Изменив функцию - ведь тег не измениться Проще имхо дописывать в тег ссылку на функцию, нежели атрибут |
Цитата:
|
Цитата:
vs $('.favorites').click(B_Funck) надо поменять функцию, и что будем делать в первом варианте? Цитата:
|
Цитата:
|
Цитата:
function B_Funck (){
Тут и меняете , что захотите
}
Пример
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<a class="favorites" onclick="return B_Funck(this)" >Тут что то(Клик)</a>
<script type="text/javascript">
function B_Funck (a){
alert($(a).text());
return false;
}
</script>
Поменяли
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<a class="favorites" onclick="return B_Funck(this)" >Тут что то(Клик)</a>
<script type="text/javascript">
function B_Funck (a){
$(a).css({'color':'red'})
return false;
}
</script>
Eще поменяли
<a class="favorites" href="" onclick="return B_Funck(this)" >Тут что то(Клик)</a>
<script type="text/javascript">
function B_Funck (a){
//this.href='http://javascript.ru/forum/misc/29942-na-chto-naveshat-obrabotchik-sobytiya-2.html#post189855';
window.open('http://javascript.ru/forum/misc/29942-na-chto-naveshat-obrabotchik-sobytiya-2.html#post189855');
return true;
}
</script>
|
Deff, способ, конечно, хороший, но если элементов много и они не создаются динамически в цикле, чтобы в каждом не писать обработчик (к тому же может захотеться поменять имя у функции), проще сделать делегированием.
Тут думаю палка о двух концах: с одной стороны легче понять, что будет делать элемент, если у него обработчик в атрибуте (если он в виде функции, придётся найти и её), с другой стороны, удобнее смотреть обработчик для группы элементов (но придётся найти, где он задан), а не на каждый элемент по отдельности. |
bes,
Вопрос номер 1: Это, - где ТС собрался прописывать атрибуты - если на серве (Судя по предыдущим замечаниям) то прописать атрибут или обработчик в теге - однофигственно, но последующих забот - с функцией меньше |
Цитата:
PS: начинает доходить вся польза от обработчиков на body: смотришь на элемент (его класс или id), смотришь на обработчики на body, находишь этот элемент в обработчиках, понимаешь, что он делает. |
Цитата:
|
Цитата:
|
Вроде очень даже удобная схема получается
<input type="button" value="click" class="but1">
<input type="button" value="click" class="but2">
<script>
window.onload = function () {//onload begin
document.body.onclick = function (e) {//onclick begin
e = e || event;
var target = e.target || e.srcElement;
if (target.className == 'but1') {
alert(target.className);
return;
}
if (target.className == 'but2') {
alert(target.className);
return;
}
}//onclick end
}//onload end
</script>
<input type="button" value="click" class="but1">
<input type="button" value="click" class="but2">
<script>
window.onload = function () {//onload begin
document.body.onclick = function (e) {//onclick begin
e = e || event;
var target = e.target || e.srcElement;
if (target.className == 'but1') {
alert(target.className);
} else
if (target.className == 'but2') {
alert(target.className);
}
}//onclick end
}//onload end
</script>
<input type="button" value="click" class="but1">
<input type="button" value="click" class="but2">
<script>
window.onload = function () {//onload begin
document.body.onclick = function (e) {//onclick begin
e = e || event;
var target = e.target || e.srcElement;
switch (target.className) {//switch begin
case 'but1': {
alert(target.className);
break;
}
case 'but2': {
alert(target.className);
break;
}
}//switch end
}//onclick end
}//onload end
</script>
|
Цитата:
Цитата:
Цитата:
Цитата:
Цитата:
Цитата:
единственная проблема возникнет, когда захочется проделегировать НЕвсплывающие события - к хорошему быстро привыкаешь |
Цитата:
Только если для каждого элемента задавать разные обработчики, то всё равно их придётся как-то распознавать (например, по классу или id) |
| Часовой пояс GMT +3, время: 12:35. |