事件的知识点

事件的传播行为（事件流）

冒泡模式（默认模式）

冒泡模式就是从里到外触发

event.bubbles（只读属性）

阻止事件冒泡

• stopPropagation （方法）

e.stopPropagation() //阻止事件冒泡 常用的方法 兼容问题 

• 兼容ie低版本的写法 cancelBubble （属性）

// 兼容写法  兼容ie8及以下
e.cancelBubble = true

• 兼容写法

//兼容写法
e.stopPropagation?e.stopPropagation():e.cancelBubble = true

捕获模式

捕获模式就从外到里触发

默认行为

某些操作或者html元素拥有的一些默认的行为（a 标签的默认行为 进行页面跳转 form里面submit行为 图片的拖动行为...）

在某些时候外面的默认行为会导致对应的代码执行出现问题，这个时候就需要禁止默认行为。

阻止默认行为

• preventDefault (方法)

//阻止默认行为
e.preventDefault();//大部分浏览器兼容

• 兼容ie低版本的写法 returnValue 属性

 //兼容ie
e.returnValue = false //兼容ie

• 兼容写法

e.preventDefault?e.preventDefault():e.returnValue = false

• return false

return false

事件监听器（兼容问题）

• addEventListener 添加事件监听器（可以添加多个处理函数）

• removeEventListener 移除事件监听器 （只能移除addEventListener添加的 移除根据对应的处理函数是否为一个）

//我需要俩个处理函数 事件监听器 可以有多个处理函数
//监听对应的事件执行 来执行对应的处理函数 （不会覆盖之前的事件的处理函数）
//传入事件名 传入处理函数 （如果是直接传入function 就不会被移除）
btn.addEventListener('click',function(){
    console.log('点击了按钮');
})
btn.addEventListener('click',function fn(){
    console.log('点击了按钮1');
})
btn.addEventListener('click',handler1)
//移除事件监听器 必须处理函数是同一个 不然不能被移除 只能移除addEventListener添加的
btn.removeEventListener('click',function fn(){
    console.log('点击了按钮1');
})//不能移除
btn.removeEventListener('click',handler1) //能
btn.removeEventListener('click',handler)//不能移除

拖拽

基础三大事件

1. 鼠标按下事件 （mousedown）

2. 鼠标移动事件 （mousemove）

3. 鼠标弹起事件 （mouseup）

在页面进行拖拽

步骤

1. 给对应的盒子添加鼠标按下事件

2. 在鼠标按下事件内容获取鼠标在对应盒子里面的位置 （offsetX）

3. 在鼠标按下事件中给document添加移动事件

4. 在移动的时候获取鼠标在页面上的位置（pageX）

5. 计算对应的定位的位置 （鼠标在页面上的位置 - 鼠标在对应盒子内的位置）

6. 设置对应的盒子的位置

7. 在鼠标按下事件中给document添加弹起事件

8. 在弹起事件内移除对应的移动事件

<div></div>
<script>
    //获取div
    var div = document.querySelector('div')
    //在div里面按下
    div.onmousedown = function(e){
        e = e || window.event
        //获取按下时 鼠标在对应盒子里面位置
        var currentX = e.offsetX
        var currentY= e.offsetY
        //在文档里面移动
        document.onmousemove = function(e){
            //获取每次移动在页面上的位置 - 对应的按下时鼠标在盒子里面的位置 = 对应的定位的位置
            var targetX = e.pageX - currentX
            var targetY = e.pageY- currentY
            //设置给对应的盒子
            div.style.left =  targetX + 'px'
            div.style.top =  targetY + 'px'
        }
        //在文档里面弹起
        document.onmouseup = function(){
            document.onmousemove = null
        }
    }
</script>

在区间进行拖拽

offset家族（属性 元素对象）

• offsetParent 偏移父元素 （找离最近的定位父元素 如果没有定位就找body）

• offsetHeight 偏移元素的高度

• offsetWidth 偏移元素的宽度

• offsetLeft 离父元素偏移的左边的距离 （number类型）

• offsetTop 离父元素偏移的上边距离 （number类型）

样式获取

• style属性 只能获取内嵌样式

  var div = document.getElementsByTagName('div')[0]
  //style的弊端 他只能获取对应的内嵌的样式 也就是只能获取style属性里面写的内容
  console.log(div.style.width); //空字符串
  console.log(div.style.height); //300px

• getComputedStyle 方法可以获取所有的样式

  //对应的兼容获取所有样式的方法
  var style = getComputedStyle(div, '')
  console.log(style); //getComputedStyle获取样式对象里面都有默认值(所有的样式)
  console.log(style.backgroundColor);
  console.log(style.color);
  console.log(style.width);
  console.log(style.height);

• currentStyle ie的低版本兼容

  console.log(div.currentStyle); //ie低版本兼容 废弃

• 兼容封装

  // getComputedStyle 兼容问题 
  // console.log(div.currentStyle); //ie低版本兼容 废弃
  //兼容写法 传入一个元素 返回一个样式对象
  function getStyle(element) {
      var style = window.getComputedStyle ? getComputedStyle(element, '') : element.currentStyle
      return style
  }