• 在文档中添加点击事件。当用户在文档任何地方点击时，在 id=”demo” 的 元素上输出 “Hello World”：
  2. document.addEventListener("click", function(){
  3.     document.getElementById("demo").innerHTML = "Hello World";
  4. });

语法：

addEventListener(‘eventType’,function(){},boolean)

  • eventType 事件类型 click、mouseover、 …
  • function(){} 要执行的函数
  • boolean true 表示在捕获阶段触发，false 表示在冒泡阶段触发，默认是false

事件委托

  • 利用事件冒泡的原理，将原本绑定给予子元素的时间绑定给父元素触发对应的事件
  • 事件处理函数里面的this 事件绑定给谁，this就指向谁
  • 阻止事件冒泡和浏览器的默认行为

e.stopPropagation() 阻止事件向父级传递
e.preventDefault() 阻止浏览器默认行为
例：

  1. <ul>
  2.         <li>1</li>
  3.         <li>2</li>
  4.         <li>3</li>
  5.         <li>4</li>
  6.         <li>5</li>
  7.         <li>6</li>
  8.         <li>7</li>
  9.         <li>8</li>
  10.         <li>9</li>
  11.         <li>10</li>
  12.     </ul>
  13.     <a href="https://www.baidu.com">百度一下</a>
  14. </body>
  15. <script>
  16.     var ul = document.querySelector('ul')
  17.     var li = document.querySelectorAll('li')
  18.      ul.onclick = function (e) {
  19.         console.log(e.target)
  20.         if (e.target.nodeName == 'LI') {
  21.             var i = e.target.innerHTML
  22.             //  ul.removeChild(e.target)
  23.             e.target.innerHTML = "";
  24.         }
  26.     }
  28.     var newLi = document.createElement('li');
  29.     newLi.innerHTML = 11;
  30.     ul.appendChild(newLi);
  31.     var a = document.querySelector('a')
  32.     a.onclick = function (e) {
  33.         e.preventDefault();//阻止浏览器默认行为
  35.     }