//a.js
    let func1=function(){
        console.log(p);
    }
    export default export func1;

//index.js
    import func1 from "./a.js";
    let p=1000;
    func1(); 

shows error p is undefined. But if a.js is like this

//a.js
    let func1=function(){
        document.querySelector(".img1").addEventListener("click",()=>{console.log(12)})
    }
    export default export func1;

it gets access to document variable and click listener logs 12 on a click. Can you explain why?