js给动态生成的元素绑定事件

Question

for (let i=0;i<10;i++){
       const html = `<webview src="http://www.github.com">i</webview>`;
       $('.container').append(html)
    }
    const webview = document.querySelectorAll('webview')
    webview[0].addEventListener('console-message', e => {
        console.log(e.message);
        if(e.message.indexOf('这次我回答了')!==-1){
            alert('这才是我要的数据')
        }
    });

需要在一个页面遍历一个或者多个webview标签，这个标签有个事件叫console-message,不定时会返回一些字符串，所以我要实时监听这个事件，假如事先我知道webview标签的数量这个就不是问题，但是这个标签可能是N个，那我就要建立N个addEventListener的监听事件，完全没有思路，请教大神给个思路，谢谢

Answer 1

事件委托 搜索关键字

Answer 2

<ul onclick="fun(event)">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script type="text/javascript">  
        function fun(e) {
            console.log(e)
        }
    
    </script>

https://www.cnblogs.com/liuga...

Answer 3

事件是冒泡的话，只需要把事件绑定在 它们的父元素 .container 上，通过 ev.target 来检查是哪个 webview 对象触发的即可

Answer 4

谢谢大家的解答,首先console-message事件不同于click,mouseover事件，它不能冒泡，它也不能手动触发，它只是个主动返回字符串的事件,在这我只是用了一种很不规范的解决办法,就是直接for循环遍历js方法

const webview = document.querySelectorAll('webview')

    for(let i=0;i<webview.length;i++){
        webview[i].addEventListener('console-message', e => {
            console.log(e.message);
            if(e.message.indexOf('这次我回答了')!==-1){
                alert('这才是我要的数据')
            }
        });
    }

虽然知道这样很不规范，但是目前没有更好的方法