nodebook/20190926/20190926.md

20190925

linkToHtml

• 事件的阶段

  • e.eventPhase 通过这个知道之间的阶段
    1. 事件捕获 => 从外向里
    2. 目标阶段 =>
    3. 冒泡阶段 => 从里向外

• 绑定事件 addEventListener('不带on的事件类型',函数,<控制事件阶段>)

  • <控制事件阶段> => false => 冒泡阶段
  • <控制事件阶段> => true => 事件捕获

// 前提 div.box1>div.box2>div.box3,且各个div绑定打印id的点击事件
my$('box3').addEventListener('click',fn,false);
// box3 -> box2 -> box1
my$('box3').addEventListener('click',fn,true);
// box1 -> box2 -> box3

• onmouseover|out 鼠标移入移出事件

• e.type 获取当前事件

  my$('btn').onclick = f1;
  my$('btn').onmouseover = f1;
  my$('btn').onmouseout = f1;
  
  function f1(e) {
    switch(e.type){
      case 'click':
        //点击TODO
        break;
      case 'mouseover':
        //鼠标移入TODO
        break;
      case 'mouseout':
        //鼠标移出TODO
        break;
    }
  }

• a标签 href属性为 javascript:; 阻止默认事件