什么是事件监听?

507 阅读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):减去的topleft 当页面出现上下滚动条以及左右滚动条时,向下以及向右滑动滚动条移动的距离就是scrollTopscrollLeft,可以检测出向下及向右位移了多少
    2):scrollTopscrollLeft 是可以赋值修改的 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