Untitled

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        #my_ul li {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="my_div">
        <ul id="my_ul">
            <li><a href="#">List Item 1</a></li>
            <li><div><div><div>List Item 2</div></div></div></li>
            <li>List Item 3</li>
            <li>List Item 4</li>
            <li>List Item 5</li>
        </ul>
    </div>
    <script type="text/javascript">
        var MyDom = {};
        !function($) {
            $.MyUl = MyUl;

            function MyUl (elm) {
                this._elm = elm;
            }

            MyUl.prototype.delegate = function(targetType, eventType, eventHandler) {
                var node = this._elm;
                node.addEventListener(eventType, function(e) {
                    var target = e.target;
                    var nodeType = target.nodeName.toLowerCase();
                    if (nodeType !== targetType) {
                        target = findParentNode(target, targetType);
                    }
                    eventHandler.call(target, e);
                }, false);
            };

            function findParentNode (node, type) {
                var parent = node.parentNode;
                if (parent.nodeName.toLowerCase() === type) {
                    return parent;
                } else {
                    return findParentNode(parent, type);
                }
            }
        }(MyDom);

        var $ = $ || MyDom;

        var ul = document.getElementById("my_ul");
        var my_ul = new $.MyUl(ul);
        my_ul.delegate("li", "click", function(e) {
           e.preventDefault();
           console.log(this);
        });
    </script>
</body>
</html>