事件

概述：

事件是一个流程，就是一个监听（预备） 一个触发（当前内容执行了 （进行处理）

用户在页面上操作（监听这个操作）, 然后我们要调用函数来处理（进行处理）.

监听过程 ---- 触发过程 ---- 处理过程 这个流程就是完整的一个事件

事件的模式

内联模式

<div  onclick='方法名(this)'></div>

 

脚本模式

document.queryseletor('div').onclick = function(){
    //操作
} //也会被解析为内联

内联里面调用方法的this会指向window（解决方法：传入this）

脚本模式的this会指向当前的调用者

 

事件的组成

触发者.on+对应的事件名 = 处理的函数 对应的事件组成

触发者 一般来说是对应的元素对象

事件名 就是上述分类的事件名

处理函数 由自己定义的函数（handler）（这个函数是事件驱动执行）

 

事件的分类

鼠标事件（鼠标触发的mouse开头都是鼠标事件）

click 单击事件 dblclick 双击事件 mousemove 鼠标移动事件(不能用到事件委托) mouseover 鼠标移进 （自己及自己里面的都能触发） mouseout 鼠标移出 mouseenter 鼠标移进 （只会是自己可以触发）(不能用到事件委托) mouseleave 鼠标移出(不能用到事件委托) mousedown 鼠标按下 mouseup 鼠标弹起

键盘事件 （键盘触发key开头都是键盘事件）

keyup 弹起 keydown 按下 keypress 字符键按下（功能键不算）

//除非是输入框 不然是不能调用键盘事件 都是window的
window.onkeydown = function(){
console.log('键盘按下');
}
window.onkeyup = function(){
console.log('键盘弹起');
}
window.onkeypress = function(){
console.log('字符键按下');
}

HTML事件 （系统事件 被动触发的）

load 加载 close 关闭 change 输入框的value值发送表示 select 只有输入框才能触发 （选择里面的内容） focus 获取焦点 blur 失去焦点 reset 重置 submit 提交 scorll 滚动条滚动

event（事件源）

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

• 处理函数 是一个function 具备一个arguments（参数数组）

• 因为arguments[0] 是获取第一个参数 那么在对应的处理函数里面写一个参数，这个参数就是对应的arguments[0]

• 我们发现对应的arguments[0] 返回的对应对象是一个event类型的对象 所以我们可以猜出来他设计了一个名event的对象 而这个对象同时又是全局的对象 所以他归属于window 所以我们可以写成 window.event 或者 省略对应的window（event）

event对象是在触发事件时, 浏览器会通过函数把事件对象作为参数传递过来, 在事件触发执行函数时一般会得到一个隐藏的参数, 该参数也是放在arguments数组中

document.querySelector('.btn').onclick=function(){
    console.log(arguments)
    console.log(arguments[0]) 
    //可以取出里面的属性
}

属性

坐标的属性

x: 得到鼠标的x坐标（不包含不可视区域）

y: 得到鼠标的y坐标 （不包含不可视区域）

layerX：默认是得到鼠标基于页面的x坐标 添加定位以后是基于定位元素的坐标

layerY：默认是得到鼠标基于页面的y坐标 添加定位以后是基于定位元素的坐标

 

clientX: 浏览器可视区域的x坐标 （不包含不可视区域）

clientY: 浏览器可视区域的y坐标（不包含不可视区域）

pageX: 浏览器内容区域的x坐标 (包含可视区域)

pageY: 浏览器内容区域的y坐标 (包含可视区域)

screenX: 鼠标显示器屏幕的x坐标

screenY: 鼠标显示器屏幕的y坐标

offsetX: 鼠标点击的元素位置距离元素左边界的x坐标

（当前添加事件的元素里面的坐标 不包含border）

offsetY: 鼠标点击的元素位置距离元素上边界的y坐标

（当前添加事件的元素里面的坐标 不包含border）

（offsetLeft 得到基于父元素的左偏移量）

