0
\$\begingroup\$

I am wondering if the following is a good concideration. There might be several links on a page with a data-rel attribute that could be static or dynamically added with javascript. Instead of adding an eventlistener to each of those I am thinking about adding an eventlistener to the document. I don't want to use jQuery.

Is the following good, or is there a better do add events to dynamically added ellements?

var api = {
    function addEvent (evnt, el, func) {
        if (el.addEventListener) { // W3C DOM
            el.addEventListener(evnt,func,false);
        } else if (el.attachEvent) { // IE DOM
            el.attachEvent('on' + evnt, func);
        } else { // No much to do
            el[evnt] = func;
        }
    }
  , removeEvent : function removeEvent (evnt, el, func) {
        if (el.removeEventListener) { // W3C DOM
            el.removeEventListener(evnt,func,false);
        } else if (el.detachEvent) { // IE DOM
            el.detachEvent('on' + evnt, func);
        } else { // No much to do
            el.splice(evnt, 1);
        }
    }
  , checkWhatIsClicked: function checkIfDialog (e) {
        var el = e.srcElement || e.target
          , dataCallback = el.getAttribute('data-callback')
          , dataRel = el.getAttribute('data-rel');

        if (dataRel !== null) {
            switch (dataRel) {
                case 'alert':
                    e.preventDefault();

                    dialogBox.alert();
                    break;
                case 'dialogBox':
                    e.preventDefault();

                    dialogBox.dialog();
                    break;
                case 'prompt':
                    e.preventDefault();

                    dialogBox.prompt();
                    break;
            }
        } else if (dataCallback !== null && el.className.indexOf('dialog-answer') > -1) {
            if (typeof window[dataCallback] === 'function') {
                var result = el.getAttribute('data-result');

                window[dataCallback](result, el);
            }

        }
    }
};

api.addEvent('click', window.document, api.checkWhatIsClicked);
\$\endgroup\$

migrated from stackoverflow.com Apr 17 '15 at 16:28

This question came from our site for professional and enthusiast programmers.

  • 1
    \$\begingroup\$ So what is your question? \$\endgroup\$ – Sai Apr 3 '15 at 18:59
  • \$\begingroup\$ if it is a good approach, or is there a better way to do this? \$\endgroup\$ – poashoas Apr 3 '15 at 19:02
  • \$\begingroup\$ addEvent(), click(), removeEvent()? Now that doesn't make sense. Why not just invoke the listener directly? \$\endgroup\$ – Bergi Apr 3 '15 at 19:02
  • \$\begingroup\$ Because I don't know how to attach it automaticaly when some element is dynamically added. \$\endgroup\$ – poashoas Apr 3 '15 at 19:04
1
\$\begingroup\$

What's wrong with jQuery? It doesn't get much easier than:

$(document).delegate("<identifier>", "<event>", function (e) { do stuff; });

However, the following link might help you with base javascript event listening and delegation. https://mattandre.ws/2014/08/small-beautiful-dom-delegation/

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.