title: why does checkbox stops working when ever i use addEventListener
body: <p>when ever i use <code>addEventListener</code> my check box stops working i tried removing every code but when i add this code my checkbox stops working
  this is my event listener</p>
  <pre><code>document.addEventListener('click', function(e) {
    e.preventDefault();
  });
  </code></pre>
  <p>my document has <code>innerhtml</code> before it and i wanted to get the selected items id
  this is the <code>innerhtml</code></p>
  <pre><code>document.innerHTML += &quot;&lt;div class='product-container'&gt;&lt;div class='course'&gt;&lt;div class='course-preview'&gt;&lt;img class='product-image' src=&quot;+productimageUrl+&quot;&gt;&lt;/div&gt;&lt;div class='course-info'&gt;&lt;div class='progress-container'&gt;&lt;h6&gt;OnSale: &quot;+ productsale +&quot;&lt;/h6&gt;&lt;h6&gt;Featured: &quot;+productfeatured +&quot;&lt;/h6&gt;&lt;h6&gt;soldOut: &quot;+ productsoldout +&quot;&lt;/h6&gt;&lt;/div&gt;&lt;h2&gt;&quot;+ productname +&quot; &quot;+ productprice +&quot; &lt;/h2&gt;&lt;h4&gt;&quot;+productcategory+&quot;, &quot;+productsubcategory+&quot;&lt;/h6&gt;&lt;h4&gt;&quot;+ productamount +&quot;&lt;/h4&gt;&lt;h6&gt;PRODUCT ID:&lt;/h6&gt;&lt;h5&gt;&quot;+ productid +&quot;&lt;/h5&gt;&lt;button id='editbutton' class='btn'&gt;Edit Product&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&quot;    
  </code></pre>
  <p>whenever i use this code this code it stops working in case you want document this is my document</p>
  <pre><code>const document = document.getElementById(&quot;main-page&quot;);
  </code></pre>