解决方案►JavaScript

原生js中动态添加事件监听

开发中比较容易出现动态渲染元素，无法绑定事件监听，这种情况下需要以事件委托的方式为动态添加的元素添加事件监听

事件委托： 由一个元素监听他的子元素所发生的事件

具体代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//这段代码包含处理上传文件代码
//scrollContent父元素
//setBackGround子元素
子元素为动态生成，直接为子元素添加监听会无法获取该元素导致监听失败
scrollContent.addEventListener("change", function (e) {
    let setBackGround = document.querySelector("#setBackGround")
    if (e.target == setBackGround) {
        let file = setBackGround.files[0];
        let reader = new FileReader();
        reader.onload = function (e) {
            let data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...'
            setStorageBefore("bg", data);
            body.style.backgroundImage = `url('${data}')`;
        };
        // 以DataURL的形式读取文件:
        reader.readAsDataURL(file);
    }
})