Day12.事件下

事件下

事件的俩个行为

事件冒泡

从里到外冒泡 里面有一个按钮添加了点击事件 外面有个盒子也添加了点击事件 在你触发对应的按钮的点击的时候 同时他会自动调用对应盒子的点击事件 而这个机制就叫做事件冒泡

事件捕获

直接进行捕获处理

阻止事件冒泡

e.stoppropagation() *

e.cancelBubble = true (兼容ie的写法)

document.querySelector("div").onclick = function(){
    console.log("大盒子被点击了");
}
document.querySelector("button").onclick = function(e){
    e = e || window.event
    // // 阻止事件冒泡
    // e.stopPropagation() //适用大多数的浏览器 *
    // //兼容ie 取消冒泡
    // e.cancelBubble = true
    //兼容写法
    if(e.stopPropagation){
        e.stopPropagation()
    }else{
        e.cancelBubble = true
    }
    //三目运算写法
    e.stopPropagation?e.stopPropagation():e.cancelBubble = true
    console.log("按钮被点击了");
}

兼容写法

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

阻止默认行为

概述：元素自身拥有的一些行为

form的submit按钮会自动提交 然后跳转页面

a标签 直接默认跳转页面

鼠标右键点击 会出现菜单栏

.....

阻止a标签默认跳转的行为

<a href="http://www.baidu.com">百度</a>
<script>
    document.querySelector("a").onclick = function(e){
    e = e || window.event
    //阻止a标签默认跳转的行为
    // e.preventDefault() //阻止默认行为 *
    //ie浏览器兼容
    // e.returnValue = false //阻止默认行为 returnValue 同样适用于高版本浏览器（可能会被废弃）
    console.log("a标签被点击了");
    return false //阻止默认行为 一般写在最后
}
</script>

e.preventDefault() 适用所有符合w3c规则的浏览器 *

e.returnValue = false 适用ie浏览器 同样适用于高版本浏览器（可能会被废弃）

return false //都适用

右键菜单栏事件

document.oncontextmenu

拖拽

思路

1.鼠标按下 mousedown （获取点击在元素上的位置）

2.鼠标移动 mousemove （获取在文档上移动的位置 控制对应的元素移动）

3.鼠标弹起 mouseup （将弹起事件和移动事件清除）

实现代码

<!-- 在body里面拖拽 位置会改变 拖拽的元素需要定位 -->
<div></div>
<script>
    //1.获取div元素
    var div = document.querySelector("div")
    //2.需要给div的元素添加鼠标按下事件（获取按下在元素里面的位置）
    div.onmousedown = function(e){
        e = e || window.event
        //需要对应的鼠标在盒子里的位置 offsetX offsetY
        var currentX = e.offsetX
        var currentY = e.offsetY
        //3.在按下事件里面添加移动事件 （获取移动的位置） 新的位置-鼠标在盒子里面点击的位置
        document.onmousemove = function(e){
            e = e || window.event
            var targetX = e.pageX - currentX //移动的距离
            var targetY = e.pageY - currentY //移动的距离
            //控制对应的元素移动
            div.style.left = targetX + "px"
            div.style.top = targetY + "px"
        }
        //4.在按下事件里面添加弹起事件 取消俩个事件
        document.onmouseup = function(){
            document.onmousemove =  document.onmouseup  = false
        }
    }
​
</script>

区间拖拽

思路

1.给元素添加按下事件 （获取元素的父盒子的位置 在网页上的位置 获取对应的鼠标在元素里面的位置）

2.在按下事件里面添加移动事件（父元素添加） （获取当前鼠标在父盒子里面的位置 - 对应的鼠标在元素的位置 设置对应的位置 ）

3.在弹起事件里面取消对应的移动事件以及弹起事件

代码

<div class="box">
    <div class="moveBox"></div>
