十二、JavaScript事件

一、事件的传播和阻止

• 事件的传播：点击后代标签时，会触发所有父级标签相同类型的事件

• 执行顺序：从当前标签向父级元素执行，也就是执行当前标签的事件，再逐一执行父级标签的事件

• 捕获顺序：当前标签触发事件，会寻找父级标签上相同的事件类型一起执行

  • 冒泡机制：IE浏览器，从子级开始，向父级获取具有相同的事件类型

  • 捕获机制：非IE浏览器，从父级开始，向子级获取具有相同的事件类型，执行时，顺序都是 从 当前标签 至 父级标签

阻止事件的传播

• 普通浏览器：

e.stopPropagation();

• 低版本IE浏览器：

e.cancelBubble = true;

• 谁写谁阻止，谁不触发父级，谁不写谁触发父级

// 大部分事件传播都是需要阻止的，只有特殊情况下才会允许事件的传播
// 使用if判断做兼容处理
if(e.stopPropagation){
  e.stopPropagation();
}else{
  e.cancelBubble = true;
}

二、事件委托

• 事件不是写给当前标签的，而是绑定给父级标签

• 通过父级标签触发事件，然后通过判断触发事件的对象，来判断需要执行的不同代码

• 绑定给父级标签对象的事件，触发时有可能是不同的标签对象，触发的事件

• 子级标签没有绑定事件，因为是父级标签的一部分，点击子级也算是点击父级，因为也会触发父级的事件

var oDiv = document.querySelector('div');

// 给父级标签对象绑定事件
oDiv.addEventListener('click' , function(e){
  // 1,兼容事件对象e
  e = e || window.event;

  // 2,e.target中 存储点击对象的信息
  console.dir(e.target);

  if(e.target.id === 'span1' ){
    console.log('我是点击span1触发的');
  }else if (e.target.id === 'span2'){
    console.log('我是点击span2触发的');
  }
})

三、Tab切换

1、Tab切换之循环遍历

<div class="cont">
  <ul>
    <li class="active">1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <ol>
    <li class="active">内容1</li>
    <li>内容2</li>
    <li>内容3</li>
  </ol>
</div>

<script>
  var oUlLis = document.querySelectorAll('ul>li');
  var oOlLis = document.querySelectorAll('ol>li');
  
  // 给 ul>li标签 添加点击事件
  oUlLis.forEach(function(item, key){
    item.addEventListener('click', function(){
      // ul>li和ol>li都清除active样式
      oUlLis.forEach(function(i, k){
        i.className = '';
        oOlLis[k].className = '';
      })
      // 给点击的标签添加样式
      item.className = 'active';
      oOlLis[key].className = 'active';
    })
  })
</script>

2、Tab切换之事件委托

• 原理：通过父级标签添加点击事件，以事件委托的方式给ul>li添加执行程序

• 缺点：

  • 没有通过循环遍历，给所有ul>li添加事件，没有获取到索引下标

  • 就必须要在 ul>li 标签中自定义属性和属性值，属性值就是标签对应的索引下标

<div class="cont">
  <ul>
    <li index="0" name="ulli" class="active">1</li>
    <li index="1" name="ulli">2</li>
    <li index="2" name="ulli">3</li>
  </ul>
  <ol>
    <li class="active">内容1</li>
    <li>内容2</li>
    <li>内容3</li>
  </ol>
</div>

<script>
    var oDiv = document.querySelector('.cont');
  var oUlLis = document.querySelectorAll('ul>li');
  var oOlLis = document.querySelectorAll('ol>li');
  
  oDiv.addEventListener('click', function(e){
    // 兼容事件对象
    e = e || window.event;
    
    // 通过name属性的不同属性值来区分li
    if(e.target.getAttribute('name') === 'ulli'){
      // 清除样式
      oUlLis.forEach(function (item, key) {
        a = key;
        item.className = '';
        oOlLis[key].className = '';
      })
      
      // 给当前点击的ul>li标签，设定class样式
      e.target.className = 'active';
      // ol>li与ul>li下标通用，设定class样式
      oOlLis[e.target.getAttribute('index')].className = 'active';
    }
  })
</script>

四、事件对象的属性

• e.target：触发事件的标签对象

• e.target.parentElement：直接父级标签对象

• e.target.parentNode：直接父级标签对象

• e.target.tagName：触发事件的标签对象名称，全大写英文字母

• 点击事件中，e事件对象中存储坐标信息，只能获取鼠标点击的位置坐标，不能设定

• 键盘事件中，e事件对象中存储的按键信息

• offsetX，offsetY

  • 触发事件的标签对象，左上角为坐标原点

  • 在鼠标拖拽时，鼠标坐标原点会改变

    • 在整个页面中拖拽div

    • 起始时坐标原点是 document 文档的左上角

    • 当鼠标经过div时，坐标原点是 div 的左上角

    • 获取的坐标数值不同，会造成 div 闪来闪去

• clientX，clientY

  • 视窗窗口，左上角为坐标原点

• pageX，pageY

  • HTML文档，左上角为坐标原点

1、div点击移动

var oDiv = document.querySelector('div');
// 给 document 整个文档添加点击事件
document.addEventListener('click' , function(e){
  e = e || window.event;

  // 通过标签占位,获取标签的宽度高度占位
  // offsetHeight   offsetWidth
  // 直接获取数据数值,没有px单位的
  var h = oDiv.offsetHeight;
  var w = oDiv.offsetWidth;
  console.log(h,w);

  // 因为有页面滚动的问题，使用:clientX和clientY
  // div中心与鼠标位置重合,需要再减去div宽度高度的一半
  var top = e.clientY - h/2;
  var left = e.clientX - w/2;

  // 设定为 div 的定位数据,并且拼接px单位
  oDiv.style.top = top + 'px';
  oDiv.style.left = left + 'px';
})

2、div拖拽移动

var oDiv = document.querySelector('div');
// 给div添加鼠标按下事件
oDiv.addEventListener('mousedown', function () {
  document.addEventListener('mousemove', myMove);
})

// 鼠标抬起移除鼠标移动事件
oDiv.addEventListener('mouseup', function () {
  document.removeEventListener('mousemove', myMove);
})

function myMove(e) {
  e = e || window.event;

  // 获取鼠标坐标位置
  // 使用offsetY，offsetX会造成div闪来闪去
  // 鼠标拖拽,不能使用offsetY，offsetX 
  // 在鼠标拖拽时,要使用clientX和clientY获取坐标
  var top = e.clientY;
  var left = e.clientX;
  
  // 获取div标签的相关数据
  var h = oDiv.offsetHeight;
  var w = oDiv.offsetWidth;

  // 如果需要div中心位置和鼠标位置重合
  // 需要减去占位的一半
  oDiv.style.top = top - h / 2 + 'px';
  oDiv.style.left = left - w / 2 + 'px';
}