（offsetTop 得到基于父元素的上偏移量）

（offsetParent 得到基于父元素的开启定位了的偏移量 会向上一直找，得到基于定位的父元素的偏移量，如果没有开启了定位的就是基于body）

（offsetWidth 得到偏移元素的宽度 包含border和padding）

（offsetHeight 得到偏移元素的高度 包含border和padding）

按键相关的属性（布尔类型）

altKey 是否按下alt键

ctrlKey 是否按下ctrl键

shiftKey 是否按下shift键

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

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

并不是button按钮才有的属性！

事件触发的相关属性

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

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

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

bubbles 事件是否冒泡

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

所有按键(包括功能键control, alt,shift, tab, 方向键等, 不包括亮度,音量..的按键在发生 keydown和keyup 事件时，event对象的 keyCode属性中会包含一个代码，与键盘上一个特定的键对应。对数字字母字符集，keyCode属性的值与 ASCII 码中对应.

key属性 （当前按下的键 大写）有兼容

keyCode属性 （获取当前按下键大写的ASCII码）左 37 上 38 右 39 下 40

charCode属性 （字符键 press事件 输出内容同keyCode）

事件流

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

事件流的两种模式：

冒泡模式（浏览器采用）

事件从里到外执行

阻止事件冒泡

stopPropagation() //阻止事件冒泡 stopProgation()函数

e.cancelBubble = true 属性设置 //ie的兼容 取消事件冒泡

兼容写法：

e.stopPropagation？e.stopPropagation():e.cancelBubble=true

捕获模式

事件从外到里执行

默认行为

一个元素会自带进行的行为称为默认行为

例如 form标签里面的submit按钮会默认提交 鼠标右键会出现菜单栏等行为

阻止默认行为

e.preventDefault() 函数

e.returnValue=false IE的兼容

return false 直接结束对应的操作

兼容写法：

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

拖拽

思路

• 给拖拽的元素添加mousedown的事件 记录当前点击的位置

• 给对应的容器添加mousemove事件 记录每次移动的位置

• 给对应的容器添加mouseup 事件 然后清除上述mousemove事件

代码实现

//获取div
var box = document.getElementById('box')
//给div添加mousedown事件
box.onmousedown = function(e){
e = e || event
//记录的是鼠标在div里面的位置
//在mousedown里面记录按下的位置
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
    var currentY = e.pageY
    //并且设置div的位置
     box.style.left = currentX - x + "px"
     box.style.top = currentY - y + "px"
}
//给document添加mouseup事件
document.onmouseup = function(){
   //清除对应的mousemove事件
   document.onmousemove = null
  }
}

区间拖拽

//拖拽的方法实现 第一个是移动的盒子 第二个在哪移动
function touch(moveBox,box){
    //给moveBox添加按下事件 记录一下当前鼠标在moveBox里面点击的位置
    moveBox.onmousedown = function(e){
        e = e || window.event
        //获取对应的第一次按下的位置
        var firstX = e.offsetX
        var firstY = e.offsetY
        // console.log(document.body.offsetParent); //偏移的父元素
        //给box添加move事件 记录每次的位置 在box的位置 设置moveBox在box的定位
        box.onmousemove = function(e){
        e = e || event
        //这个108是对应的box离body的距离 这个距离就是box偏移的距离
        //offsetLeft 得到基于父元素左偏移量 offsetTop 得到基于父元素的上偏移量
        //offsetParent 基于的父元素 基于定位的 他会一层层往上找 找到定位的父元素就基于他 如果没有找到就基于body
        // 谁有定位他就基于谁
        var currentX = e.pageX - getOffset(this).left
        var currentY = e.pageY - getOffset(this).top
        var targetX = currentX - firstX
        var targetY = currentY - firstY
        //判断边界 offsetWidth 得到盒子的宽度 offsetHeight得到盒子的高度
        if(targetX<0){
            targetX = 0
        }
        if(targetY<0){
            targetY = 0
        }
        if(targetX>this.offsetWidth-moveBox.offsetWidth){
            targetX = this.offsetWidth-moveBox.offsetWidth
        }
        if(targetY>this.offsetHeight-moveBox.offsetHeight){
            targetY = this.offsetHeight-moveBox.offsetHeight
        }
        // 设置moveBox在box的定位
        moveBox.style.left = targetX + 'px'
        moveBox.style.top = targetY + 'px'
    }
    //给box添加弹起事件 清除box的move事件
    document.onmouseup = function(){
        box.onmousemove = null
    }
    }
}
//获取对应的元素离body的距离 传入一个元素
function getOffset(element){
    var left = 0
    var top = 0
    while(element){
        left += element.offsetLeft
        top += element.offsetTop
        element = element.offsetParent
    }
    return {left,top}
}

 

