首页 > 其他分享 >day12事件下

day12事件下

时间：2022-10-25 11:36:20浏览次数：71  
标签：function console 鼠标 事件 day12 var div

事件的传播行为(也叫作事件流)

冒泡模式(默认模式)

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

  • event.bubbles(只读属性)

console.log(e.bubbles) //当前事件是否冒泡,返回布尔值
<div>
    <button>点我</button>
</div>
<script>
    var div = document.querySelector('div')
    document.onclick = function () {
        console.log('文档被点击了')
    }
    div.onclick = function () {
        console.log('div被点击了')
    }
    document.querySelector('button').onclick = function (e) {
        console.log('button被点击了')
        console.log(e.bubbles) //当前事件是否有冒泡
    }
</script>

阻止事件冒泡

  • stopPropagation(方法)

e.stopPropagation() //阻止事件冒泡,是常用的方法,有兼容问题
  • cancelBubble (属性) --> 兼容ie低版本的写法
//ie8及以下版本写法
e.cancelBubble = true
  • 兼容写法
//兼容写法
e.propagation ? e.propagation() : e.cancelBubble = true

捕获模式

捕获模式就是从外到里触发

默认行为

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

在某些时候 默认行为会导致代码的执行出现问题,这时候就需要禁止默认行为

阻止默认行为

  • preventDefault(方法)

//阻止默认行为
e.preventDefault() //大部分浏览器都兼容,常用
  • returnValue=false (属性) 兼容ie低版本的写法
//兼容ie
e.returnValue=false //兼容ie
  • 兼容写法
e.preventDefault?e.preventDefault():e.returnValue=false
  • return false
return false

 

事件监听器(有兼容问题,ie已经放弃这个功能了)

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

  • removeEventListener 移除事件监听器 (只能移除addEventListener添加的处理函数,并且得是同一个函数)

<button onclick="hander1()">点我</button>
<script>
    // 事件监听器就是,监听指定的事件来执行对应的处理函数,它不会覆盖之前的事件处理函数
    // 如果需要有多个处理函数的时候,可以采用事件监听器
    // 事件监听器是一个函数,里面需要填 传入的事件名,和处理的函数(如果是直接传入function,就不会被移除)
    var btn = document.querySelector('button')
    function hander1() {
        console.log('封装的全局函数,都可调用');
    }
    btn.onclick = function () {
        console.log('会覆盖内联模式的onclick事件')
    }
    btn.addEventListener('click', function () {
        console.log('点击了按钮')
    })
    btn.addEventListener('click', function fn() {
        console.log('点击了按钮1')
    })
    btn.addEventListener('click', hander1)
    // 移除事件监听器,只能移除addEventListener添加的,而且处理函数必须是同一个,不然移除不了
    btn.removeEventListener('click', function fn() {
        console.log('我要移除点击了按钮1')//移除不了,和上面添加的不是一个处理函数
    })
    btn.removeEventListener('click', hander1)//可移除
</script>

 

盒子拖拽

基础三大事件

  • 鼠标按下事件 ( mousedown )

  • 鼠标移动事件 ( mousemove )

  • 鼠标松开事件 ( mouseup )

在页面上进行拖拽

步骤

  1. 给需要拖拽的盒子添加鼠标按下事件

  2. 在鼠标按下事件时获取鼠标在盒子的位置 ( 用offsetX / offsetY )

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

  4. 在移动的时候获取鼠标在页面上的位置 ( 用pageX / pageY )

  5. 计算出当前位置 ( 页面上的位置 - 鼠标在盒子的位置 )

  6. 设置盒子的位置

  7. 在鼠标按下事件中给document添加鼠标松开事件

  8. 在鼠标松开事件中清除鼠标移动事件

<style>
    div {
        width: 100px;
        height: 100px;
        background-color: aqua;
        position: absolute;
    }
</style>