</div>
<script>
    //1.获取元素 大盒子和移动的盒子
    var box = document.querySelector(".box")
    var moveBox = document.querySelector(".moveBox")
    //2.给小盒子加鼠标按下事件 记录对应的鼠标在小盒子的位置 记录大盒子的位置
    //鼠标在大盒子里面的位置其实就是 当前的鼠标在页面上的位置（page） - 大盒子离页面的距离（offset家族）
    //当前的鼠标在页面上的位置（pageX） - 大盒子离页面的距离(offsetLeft)
    //当前的鼠标在页面上的位置（pageY） - 大盒子离页面的距离(offsetTop)
    moveBox.onmousedown =  function(e){
        e = e || window.event
        var currentX = e.offsetX //鼠标在小盒子里面的位置
        var currentY = e.offsetY
        //3.按下事件里面给大盒子添加移动事件 
        //（得到鼠标在大盒子里面的位置 - 鼠标在小盒子里面的位置 控制对应的移动）
        box.onmousemove = function(e){
            e = e || window.event
            // var targetX = e.offsetX - currentX
            // var targetY = e.offsetY - currentY
            var targetX = e.pageX - this.offsetLeft - currentX
            var targetY = e.pageY - this.offsetTop - currentY
            //最大的移动区间就是 父元素的宽度-子元素的宽度
            var maxX = this.offsetWidth - moveBox.offsetWidth
            var maxY = this.offsetHeight - moveBox.offsetHeight
            //边界判断
            // 如果当前定位的位置小于0就让他等于0
            if(targetX<0){
                targetX = 0
            }
            if(targetY<0){
                targetY = 0
            }
            //如果当前移动的距离大于我们最大的距离就让他等于这个距离
            if(targetX>maxX){
                targetX = maxX
            }
            if(targetY>maxY){
                targetY = maxY
            }
            //控制小盒子的位置
            moveBox.style.left = targetX + "px"
            moveBox.style.top = targetY + "px"
        }
        //4.取消对应的大盒子的移动事件 以及大盒子的弹起事件
        box.onmouseup = function(){
            box.onmouseup = box.onmousemove = false
        }
    }
​
</script>

公式

• 鼠标在大盒子里面的位置其实就是 = 当前的鼠标在页面上的位置（page） - 大盒子离页面的距离（offset家族）

• 移动的位置 = 得到鼠标在大盒子里面的位置 - 鼠标在小盒子里面的位置

• 最大的移动区间 = 父元素的宽(高)度 - 子元素的宽(高)度

offset家族

offset家族是获取对应的偏移的位置 他有奶便是娘 （他的父元素谁加了定位他就基于谁 否则基于body）

offsetParent 偏移的父元素（选择离他最近加了定位的父元素）

offsetLeft 左偏移

offsetTop 上偏移

offsetWidth 偏移元素的宽度

offsetHeight 偏移元素的高度

获取样式

window.getComputedStyle() *

element.currentStyle (兼容ie8以下的浏览器)

//获取样式 获取所有的地方的样式 给定都是默认值 使用window对象
console.log(window.getComputedStyle($("h1")).backgroundImage);//返回的是一个样式对象 里面包含所有的样式
// 兼容ie 都是属性 直译 元素对象
console.log($("h1").currentStyle);
// 兼容写法 获取样式对象
function getStyle(element){
    return window.getComputedStyle?window.getComputedStyle(element):element.currentStyle
}

事件监听器

1.采用了观察者模式（observer）

2.同一个事件可以有多个处理函数

3.在添加事件的时候对应的处理函数不能是匿名函数（不然是不能被移除的）

添加事件监听 addEventListener

addEventListener(监听事件名,处理函数,冒泡false 还是捕获 true)

移除事件监听 removeEventListener

removeEventListener(事件名,处理函数)

var btn =  document.querySelector("button")
function hanlder(){
    console.log("123");
}
//添加监听 同一个事件可以有多个处理函数
btn.addEventListener('click',hanlder,false)
btn.addEventListener('click',function(){
    console.log("456");
},false) //是否捕获
//移除事件监听 函数的指向不一样 开辟俩个内存空间 地址是不一样 移除不了
//移除对应的事件名中某个匹配处理函数
btn.removeEventListener('click',hanlder)
//兼容 ie8以下
// btn.attachEvent("onclick",fn) 添加
// btn.detachEvent("onclick",fn) 移除

封装的兼容方法

//事件监听器的兼容
//添加事件的元素 事件类型 处理函数
function addEvent(element,type,fn){
    element.addEventListener?element.addEventListener(type,fn):element.attachEvent(`on${type}`,fn)
}
function removeEvent(element,type,fn){
    element.removeEventListener?element.removeEventListener(type,fn):element.detachEvent(`on${type}`,fn)
}