Question

I would like to know what is more appropriate to do if I really need a good performance for my app. I’m programming cross-platform apps via PhoneGap and the way I code is very crucial.

Which is more appropriate:

document.getElementbyID('id').addEventListener()

or

var id = document.getElementbyID('id');
id.addEventListener();

and how can I use the keyword “delete” to improve the performance of my app?

Answer 1

The difference between the two will be marginal. To improve performance you should minimize the number of event handlers you add to the dom and remove those you don’t require again. Delete doesn’t make sense in the context you posted. It should be used to free up items in (associative) arrays or to remove objects you created. You do neither of those in your example.

For lists in which each item is clickable you should just attach one event handler to the list container and not to individual elements. You can then use the target property of the event object passed into the handler to find the actual listitem that was tapped.

---

edit: an example on how to use one event handler for multiple list items

The li.id is used to identify the actual item that was clicked. If the ‘li’ have children you might have to walk up the target DOM tree until you find the correct item.

<ul id="list">
    <li id="item_1">First Item</li>
    <li id="item_2">Second Item</li>
    <li id="item_3">Third Item</li>
    <li id="item_4">Fourth Item</li>
    <li id="item_5">Fifth Item</li>
    <li id="item_6">Sixth Item</li>
    <li id="item_7">Seventh Item</li>
</ul>

<script>
    window.onload(function() {
        document.getElementById("list").addEventListener("click", 
            function(event) { alert("" + event.target.id + " was clicked"); });
    });
</script>