样式获取

style属性 只能获取写在标签内容style属性里面存在的一些样式，获取不到写在<style></style>里面的内容

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

getComputedStyle 方法属于window的方法

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

而且当获取的样式没有写时，会输出默认的style属性值

getComputedStyle 和 element.style 的相同点就是二者返回的都是 CSSStyleDeclaration 对象，取相应属性值得时候都是采用的 CSS 驼峰式写法，均需要注意 float 属性。

而不同点就是：

• element.style 读取的只是元素的内联样式，即写在元素的 style 属性上的样式；而 getComputedStyle 读取的样式是最终样式，包括了内联样式、嵌入样式和外部样式。

• element.style 既支持读也支持写，我们通过 element.style 即可改写元素的样式。而 getComputedStyle 仅支持读并不支持写入。我们可以通过使用 getComputedStyle 读取样式，通过 element.style 修改样式

ie兼容

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

兼容封装

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

事件委托

概述：将对应的子元素事件添加给父元素，用e.target来获取真实操作的元素，从而完成相关的操作

（不能用到事件委托的mouseenter和mouseleave以及mousemove...）

//事件委托 利用父元素添加事件 通过e.target获取真实的操作元素来进行相关的操作
//当有许多需要同时添加一个事件行为的同级元素 这个时候我们不给这些元素逐个加事件
// 而是给他的父元素添加事件 称为事件委托
gameList.onmouseover = function(e){
    e = e || event
    //控制对应的li标签的背景颜色变化 得到实际的触发对象 target
    if(e.target.nodeName == 'LI'){
        //先排他
        for(var i=0;i<games.length;i++){
            this.children[i].style.backgroundColor = 'black'
        }
        e.target.style.backgroundColor = 'red'
    }
}
​

事件监听器

addEventListener（添加事件监听）任何元素都能调用

//可以同时给一个事件添加多个处理函数（事件只会调用一次）

element.addEventListener('事件名',处理函数,'是否捕获')

 

removeEventListener （移除事件监听）

element.removeEventListener ('事件名',处理函数)

//是否捕获 默认为不捕获（冒泡）
// 同时给一个事件加多个处理函数 (事件只会调用一次)
btn.addEventListener('click',function(){
    console.log('点击了');
},true)
btn.addEventListener('click',function(){
    console.log('点击了1');
},true)
btn.addEventListener('click',function(){
    console.log('点击了2');
},true)
btn.addEventListener('click',function(){
    console.log('点击了3');
})
btn.removeEventListener('click',function(){
    console.log('点击了3');
})//不能被移除
//移除事件监听器 移除事件监听器根据对应的处理函数来的
//这个俩个函数对象不是一个对象 比对出不来 所以就删不掉
//所以我们如果需要删除对应的处理函数的话 那么必须在监听的时候 就要保证这个处理函数和对应的删除的时候的处理函数是一个
//正确示例
function sayHello(){
    console.log('hello');
}
div.addEventListener('click',sayHello)
div.removeEventListener('click',sayHello)