什么是事件监听?

margin_100px
635 阅读4分钟

什么是事件监听?

就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为注册事件

语法: 元素.addEventListener('事件',要执行的函数)

事件监听三要素

  1. 事件源:那个dom元素被事件触发了，要获取dom元素
  2. 事件:用什么方式触发，比如鼠标单击click、鼠标经过mouseover等
  3. 事件调用的函数:要做什么事

resize在窗口尺寸改变的时候触发的事件

//检测屏幕宽度：
window.addEventListener( ' resize ' , function () {
    let w = document.documentElement.clientwidth
    console.log(w)
}

load 加载事件

有些老代码写在html架构前面，导致js加载失败，可以给window增加监听事件load,意思是等页面加载完成再执行里面代码

  • 表单 input 输入事件 输入过程中就会触发
  • 键盘 keydown 按下 keyup弹起事件
  • change 事件 当离开表单 而且里面的值发生改变了才会触发 和blur 光标离开就触发不一样
  • 鼠标 mousemove 鼠标移动事件
document.addEventListener（‘mousemove’,function(e){

   }）
  • 其中的事件回调函数中的形参e 也称为 事件对象，一般写 e， event，ev
  • 常用的属性为 pageX pageY，即鼠标在页面全局的坐标，跟文档坐标有关系
  • 事件keyup 与 keydown 的事件对象e有属性 key 可以知道按下的是键盘上的哪个键

自动触发点击事件

let btn = document.querySelector('button')
  btn.addEventListener('click',function(){})
  btn.click()  ///调用单击函数，模拟点击

scroll家族

页面或者盒子滚动事件，有滚动条的，scroll 事件

  1. 1)：div.scrollWidth 盒子里面的内容的宽度 ，如果有滚动条，该属性也不会包括滚动条的宽高，仅仅是内容的，返回值不带单位
    2):div.scrollHeight 盒子里面的内容的高度，不是盒子高度
  2. 1):减去的top和left 当页面出现上下滚动条以及左右滚动条时，向下以及向右滑动滚动条移动的距离就是scrollTop和scrollLeft，可以检测出向下及向右位移了多少
    2):scrollTop和scrollLeft 是可以赋值修改的 document.documentElement.scrollTop = 200

写法：

//一般被检测的是最大的元素
//如果是body,可以通过document.body拿到（因为只会有一个body）
//如果是html根元素.则是通过document.documentElement 拿到
//他的向下滚动位移量是 
let num = document.documentElement.scrollTop
console.log(document.documentElement) // 拿到的整个文档元素 其实就是html标签，类似
document.querySelect（‘div’）//拿到的是div标签

offset家族

div.offsetWidth div.scrollHeight 是盒子元素的大小,包括盒子本身的宽高 + padding + border
获取位置:

  1. 不是到可视窗口的距离，而是文档最顶部的距离，是固定的，不是变化的
  2. 获取元素距离自己定位父级元素的左、上距离；

注：

  1. 如果他的父级没有定位，则一直往上找，直到整个页面
  2. offsetLeft和offsetTop注意是只读属性
    当满足scrollHeight-scrollTop = clientHeight 说明垂直滚动条到底了，说明你把整个页面从上到下看完了，没看完不让你勾选

client家族

获取宽高:

  1. clientWidth和clientHeight当放大缩小浏览器窗口时，会发生改变，即可视部分的宽高发生了改变，当调出控制台时，可视部分也发生改变，因为下边部分被遮挡了
  2. 获取元素的可见部分宽高（不包含边框，滚动条等)

获取位置:

clientLeft和clientTop注意是只读属性，获取到的值就是边框的宽度，因为可视区域不包括边框，

断点调试

打开浏览器 按F12，选择Sources，在代码的行数点一下，重新选择断点后刷新一下页面，代码就会在这一行停止，不会执行这一行即以下代码

  • break 退出循环
  • break 只会对离他最近的循环产生影响
  • 可以为 循环加一个label ，可以指定break 终止的是哪个循环
  • continue 也是如此
//outer:
for(let i = 0； i< 5；i++){
     for(let j = 0； j< 5；j++){
         if(j = = 2){
                 break outer;
         }
    }
}
//continue 跳出此次循环，不会执行下面代码，
let i= 1
while（i<=5）{
   if(i===3){
       i++
       continue
    }
   document.write(`我要吃第${i}个包子`)
   i++
}

结果为：

  • 我要吃第1个包子
  • 我要吃第2个包子
  • 我要吃第4个包子
  • 我要吃第5个包子
  • 我要吃第6个包子

知道循环次数使用for，不知道循环使用while

avatar
文章
阅读
粉丝