JavaScript中addEventListener点击事件失效问题排查与解决

我尝试用addEventListener给列表项绑定click事件，但测试时发现完全没反应。奇怪的是，我在jsfiddle上的示例能正常运行，但本地代码就是不行。

我的代码如下：

<body>
    <div class="emoji-row ng-scope" ng-repeat="...">
        <div class="emoji-wrapper">
            <div class="emoji-reactions">
                <div class="emoji-reactions-main">
                    :)
                </div>
                <div class="emoji-reactions-panel">
                    <ul>
                        <li> :) </li>
                        <li> :( </li>
                    </ul>
                </div>
            </div>
        </div>
        <span class="helloemoji"></span>
    </div>
    <script>
        const tag = document.createElement("span");
        tag.className = 'helloemoji';
        document.getElementsByClassName("emoji-row")[0].appendChild(tag);

        const emojis = document.getElementsByClassName("emoji-reactions-panel")[0].getElementsByTagName("li");
        console.log(emojis.length); /* 控制台输出5 */

        Array.from(emojis).forEach(function (item) {
            console.log("item", item);
            item.addEventListener('click', emojiClickfunc);
        });

        function emojiClickfunc() {
            console.log("clicked...")
            alert('clicked...');
        }
    </script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>

编辑：
我试过给window绑定click事件，能触发，但这不是我要的——我需要获取被点击的具体列表项，而不是全局监听。

Array.from(emojis).forEach(function (item) {
    console.log("item", item);
    window.addEventListener('click', emojiClickfunc);
});

原因分析与解决方案 #

核心问题：AngularJS ng-repeat 的异步渲染 #

你的代码里用了AngularJS的ng-repeat指令，它是异步渲染DOM的——当你的原生JS脚本执行时，ng-repeat可能还没完成数据绑定和DOM生成，或者后续数据更新导致列表项被重新渲染，之前绑定的事件就失效了。而jsfiddle示例可能没有用ng-repeat，或者数据是同步加载的，所以DOM渲染完成后脚本刚好能绑定到正确的元素上。

解决办法1：用AngularJS原生的ng-click（推荐） #

既然是AngularJS项目，尽量用框架自带的事件绑定方式，避免原生JS和框架的DOM管理冲突：

1. 在<li>上添加ng-click指令：

<li ng-click="handleEmojiClick($event)"> :) </li>
<li ng-click="handleEmojiClick($event)"> :( </li>

2. 在对应的AngularJS控制器中定义处理函数：

angular.module('yourApp').controller('YourController', function($scope) {
    $scope.handleEmojiClick = function(event) {
        console.log('点击的元素：', event.target);
        alert('clicked...');
    };
});

解决办法2：用事件委托（原生JS方案） #

如果一定要用原生JS，通过事件委托把事件绑定到父元素上，不管子元素怎么动态生成，点击事件都会冒泡到父元素，再判断目标是否是列表项：

// 绑定到父元素，监听冒泡事件
document.querySelector('.emoji-reactions-panel').addEventListener('click', function(e) {
    // 确认点击的是li元素
    if (e.target.tagName.toLowerCase() === 'li') {
        emojiClickfunc(e.target);
    }
});

function emojiClickfunc(item) {
    console.log('点击的列表项：', item);
    alert('clicked...');
}

解决办法3：等待ng-repeat渲染完成后再绑定事件 #

利用AngularJS的生命周期钩子，确保在ng-repeat渲染完成后执行事件绑定：

angular.module('yourApp').controller('YourController', function($scope, $timeout) {
    // 用$timeout等待DOM渲染完成
    $timeout(function() {
        const emojis = document.getElementsByClassName("emoji-reactions-panel")[0].getElementsByTagName("li");
        Array.from(emojis).forEach(function(item) {
            item.addEventListener('click', emojiClickfunc);
        });
    });

    function emojiClickfunc() {
        console.log("clicked...");
        alert('clicked...');
    }
});

内容的提问来源于stack exchange，提问作者Marty