事件对象的属性和方法

<div>123</div>
<script>
    var div = document.querySelector('div');
    div.addEventListener('click', function(e) {
        // e.target 和 this指向的都是div
        console.log(e.target);
        console.log(this);
 
    });
</script>

　　事件冒泡下的e.target和this

<ul>
      <li>abc</li>
      <li>abc</li>
      <li>abc</li>
  </ul>
  <script>
      var ul = document.querySelector('ul');
      ul.addEventListener('click', function(e) {
            // 我们给ul 绑定了事件  那么this 就指向ul  
            console.log(this); // ul
 
            // e.target 触发了事件的对象 我们点击的是li e.target 指向的就是li
            console.log(e.target); // li
      });
  </script>

　　阻止默认行为

<a href="http://www.baidu.com">百度</a>
   <script>
     //1不让链接跳转
        td.innerHTML = '<a href="javascript:;">删除 </a>';
       // 2. 阻止默认行为 让链接不跳转 
       var a = document.querySelector('a');
       a.addEventListener('click', function(e) {
            e.preventDefault(); //  dom 标准写法
       });
       // 3. 传统的注册方式
       a.onclick = function(e) {
           // 普通浏览器 e.preventDefault();  方法
           e.preventDefault();
           // 低版本浏览器 ie678  returnValue  属性
           e.returnValue = false;
           // 我们可以利用return false 也能阻止默认行为 没有兼容性问题
           return false;
       }
   </script>

事件委托的原理

给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素。

事件委托的作用

我们只操作了一次 DOM ，提高了程序的性能。
动态新创建的子元素，也拥有事件。

<ul>
     <li>知否知否，点我应有弹框在手！</li>
     <li>知否知否，点我应有弹框在手！</li>
     <li>知否知否，点我应有弹框在手！</li>
     <li>知否知否，点我应有弹框在手！</li>
     <li>知否知否，点我应有弹框在手！</li>
 </ul>
 <script>
     // 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
     var ul = document.querySelector('ul');
     ul.addEventListener('click', function(e) {
         // e.target 这个可以得到我们点击的对象
         e.target.style.backgroundColor = 'pink';
     })
 </script>

<body>
    我是一段不愿意分享的文字
    <script>
        // 1. contextmenu 我们可以禁用右键菜单
        document.addEventListener('contextmenu', function(e) {
                e.preventDefault();
        })
        // 2. 禁止选中文字 selectstart
        document.addEventListener('selectstart', function(e) {
            e.preventDefault();
        })
    </script>
</body>

<script>
      // 鼠标事件对象 MouseEvent
      document.addEventListener('click', function(e) {
          // 1. client 鼠标在浏览器可视区的x和y坐标
          console.log(e.clientX);
          console.log(e.clientY);
          console.log('---------------------');
 
          // 2. page 鼠标在页面文档的x和y坐标
          console.log(e.pageX);
          console.log(e.pageY);
          console.log('---------------------');
 
          // 3. screen 鼠标在电脑屏幕的x和y坐标
          console.log(e.screenX);
          console.log(e.screenY);
 
      })
  </script>