Живой клик, аналог on в JavaScript
Привет всем, есть вопрос к опытным юзерам - нужна поддержка живых кликов для динамического контента, в jquery был "live", но он вроде как слишком много "ел" и на смену пришел "on". Мне нужен был аналог "on" на "голом" js и я сварганил такой код:
document.addEventListener("click", function(event) {
var el = event.target;
if (el.hasAttribute("data-show")) {
document.querySelector("[data-div="+ el.getAttribute('data-show') +"]").className += " show";
}
if (el.hasAttribute("data-close")) {
document.querySelector("[data-div="+ el.getAttribute('data-close') +"]").className="";
}
});
Собственно мне интересно такой код нормален с точки зрения производительности? Или есть более изящное и легкое решение? Заранее спасибо за ответ. |
Норм.
|
Делегировние без jquery
werty1001,:write: Вариант для современных браузеров
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
[data-div].show{
display: block;
}
[data-div] {
display: none;
}
div{
cursor: pointer;
display: inline-block;
}
</style>
<script>
document.addEventListener("click", function(event) {
var el = event.target,
show = el.dataset.show,
close = el.dataset.close;
el = show || close;
if (el) {
document.querySelector("[data-div='"+ el +"']").classList[show ? "add" : "remove"]("show");
}
});
</script>
</head>
<body>
<div data-show="Menu">Show</div>
<div data-close="Menu">Close</div>
<div data-div="Menu">Memu</div>
</body>
</html>
|
рони,
Спасибо за вариант, но нужна поддержка хотя бы 9-го ослика. Sweet, Ясно в общем я так понял мой вариант тоже вполне сносный. :yes: |
werty1001,
вполне, если нет статичного родителя ближе, чем document |
| Часовой пояс GMT +3, время: 11:43. |