事件对象

当事件发生时，接收器收到事件消息，发送给事件处理器，事件处理器负责事件消息的处理，生成event对象，驱动绑定监听器的节点执行。
我的想法所有事件通知的信息都在事件对象里。

DOM事件对象通用属性

type属性

  1. //使用target绑定多个事件
  2. let oDiv = document.getElementsByTagName('div')[0];
  3. function handler(e) {
  4.   switch (e.type) {
  5.     case 'click': e.target.style.background = 'black';
  6.       break;
  7.     case 'mouseover': e.target.style.background = '#ddd';
  8.       break;
  9.     case 'mouseout': e.target.style.background = '#333';
  10.       break;
  11.   }
  12. }
  13. oDiv.onclick = handler;
  14. oDiv.onmouseover = handler;
  15. oDiv.onmouseout = handler;

target属性

  1. //发现target属性是指向点击的元素
  2. let oDiv1 = document.getElementsByTagName('div')[0];
  3. let oDiv2 = document.getElementsByClassName('box2')[0];
  4. oDiv1.addEventListener('click', (e) => console.log(e.target), false);

image.png

currentTarget属性

  1. let oDiv1 = document.getElementsByTagName('div')[0];
  2. let oDiv2 = document.getElementsByClassName('box2')[0];        
  3. oDiv1.addEventListener('click', (e) => console.log(e.currentTarget), false);

image.png

preventDefault()

  1. //取消元素的默认行为事件
  2. link.onclick = function handler(e){
  3.   e.preventDefault();
  4. }

stopPropagation()

  1. let oDiv1 = document.getElementsByTagName('div')[0];
  2. let oDiv2 = document.getElementsByClassName('box2')[0];
  3. oDiv2.addEventListener('click', (e) => {
  4.   console.log(e.currentTarget);
  5.   e.stopPropagation();    //阻止事件的冒泡或捕获
  6. }, false);
  7. oDiv1.addEventListener('click', (e) => console.log(e.currentTarget), false);

IE事件对象

  • IE有着不同的访问事件对象的方式。

  • event对象不是在事件处理程序中，而是在window对象中。而且有其独有的属性和方法。

    1. var oDiv1 = document.getElementsByTagName('div')[0];
    2. oDiv1.attachEvent('onclick', text);
    3. function text (){
    4. var e = window.event;
    5. console.log(e.type, e.srcElement.id);
    6. }

    srcElement属性

  • 和target属性一样。

    cancelBubble属性

  • 布尔值。true取消冒跑。

    returnValue属性

  • 布尔值。false取消默认事件。

默认事件

案例阻止其默认事件，但是显示为块级元素时，它的其他部分可以跳转。

  1. <body>
  2.       <a href="https://www.baidu.com" target="_blank">
  3.         <div>百度</div>    
  4.       </a>
  6.       <script src="/js/utility.js"></script>
  7.       <script>
  8.         var oDiv = document.getElementsByTagName('div')[0];
  9.         EventUtil.addHandler(oDiv, 'click', function(e){
  10.           EventUtil.cancelDefault();
  11.         });
  12.       </script>
  13. </body>