目标元素存在子元素时，如何用原生JS实现事件委托 ？

Question

在一个ul下有多个li，li里面有一个a标签。用事件委托将li的click事件绑定在ul上，如何判断是否点了li这个元素？我点了li会触发，但是点蓝色的a标签却不会触发，如何实现点了a标签页触发这个事件？

<ul id = "p">
    <li><a>这是a的元素</a>li中的元素</li>
    <li>第二个</li>
</ul>
var p = document.getElementById("p");
    p.onclick = function (event) {
       if(event.target.nodeName == 'LI'){
            alert("li");
       }
    };

Answer 1

并不是不触发整个事件，而是触发了，只不过event.target不是a标签的父元素<li><a>这是a的元素</a>li中的元素</li>,而是a标签本身<a>这是a的元素</a>。自然，event.target.nodeName不等于LI了

     function getNode(node) {
        if (node.nodeName === 'LI') {
            return node;
        } else {
            return getNode(node.parentNode);
        }
    }

    

getNode(eventTarget)就永远返回目标节点最紧临的那个父辈或着祖先 LI元素了。

Answer 2

可以自己简单写一个实现事件委托的方法，通过判断触发对象与预设对象是否相符即可，我觉得应该满足你的需求啦(暂时未考虑多浏览器兼容性)。

    /**
     * 委托事件绑定方法
     * @params parent 委托父元素的css选择符 tag id class
     * @params eventsName 绑定的事件
     * @params child 绑定事件的元素css选择符 tag id class
     * @params callback 事件响应函数
     */
    function on (parent, eventsName, child, callback) {
        var parentNodes = document.querySelectorAll(parent);
        var len = parentNodes.length;
        var targetType = getType(child);
        if (len === 0) {
            return;
        }

        for (var i = 0; i < len; i++) {
            parentNodes[i].addEventListener(eventsName, addListener, false);
        }

        // 绑定事件方法
        function addListener(event) {
            if (getActName(targetType, event) === child.toLowerCase()) {
                callback(event);
            }
        }

        // 获取目标元素类型方法
        function getType(target) {
            var type;
            if (target.indexOf(".") !== -1) {
                type = "className";
            } else if (target.indexOf("#") !== -1) {
                type = "id";
            } else {
                type = "tagName";
            }
            return type;
        }

        // 获取目标元素完整名称方法
        function getActName(type, event) {
            var name,
                lower = event.target[type].toLowerCase();
            if (type === "className") {
                name = ".";
            } else if (type === "id") {
                name = "#";
            } else {
                name = "";
            }
            return name + lower;
        }
    }

Answer 3

a被点击会冒泡到ul的，只是没alert。

这个判断让只在触发元素是li元素才alert
if(event.target.nodeName == 'LI')

这样就能看到了。

<ul id = "p">
    <li><a>这是a的元素</a>li中的元素</li>
    <li>第二个</li>
</ul>
var p = document.getElementById("p");
    p.onclick = function (event) {
       alert("clicked");
       if(event.target.nodeName == 'LI'){
            alert("li");
       }
    };