jQuery bind/on click или JavaScript onClick - что и в каких случаях лучше юзать
Добрый день всем!
Интересуют мнения по такому интересному вопросу: Что же лучше/производительнее/удобнее и в каких ситуациях - метод jQuery .on('click'...) или событие тега onClick="..." |
Цитата:
|
IVAN86,
По скорости лучше onclick="Func()" прямо в теге Но ежели скрипт пользовательский(от клиента) то в тег уже onclick="Func();" вряд ли установишь и так же проблемы при их оч большом кол-ве - разрастаецо объем передаваемой страницы. тады вышеуказанное ksa |
На самом деле далеко не одно и то же.
Если решать задачу "кликабельной таблицы" (~300 строк), где при клике по строчке должна срабатывать функция, то будет большая разница. В одном случае много кода, в другом много событий за которыми следит метод .on Кроме того, если таблица подгружается динамически.... тут начинается самое интересное... |
Цитата:
|
Цитата:
Я думаю, принцип такой - где можно обойтись без jq, нужно обойтись без jq. |
самый лучший вариант добавление обработчика это
addEventListener |
кстати проводил свое исследование по этой теме , какой самый быстрый способ добавить обработчик (может для профи примитивно , для новичков пойдет)
http://www.html.by/threads/25995-ben...mentam-v-cikle |
Цитата:
Один вариант клика сработает мгновенно, а другой будет срабатывать через полчаса? |
Цитата:
|
Цитата:
В таком случае нужно привязывать on к body, а это, думаю, затратно. |
Цитата:
|
Цитата:
<style>
td {border: solid 1px; cursor: pointer}
</style>
<body>
<button id="but">create table</button>
<script>
window.onload = function () {
var str = '<table>';
for (var i = 0; i < 10; i++) {
str += '<tr>';
for (var j = 0; j < 10; j++) {
str += '<td>' + i + j + '</td>';
}
str += '</tr>';
}
str += '</table><br>';
document.body.onclick = function (e) {
e = e || event;
var target = e.target || e.srcElement;
if (target.id == 'but') {
document.body.innerHTML += str;
} else if (target.tagName == 'TD') {
alert(target.innerHTML)
}
}
}
</script>
|
Цитата:
А если в таблице появятся ссылки и input-ы, как быть? |
Цитата:
Никто особо не вспотеет при его использовании. |
Цитата:
|
Да это как в анекдоте:
На выпуске агентов по защите авиалиний от терористов... - Представьте, что вы в лайнере где 500 пассажиров и есть один терорист с бомбой... Ваши действия? - Я путем тестов, которым обучался, вычислю того терориста и нейтрализую. - Хорошо... Усложним задачу. У того терориста есть сообщник с еще одной бомбой! - Так же используя тесты, вычислю обоих... Дождусь пока один отвлечется, устраню другого, а потом и первого. - Хорошо... А если у терористов будут свои люди в салоне? И у них тоже будут бомбы? - Я не совсем понимаю... Вы сами-то за кого? |
Цитата:
Но, всё же, я думаю, код не будет работать как надо в этом примере: Код:
|
<style>
td {border: solid 1px; cursor: pointer}
</style>
<body>
<button id="but">create table</button>
<script>
window.onload = function () {
var str = '<table>';
for (var i = 0; i < 10; i++) {
str += '<tr>';
for (var j = 0; j < 10; j++) {
str += '<td><input type="checkbox" /> ' + i + j + '</td>';
}
str += '</tr>';
}
str += '</table><br>';
document.body.onclick = function (e) {
e = e || event;
var target = e.target || e.srcElement;
if (target.id == 'but') {
document.body.innerHTML += str;
} else if (target.tagName == 'TD') {
alert(target.children[0].checked + '; ' + target.innerText || target.textContent);
//в FF только textContent, в IE только innerText
}
}
}
</script>
|
bes - Хорошее решение!
Я решил эту задачу на JQ таким образом:
$("body").on("click", "tr", function(){ alert(1); })
.on({
"mouseenter": function(){ $("body").off("click", "tr"); },
"mouseleave": function(){ $("body").on("click", "tr", function(){ alert(1); }); },
}, ".tr input, .tr a");
Вопрос на сколько это сильно грузит браузер остаётся открыт. |
Думаю не сильно
<style>
td {border: solid 1px; cursor: pointer}
</style>
<body>
<button id="but">create table</button>
<script>
window.onload = function () {
var str = '<table>';
for (var i = 0; i < 10; i++) {
str += '<tr>';
for (var j = 0; j < 10; j++) {
str += '<td><input type="checkbox" /> ' + i + j + '</td>';
}
str += '</tr>';
}
str += '</table><br>';
document.body.onclick = function (e) {
d = new Date();
e = e || event;
var target = e.target || e.srcElement;
if (target.id == 'but') {
document.body.innerHTML += str;
document.body.innerHTML += 'время: ' + (new Date() - d) + '; ';
} else if (target.tagName == 'TD') {
document.body.innerHTML += (target.children[0].checked + '; ' + (target.innerText || target.textContent) + '; время: ');
document.body.innerHTML += (new Date() - d) + '; ';
}
}
}
</script>
|
Цитата:
Однако, ту же операцию КПК выполнил за 1.5с, что уже существенно. Теперь есть над чем подумать, и из чего выбирать. |
| Часовой пояс GMT +3, время: 21:12. |