事件(下)

event （事件源）

关于事件的组成 元素.on事件名 = 处理函数

• 处理函数function都是具备参数的，arguments就是每个函数参数数组
• 因为arguments[0] 是获取第一个参数，那么我在对应的处理函数里面写的一个形参，就是对应的arguments[0]，所以可以省略arguments[0]，改写为一个英文字母e（一般是用e，因为是形参，其它字符也可以）。
• 我们发现对应的arguments[0] 返回的对应对象是一个event类型的对象 所以我们可以猜出来他设计了一个名event的对象 而这个对象同时又是全局的对象 所以他归属于window 所以我们可以写成 window.event 或者 省略对应的window（event）

//e是形参 相当于第一个形参 常见的写法 这个形参名字叫 e 或者 event
window.onkeydown = function(e){
    console.log(e); //这个就是arguments[0] event类型对象
    //他设计一个event对象 他是一个全局的变量 window.event
    //ie为了兼容 我们会写出
    e = e || window.event //兼容写法
    console.log(e.altKey);
    console.log(e.key);
}

属性

坐标相关的属性

x(或者Y) 得到鼠标的x(或者Y)坐标（不包含滚动条卷去距离）

pageX(或者Y) 得到鼠标在页面上的x(或者Y)坐标 （包含浏览器卷去的距离，针对于有滚动条的时候）

clientX(或者Y) 得到鼠标在当前可视区域内的x(或者Y)坐标 （不包含浏览器卷去的距离，针对于有滚动条的时候）

offsetX(或者Y) 得到鼠标在偏移元素内容的x(或者Y)坐标 （当前添加事件的元素里面的坐标 不包含border，我的理解是鼠标离点击的当前div（或者其它标签）之间的距离）

layerX(或者Y) 默认是得到鼠标基于页面的x(或者Y)坐标 当你添加定位以后他是基于定位元素的坐标

screenX(或者Y) 得到鼠标在屏幕的上的x(或者Y)坐标,突破浏览器限制，是距离电脑整块屏幕的距离

按键的相关属性

altKey 是否长按alt键

ctrlKey 是否长按ctrl键

shiftKey 是否长按shift键

鼠标相关的内容（只有鼠标触发的事件有）

button 返回的值为number类型（0 表示左键 1表示中间 2表示右键）

click 左击事件
contextmenu 左击事件

事件触发的相关属性

type 事件类型 返回对应的事件名

target 目标元素 返回真实触发的事件元素

currentTarget 目标元素 返回当前添加事件的元素

bubbles 事件是否冒泡

键盘事件相关的内容（需要键盘来触发的事件）

key 属性 （当前按下的键）

keycode 属性 （获取当前按下键大写的ascii码，不区分大小写）

charCode 属性（字符键 press事件 ascii码，区分大小写）

事件流

概述：事件流指代的是事件的执行流程，多个盒子嵌套相同事件，这个时候你触发一个盒子的事件，并不会只执行一个盒子的事件的处理函数，而是全部执行，子元素执行，父元素也会执行（子元素的子元素却不会执行），只坑爹。

事件流的俩种模式

冒泡模式（浏览器采用的）

冒泡模式指代的是事件从里到外逐个执行

阻止事件冒泡

e.stopPropagation() 函数 （*）（stop）

e.cancelBubble = true 属性设置（现在虽然都可以用 但是未来可能会废弃）

兼容写法

e.stopPropagation ? e.stopPropagation():e.cancelBubble = true//后面二选一

捕获模式

捕获模式指代的是事件从外到里逐个执行

默认行为

就是一个元素会自带的行为称为默认行为 a标签的默认行为会跳转 form标签里面submit按钮默认会提交（刷新页面）鼠标右键会出现一个菜单栏 等等一系列的问题

有些时候我们不需要这些行为的产生 那么我们就需要阻止默认行为

阻止默认行为的js实现

e.preventDefault() 函数 （*） （prevent）

e.returnValue = false ie的兼容

return false 直接结束对应的操作

e.preventDefault?e.preventDefault():e.returnValue = false //兼容

拖拽

思路

• 给拖拽的元素添加mousedown的事件 记录当前点击的位置（一般给要实现拖拽的对象用，不然整个浏览器窗口任意处点击长按都会让拖拽对象移动）
• 给对应的容器添加mousemove事件 记录每次移动的位置（一般给document添加）
• 给对应的容器添加mouseup 事件 清除上述mousemove事件（一般给document添加）

代码实现

//获取div
var box = document.getElementById('box')
//给div添加mousedown事件
box.onmousedown = function(e){
    e = e || event
    //记录的是鼠标在div里面的位置，离div两边的距离
    //在mousedown里面记录按下的位置，等下用（鼠标在整个页面中的位置）减去这个（鼠标离div两边的距离）就是div的正确位置
    var x = e.offsetX
    var y = e.offsetY
    // var x = e.pageX-box.offsetLeft
    // var y = e.pageY-box.offsetTop
    //给document添加mousemove事件
    document.onmousemove = function(e){
        e = e || event
        //记录每次的位置  在document里面的位置
        var currentX = e.pageX//鼠标在页面的x坐标 （包含滚动条卷曲距离）
        var currentY = e.pageY//鼠标在页面的y坐标 （包含滚动条卷曲距离）
        //并且设置div的位置
        box.style.left = currentX - x + "px"//得到真正div离窗口的距离
        box.style.top = currentY - y + "px"
    }
    //给document添加mouseup事件，不然盒子会一直跟着鼠标走，松开也没用
    document.onmouseup = function(){
        //清除对应的mousemove事件
        document.onmousemove = null
    }
}

样式获取

style属性 只能获取标签内容style属性里面存在的一些样式

如果你需要获取对应的全局所有地方设置样式 我们就需要采用一些方法

getComputedStyle 方法属于window的方法

window.getComputedStyle(元素对象,null) //返回给你的是一个样式对象

ie兼容

element.currentStyle //返回给你一个样式对象

兼容封装

//方法的封装
function getStyle(element,attr){
    var style =  window.getComputedStyle?window.getComputedStyle(element):element.currentStyle
    return style[attr]
}
//调用
console.log(getStyle(box,'height'));