js事件下

事件下

事件的两个行为

事件冒泡

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

事件捕获

直接进行捕获处理

阻止事件冒泡

e.stoppropagation() *

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

<div>456
    <button>123</button>
</div>

document.querySelector('div').onclick = function() {
console.log("456被点击了");
}
document.querySelector('button').onclick = function(e) {
e = e || window.event
e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true
// e.stopPropagation() || (e.cancelBubble = true)
console.log('123被点击了')
}

兼容写法

e.stoppropagation?e.stopprogation():e.cancelBubble = true

阻止默认行为

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

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

a 标签 直接默认跳转页面

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

<a href="http://www.baidu.com">百度</a>
<script>
    document.querySelector('a').onclick = function(e) {
    e = e || window.event
    // e.preventDefault() //方法加括号
    // e.returnValue = false //ie兼容  同样适用于高版本浏览器(可能会被废弃)
    console.log('a标签被点击了');
    return false
}
</script>

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

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

return false 都适用 一般写在末尾 直接结束事件

拖拽

思路

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>

公式

• 鼠标在大盒子里面的位置其实就是 = 当前的鼠标在页面上的位置(e.page)-大盒子离页面的距离
• 移动的位置上 = 得到鼠标在大盒子里面的位置 - 鼠标在小盒子里面的位置
• 最大的移动区间 = 父元素的宽(高)度 - 子元素的宽(高)度

offset家族

offset家族就是获取对应的偏移的位置 (他的父元素谁加了定位就基于谁,否则基于body)

offsetParent 偏移的父元素 (选择离它最近的加了定位的父元素)

offsetLeft 左偏移 (与上一个加了定位的父元素的偏移)

offsetTop 上偏移

offsetWidth 偏移元素的宽度

offsetHeight 偏移元素的高度

<style>
        .a{
            width: 100px;
            height: 100px;
            background-color: red;
            margin-left: 10px;
            position: relative;
        }
        .b{
            width: 50px;
            height: 50px;
            background-color: yellow;
            margin-left: 10px;
            position: relative;
        }
        .c{
            width: 30px;
            height: 30px;
            background-color: green;
            margin-left: 10px;
            position: relative;
        }
        .d{
            width: 10px;
            height: 10px;
            background-color: pink;
            margin-left: 10px;
        }
    </style>

    <div class="a">
        <div class="b">
            <div class="c">
                <div class="d">123</div>
            </div>
        </div>
    </div>
    <script>
       var d =  document.querySelector('.d')
    //    console.log(d.offsetParent);//body  没有定位基于body
    //    console.log(d.offsetLeft);// 48px  包含了父元素的margin值
    console.log(d.offsetParent); //c
    console.log(d.offsetLeft) //10px a,b,c加了定位

获取样式

window.getComputeStyle() *

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

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

事件监听器

1.采用了观察者模式(observer)

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

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

添加事件监听

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

移除事件监听

removeEventListener(事件名,处理函数)

<button type="">123</button>
    <script>
       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)
        }
    </script>