事件

事件

  • e.target：目标元素
  • e.srcElement：目标元素
  • document.documentElement：html元素
  • document.body：body元素
  • document：根节点
  • jd.dataset：获取标签自定义的属性

offset系列

offset翻译过来是偏移量，我们使用offset系列可以动态的得到该元素的位置（偏移）,大小等

注意

  • 获取元素距离带有定位的父元素位置
  • 获取元素自身的大小（宽度高度）
  • 返回的值不带单位

offset系列常用属性

  • element.offsetParent：返回作为该元素带有定位的父级元素，如果没有父级则返回body
  • element.offsetTop：返回元素相对带有定位父元素内容（padding+content）上方上框的偏移
  • element.offsetLeft：返回元素相对带有定位父元素左方框的偏移
  • element.offsetWidth：返回自身包括padding,边框，内容区的宽度，返回值不带单位
  • element.offsetHight：返回自身包括padding,边框，内容区的高度，返回值不带单位

offset与style区别

offset

  1. offset可以得到任意样式中的样式值
  2. offse系列获取的数值没有单位
  3. offsetWidth获取的包含padding,border+width
  4. offset是只读的

style

  1. style只能得到行内样式表中的样式值
  2. style.width获取的带有单位的字符串
  3. style.width获取不包含padding和border的值
  4. style.width是可读写属性，可以获取也可以赋值

client系列

client翻译过来就是客户端，我们使用client的相关属性获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素边框的大小，元素的大小

  • element.clientTop：返回元素上边框的大小
  • element.clientLeft：返回元素左边框的大小
  • element.clientWidth：返回包含padding，不包含border的高度，返回值不带单位
  • element.clientHeight：返回包含padding，不包含border的高度，返回值不带单位

立即执行函数

(function() {})(参数);
(function() {} (参数));
// 两种定义方式

创建一个独立的作用域

scroll系列

onscroll事件，当滚动滚动条的时候会触发的事件

页面被卷去头部，有兼容问题，因此被卷去的头部通常有如下写法

声明了DTD，使用document.documentBlement.scrollTop

  • element.scrollTop：返回被卷去上侧的距离，返回值不带单位
  • element.scrollLeft：返回被卷去左侧的距离，返回值不带单位

真正内容大小，如果超过则会超出，网页的滚动条，事件源是document

  • element.scrollWidth：返回自身实际高度，不包含边框，返回值不带单位
  • element.scrollHeight：返回自身实际宽度，不包含边框，返回值不带单位

总结

  1. offset系列常用与获取元素的位置
  2. client系列常用于获取元素的大小
  3. scroll系列常用于获取滚动条距离
  4. 页面滚动通过window.pageXoffset获取

动画函数封装

核心原理：利用定时器不断移动盒子位置

不同的元素设置不同的定时器

注意：必须要加定位才可以

节流阀

防止轮播图按钮连续点击造成播放速度过快

节流阀的目的：当上一个函数动画内执行完毕，在去执行下一个函数动画，让事件无法继续连续触发

核心思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数

  • window.event：事件对象

    
//兼容
function fn(e) {
  // 如果e 时PointerEvent 
  e = e.constructor==PointerEvent&&e || window.event
}

    ​

元素在某种状态（浏览器去实现的）达到时，要执行的提前设定好程序，我们称为事件句柄

三要素：事件源 事件类型 事件处理程序

键盘和鼠标来控制电脑，有鼠标事件和键盘事件

事件绑定方法

行内

<a class="box" onclick="javaScript: myconsole.mylog()"></a>	  <!-- 本质来说 onclick属性里面是字符串，当点击事件后，v8才开始运行 -->
<div class="box" onclick="myconsole.mylog()"</div>
<div class="box" onclick="fn(this)"</div> <!--this指的时div元素节点-->



<script>
  var myconsole = {
    mylog: () => {
      console.log('我自己写的函数')
    }
  }
</script>

属性绑定

只能绑定一个handler

var box = document.querSelector(".box") 
box.onclick = function() {}

添加一个监听器

box.addEventListener('事件类型',funciton() {}) 
// 事件类型不加on

//ie
box.attchEvent('click',function(){})

事件解绑

// 属性绑定的
box.onclick = null        

<div class="box" onclick=""></div>
<script>
  var box = document.querSelctor('.box')
  box.onclick = null // 解绑
</script>

function fn() {}
box.addEventListener('click',fn) // 如果是匿名函数，南无监听的移除不了
// 移除监听事件
box.removeEventListener('click')