<div></div>
<script>
    //获取div
    var div = document.querySelector('div')
    //给div设置鼠标按下事件
    div.onmousedown = function (e) {
        //event的兼容写法
        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>
    .box {
        width: 666px;
        height: 666px;
        border: 1px solid #000;
        position: relative;
    }

    .move {
        width: 100px;
        height: 100px;
        background-color: aqua;
        position: absolute;
    }
</style>

<div class="box">
    <div class="move"></div>
</div>
<script>
    // 获取页面上需要操作的元素
    var box = document.querySelector('.box')
    var move = document.querySelector('.move')

    // 给需要移动的盒子添加鼠标按下事件
    move.onmousedown = function (e) {
        // event的兼容写法
        e = e || window.event
        // 获取鼠标在盒子的位置
        var currentX = e.offsetX
        var currentY = e.offsetY

        // 给大盒子添加鼠标移动事件
        box.onmousemove = function (e) {
            e = e || window.event
            //如果要找盒子在页面上的位置 那么要从自己基于的父元素的距离 + 对应父元素基于他的父元素距离 .. 直到找到body
            // 用一个变量来接收得到的盒子在页面上的距离的对象(用封装的方法计算出的)
            var dis = computeInPage(this)
            // 当前位置 = 页面上的距离 - 父类们离body的距离(大盒子在页面的距离) - 鼠标在盒子的距离
            var targetX = e.pageX - dis.left - currentX
            var targetY = e.pageY - dis.top - currentY
            // 设置一个最大可移动范围 :大盒子宽高-小盒子宽高-外边距
            var maxX = this.offsetWidth - move.offsetWidth - 2
            var maxY = this.offsetHeight - move.offsetHeight - 2
            // 设置当前位置的最大最小范围
            // 如果当前位置小于0,则当前位置等于0,当前位置大于最大的移动范围,那它就等于最大的移动范围
            if (targetX < 0) {
                targetX = 0
            }
            if (targetX > maxX) {
                targetX = maxX
            }
            if (targetY < 0) {
                targetY = 0
            }
            if (targetY > maxY) {
                targetY = maxY
            }
            // 给需要移动的盒子设置位置
            move.style.left = targetX + 'px'
            move.style.top = targetY + 'px'
        }
        // 给页面上设置鼠标松开事件,松开移动事件就清除
        document.onmouseup = function () {
            box.onmousemove = null
        }
    }
    // 封装一个计算盒子在页面上的位置的方法,传入一个需计算的对象,返回的是一个距离对象
    function computeInPage(element) {
        // 初始化一个距离对象,left代表距离左边的距离,top代表距离右边的距离
        var distance = {
            left: 0,
            top: 0
        }
        // 循环元素的父类,一直向上判断,到了body为null就结束循环
        while (element.offsetParent) {
            // 对象的左右边距=对象的左右边距+元素的左右偏移距离
            distance.left += element.offsetLeft
            distance.top += element.offsetTop
            element = element.offsetParent
        }
        // 返回这个距离对象
        return distance
    }
</script>

 

样式获取

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

<style>
    div {
        width: 200px;
    }
</style>
<div style="height:100px"></div>
<script>
    // style的弊端,它只能获取对应的内联模式的样式,也就是只能获取style属性的样式
    var div = document.getElementsByTagName('div')[0]
    console.log(div.style.width) //空字符串
    console.log(div.style.height) //100px
</script>
  • getComputedStyle 方法可以获取所有的样式
<head>
    <style>
        div {
            width: 200px;
        }
    </style>
</head>

<body>
    <div style="height:100px"></div>
</body>
<script>
    var div=document.querySelector('div')
    var style = getComputedStyle(div, "")
    console.log(style) //getComputedStyle获取的样式会得到CSS所有的样式,是个对象,他们都有自己的默认值
    console.log(style.width) //200px
    console.log(style.height) //100px
</script>
  • currentStyle 是ie的低版本兼容
console.log(div.currentStyle) //ie低版本兼容,未进行维护已被废弃,低版本还能用
  • 兼容封装
// getComputedStyle 有兼容问题
// currentStyle 有兼容问题,只有ie低版本可用,已被废弃
// 兼容写法 传入一个元素,返回一个样式对象
function getStyle(element){
    var style=window.getComputedStyle?getComputedStyle(element,''):element.currentStyle
    return style
}

 

标签：function,console,鼠标,事件,day12,var,div
From： https://www.cnblogs.com/itlulu/p/16824300.html

相关文章

  • JavaScript学习--事件监听
    事件绑定方式一：通过HTML标签中的事件属性进行绑定<inputtype="button"onclick='on()'>functionon(){alert("我被点了");} 方式二：通过DOM元素属性绑定<inputty......
  • cxgrid双击不容易触发事件的解决方法
    cxgridcell列双击与单机事件不容易触发的问题cxgrid在很多时候，单击或者双击cell的时候不容易触发相应的动作事件；是因为鼠标点击cxgrid的时候，进入到了编辑状态，所以没有触发......
  • 第一百零四篇:JS事件
    好家伙,JS基础接着学, 1.事件流页面哪个部分拥有特定的事件?可以把页面想象成一个同心圆,当你戳了其中的一点,其实你同时戳中了很多个圆 当你点击一个按钮,实际上......
  • react是如何实现事件代理的
    _版本：v18.2.0本文为我花了大半年的时间潜心研究所写，转载请注明出处，谢谢react是如何实现事件代理的createRoot函数**用户在index.tsx中执行ReactDOM.createRoot创建roo......
  • Python教程Day12-函数（一）
    函数（一）一、函数的作用​​需求​​：用户到ATM机取钱输入密码后显示"选择功能"界面查询余额后显示"选择功能"界面取2000钱后显示"选择功能"界面特点：显示“选择功能”界面需要......
  • Python教程Day12-函数（二）
    函数（二）一、变量作用域一个程序的所有的变量并不是在哪个位置都可以访问的。访问权限决定于这个变量是在哪里赋值的。变量作用域指的是变量生效的范围，主要分为两类：局部变量......
  • dellphi Tcxgrid 引用双击事件
      我设置了一个双击事件,然后又想通过右键菜单来实现双击整事件里的功能,就这么一个简单的功能,我卡了一天!主要卡在ACellViewInfo这个参数里面,想传这个参数进去,......
  • JS事件循环之宏任务和微任务
    首先我们知道javascript是一个单线程的脚本语言，也就是说我们在执行代码的过程中不会出现同时进行两个进程（执行两段代码）。JS执行过程中会产生两种任务，分别是：同步任务和异......
  • 复合事件处理(Complex Event Processing)介绍
    复合事件是由史丹佛大学的DavidLuckham与BrianFraseca所提出，DavidLuckham与BrianFraseca于1990年提出复合事件架构，使用模式比对、事件的相互关系......
  • day12 java io流 File类
            递归遍历  day123_File类递归遍历文件_哔哩哔哩_bilibili    字节流 复制   复制1 2         ......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99