data-click на чистом js
Всем привет!
Такой вопрос: Вещаю на элемент атрибут data-click="myFunction" Как средствами js распарсить все это дело и навещать обработчик? Не ударить ли это на производительнось? Если допустим у меня интерфейс без перезагрузки и эти элементы динамически то создаются то удаляются (например модальные окна) не начнет ли компьютер дико орать и грется (утечка памяти и все такое) после продолжительной работы с интерфейсом? |
тоесть стандартный onclick не устраивает?
конечно же свой велосипед ударит на производительность |
Стандартный нет, например через стандартный у меня будет выглядит примерно так onclick="new AppMenu().create()"
хочу чтобы было так data-click="app_menu.create" да и еще использую кастомный я смогу подхватывать а не создавать снова и снова через new |
diman91, а что мешает сделать так
<!DOCTYPE HTML>
<html>
<head> </head>
<body>
<div id="click"> click </div>
<script>
var elem = document.getElementById("click"),
app = new App();
elem.onclick = function () {
this.innerHTML = app.getRandom();
}
function App() {
this.getRandom = function () {
return Math.random().toString().slice(2);
}
}
</script>
</body>
</html>
|
Сделать так конечно можно, только вот у меня в интерфейсе все управляющие элементы подгружаются динамически, и каждый раз навешивать обработчик нехочится, да еще и id присваивать.
|
diman91, а зачем каждый раз навешивать ? Почитайте
http://learn.javascript.ru/bubbling-and-capturing |
cyber,Вы не совсем поняли, приведу пример, открываем грид в строке видим управляющие элементы например жмакаем "Редактировать" открывается модальное окно со сложной формой, в ней куча функционала, и допустим 25 элементов которые запускают разные функции, причем функции могут быть не просто разные но и от разных модулей.
|
Приведу пример модуля
var AppMenu = (function () {
var _self;
var _protectFn;
function AppMenu() {
_self = this;
}
AppMenu.prototype = {
changeStatus:function(status){
var elements = _protectFn.getCheckedElements();
var data = {"req":"changeStatus","status":status,"elements":elements};
if (elements.length>0) {
if (confirm("Вы уверены что хотите изменить статус у "+elements.length+" объектов?")) {
new ajaxSender({
url:'/office/appMenu/status',
data:data,
success: function(answer){
_protectFn.afterChangeStatus(answer);
}
}).send();
}
}
}
//и так далее публичные методы
}
_protectFn = {
getCheckedElements:function(){
var els = [];
$(".checks").each(function(){
if ($(this).is(':checked')) {
els[els.length] = $(this).attr("data-el");
}
});
return els;
},
afterDelete:function(answer){
//
}
//и так далее защишеные методы
}
return AppMenu;
})();
Бывает так что надо чтобы элемент создавал новый экземпляр, иногда нужно запустить метод в уже созданном экземпляре. Поэтому вещать на элементы onclick="new blablabla" не всегда подходит. А награмождать лишний код тоже неохото. |
diman91,
<!DOCTYPE HTML>
<html>
<head> </head>
<body>
<div id="container">
<div data-method-click="positive" > click and get positive number</div>
<div data-method-click="negative"> click and get positive negative</div>
</div>
<script>
var cont = document.getElementById("container"),
app = new App,
handlers = {
positive: app.getPositive,
negative: app.getNegative
};
cont.addEventListener("click", onContainerClick);
function onContainerClick (e) {
var val = e.target.getAttribute("data-method-click");
if(val && handlers[val]){
e.target.innerHTML = handlers[val]();
}
}
function App() {
this.getPositive = function () {
return Math.random().toString().slice(2);
};
this.getNegative = function () {
return "-" + Math.random().toString().slice(2);
};
}
</script>
</body>
</html>
|
cyber,Возможно Вы гдето близко от той реализации которую я хочу:)
Что если повесить обработчик на боди
document.body.addEventListener("click", onBodyClick);
function onBodyClick(e){
var data_click = e.target.getAttribute("data-click");
if(data_click){
//
}
}
|
| Часовой пояс GMT +3, время: 06:27. |