事件类型

  • jd.focus()：获取输入框焦点
表单事件

onfocus：获取焦点

onblur：失去焦点

onchange：下拉框选项改变

onsubmit：表单提交

元素自身的事件

onscroll：滚动条在某个 事件单位内，如果当前元素位置改变就触发

oninput：元素的输入框内容变化

onchange：输入框失焦且内容改变

onclick：点击被选元素

onfocus：获取焦点

onblur：失去焦点

onload：加载完毕时执行（浏览器5大DOM的功能加载完成）

鼠标事件

包含body隐藏的

  • el.pageX
  • el.pageY

相对于浏览器

  • el.clientX
  • el.clientY

相对于元素自己的

  • el.offsetX
  • el.offsetY

相对于设备屏幕

  • scrollX
  • scrollY
box.addEventListener('click',(el)=>{
  el.pageX
})

click：只能监听左键（用onmousedown和onmouseup来判断鼠标,event.button来区分鼠标的按键）

dblclick：鼠标第一次按下和第二次松开，并且中间有事件间隔

onmousedown：鼠标在被选元素按下

onmouseup：鼠标在被选元素内松开

onmousemove：鼠标在被选元素内移动

contextmenu,onmouseover,onmouseout,onmouseenter(html5标准),onmouseleave(html5标准)

onwheel：鼠标滚轴滚动时

区别以下的四个

父元素 子元素离开

onmouseover：鼠标进入被选中元素

onmouseout：鼠标从被选元素离开

onmouseleave：鼠标离开被选中元素

onmouseenter：鼠标进入被选中元素

一方面来说onmouseenter和onmouseleave已经默认了阻止冒泡事件，就是说如果触发了事件，父元素不会被触发；onmouseover和onmouseout没有阻止冒泡事件，会触发父元素，如果想要不触发，手动添加代码stopPropagation()

键盘
  • el.keyCode：按下键的编码 enter 13

onkeydown：键盘按下

onkeyup：键盘松开

onkeypress：键盘按下又松开

事件对象

在创建事件的时候，会有生成一个事件对象，存储了事件发生的相关信息，但不同的浏览器可能会有些许差异

a) 事件处理函数形参ev(event)，W3C制定的标准，IE9以下不行
b) 全局对象 window.event用于IE9以下
// 兼容性写法 var event= ev|| window.event

事件源

event.target // 火狐只有这个
event.srcElement // ie7/ie8只有这个
// chrome都有
var ele = event.target || event.srcElement //兼容性写法

鼠标事件触发的属性

altKey 鼠标事件发生时，是否按下alt键,返回一个布尔
ctrlKey 鼠标事件发生时，是否按下ctrl键,返回一个布尔
metaKey  鼠标事件发生时，是否按下windows/commond键,返回一个布尔
shiftKey 鼠标事件发生时，是否按下shift键,返回一个布尔
pageX  鼠标点击的  X 坐标；(包含body隐藏的)
pageY  鼠标点击的  Y 坐标；(包含body隐藏的)
clientX clientY返回鼠标位置相对于浏览器窗口左上角的坐标，单位为像素(不包括body隐藏的)
screenX screenY返回鼠标位置相对于屏幕左上角的坐标，单位为像素
movementX，movementY返回一个位移值，单位为像素，表示当前位置与上一个mousemove事件之间的距离
offsetX/offsetY 相对于元素自己的x/y 跟它是否是定位的元素无关

事件机制

事件链

  • 事件的捕获阶段

  • 事件的冒泡阶段

    e.stopPropagetion() // 阻止冒泡 不阻止默认事件
// ie
e.cancelBUbble = false

    e.stopImmediatePropagetion() // 阻止程序传递执行冒泡 不阻止默认事件

    易错点：阻止冒泡 设计监听器在捕获阶段运行 都是同一个事件

    阻止系统默认事件

    e.preventDefault() // 不阻止冒泡

    ​

事件代理

给父元素绑定监听器，通过冒泡来动态实现未来添加的子元素也有业务

案例

<style>
  .box {
    margin: 30px auto;
    overflow: hidden;
  }
  .box li {
    list-style: none;
    background-color: pink;
    margin: 10px;
    width: 200px;
    height: 30px;
  }
</style>
<div class="box">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>
<script>
  var box = document.querySelector('.box')
  box.addEventListener('click',(e)=>{
    console.log(e.target) // e.srcElement同样代表目标元素

  })
</script>
posted @ 2022-07-18 19:30  a立方  阅读(76)  评论(0)  编辑  收藏  举报