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

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

Answer 3

首先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('这才是我要的数据')            }        });    }虽然知道这样很不规范，但是目前没有更好的方法