事件

最新推荐文章于 2024-07-19 15:13:24 发布

颜镜

最新推荐文章于 2024-07-19 15:13:24 发布

阅读量149

点赞数

分类专栏：事件文章标签： javascript 事件模块

本文链接：https://blog.csdn.net/tx_blogs/article/details/107920501

版权

事件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

事件对象

事件侦听和删除侦听

添加事件
- 标准浏览器的事件监听器
  - 语法: 元素.addEventListener(‘事件类型’, 事件处理函数，是否捕获，{once：true})
  - 作用: 给元素添加一个事件处理函数, 当事件触发的时候有函数执行
- IE 低版本的事件监听器
  - 语法: 元素.attachEvent(‘on事件类型’, 事件处理函数)
  - 作用: 给元素添加一个事件处理函数, 当事件触发的时候有函数执行
- addEventListener和attachEvent和onclick=fn的优缺点
  - addEventListener
    - 缺点：不支持IE8及以下，方法名太长
    - 优点：支持捕获和冒泡阶段分开侦听
      
      支持事件抛发机制
      
      支持同一个事件做多个事件回调函数
      
      事件使用时可以将函数与内容完全分离
  - attachEvent
    - 缺点：IE8以上不支持，没有捕获，不支持一次点击，未来被淘汰
    - 优点：支持IE8以下，并且可以使一个事件调用多个回调函数，事件使用时可以将函数与内容完全分离
  - οnclick=fn
    - 优点:全浏览器支持，不考虑兼容问题，代码便捷
    - 缺点：不支持事件抛发机制，只能使用系统默认事件；同一个元素同一个事件不支持多个回调函数；因为代码大量使用匿名函数，容易造成回调地狱，并且在开发中代码实际功能不能分离
移除事件
- 元素.removeEventListener(‘事件类型’, 要移除的事件处理函数)
- 元素.detachEvent(‘on事件类型’, 要移除的事件处理函数)
- 元素.on事件类型 = null

事件原理

事件的冒泡和捕获，就是事件触发的顺序
冒泡: 按照从目标到 window 的顺序来执行所有的同类型事件
目标阶段：到达目标
捕获: 按照从 window 到目标的顺序来执行所有的同类型事件
怎么让事件按照冒泡或者捕获的顺序执行？？？
- IE 低版本只能按照冒泡的顺序执行, 没有办法设置捕获标准浏览器, 通过 addEventListener 的第三个参数来决定是冒泡还是捕获
  - 第三个参数, 是布尔值
    
    默认是 false, 表示冒泡
    
    选填是 true, 表示捕获(一般很少使用)

事件对象e

解释
- 在每一个事件触发的时候都应该有一些描述性的信息
  - 触发的什么事件
  - 触发的哪一个元素身上的事件
  - 鼠标事件的时候, 光标坐标点时什么
  - 键盘事件的时候, 按下的时哪一个按键
定义
- 当我们把这些信息放在一个对象里面的时候，我们管这个对象叫做事件对象
- 事件对象: 就是一个保存了本次事件的描述信息的对象数据类型
- 当你绑定好一个事件的以后，当用户触发这个事件的时候，那么浏览器会帮我们把关于这个事件的所有信息都记录下来，给到我们, 让我们使用
如何在事件里面获取事件对象？
- 标准浏览器 => 直接在事件处理函数的时候接收一个形参的形式
- e => 就是一个形参, 你可以写 event 或者 ev 或者 e
- 会在事件触发的时候, 由浏览器给我们传递实参
- 我们直接在事件处理函数里面使用 e 就可以了
- 得到的就是事件对象(里面包含本次事件的一些描述信息)
  - e.type 事件类型 click
  - e.target e.srcElement 事件目标对象
  - e.currentTarget this 事件侦听对象
  - e.cancalBubble 设置取消冒泡
- 所有事件都有事件对象

阻止默认事件

表单事件中的submit和reset 使用阻止默认事件可以取消提交和重置

var form=document.querySelector("form");
form.addEventListener("submit",formHandler);
form.addEventListener("reset",formHandler);

function formHandler(e){
    e.preventDefault();
}

当使用contextmenu事件，取消鼠标右键菜单

document.addEventListener("contextmenu",mouseHandler);
function mouseHandler(e){
    e.preventDefault();
}

当针对元素拖拽时，元素内有文本，文本会被选中. 使用 e.preventDefault();可以使文本不会选中

var div=document.querySelector("div");
document.addEventListener("mousedown",mouseHandler);

function mouseHandler(e){
    e.preventDefault();
}

图片拖拽时产生禁止拖拽图标.使用 e.preventDefault();可以取消禁止拖拽图标

var img=document.querySelector("img");
img.addEventListener("mousedown",mouseHandler);

function mouseHandler(e){
    e.preventDefault();
}

取消冒泡事件

利用事件对象里面的内容
- 标准浏览器
  - e.stopPropagation() 停止传播
- IE低版本
  - e.cancelBubble = true 确认取消冒泡

事件分类

event事件
- change 改变事件
  - change只能针对表单触发
  - change事件可以给input,checkbox,radio绑定
  - change如果给下拉列表select绑定时，select.value是选中的值。如果给select增加多选属性multiple, select.selectedOptions[i].textContent是你所选择的值，select.selectedIndex 是选择下标
  - 给input绑定change事件时，必须是input.value值发生改变，并且失去焦距时触发
- error 加载错误
- load 加载成功
  - load 和error 用于图片的加载，Ajax通信以及JSON或者其他文件的加载等
  - 只是加载了图片，没有把图片放在页面中，则不能调用clientWidth,offsetWidth,scrollWidth这样的数据
  - load还可以用于window加载创建完成。使用window侦听load事件，即window.addEventListener(“load”,loadHandler)形式进行侦听 1、所有的DOM加载完成 2、所有的图片已经加载完成
- reset 重置事件
  - submit和reset只能针对form表单侦听，不能针对input
- resize 窗口改变
  - resize 针对window和textArea的事件
- select
  - input文本选择文字时触发，不是针对下拉列表的
- submit 提交事件
  - submit和reset只能针对form表单侦听，不能针对input
  - 提交和重置时收到事件
- unload
- scroll 滚动条滚动
- popStateEvent
  - popstate事件历史记录被回退和前进时触发
鼠标事件
- click 点击左键
- dbclick 双击左键
- mousedown 按下键
- mouseup 释放键
- mouseover 划过
- mouseout 划出
- mouseenter 进入
- mouseleave 离开
- mousemove 移动
- contextmenu 右键菜单
- mouseover mouseout和mouseenter mouseleave的区别
- mouseover mouseout具有冒泡功能可以收到鼠标滑入滑出子元素的冒泡事件
- mouseenter mouseleave仅对侦听的对象起到事件接收作用
- 鼠标事件提供的信息
  - clientX clientY 距离可视区域左上角的位置
  - layerX layerY 如果目标对象是定位方式，值与offset相似
    
    如果目标对象是非定位方式，取父容器的左上角的位置，如果父容器未定位，继续向上取
  - offsetX offsetY 相对事件目标对象的左上角位置
  - movementX movementY 仅用于mousemove事件，这个值是鼠标移动时相对上次获取坐标的距离
  - pageX pageY 相对于页面顶端左上角的位置
  - screenX screenY 相对于屏幕左上角的位置
  - x y 和clientX，clientY相同
  - 按下键点击鼠标时变为true
    - altKey
    - ctrlKey
    - metaKey
    - shiftKey
  - 针对mousedown事件的属性，判断按下的键
```
       左键    中键   右键
button:  0     1       2
buttons: 0     4       2
which:   1     2       3
```
焦距事件
- focus 汇聚焦距
- blur 失去焦距
- 适用于所有的表单元素，例如文本框，超链接
- focus汇聚焦距的方式有点击，tab切换
- 焦距事件提供的信息
  - e.relatedTarget 上次汇聚焦距的元素
input事件
- input事件提供的信息
  - e.data:“o” 输入的内容
  - e.inputType: “insertText” 输入的类型
  - insertCompositionText
    
    包括插入文本，删除文本，插入输入法文本，剪切粘贴文本等等
  - e.isComposing: true 是否是输入法文本
按键事件
- keydown
- keyup
  - 按键事件的提供的信息
    - e.code: “KeyA”
    - e.key: “a”
    - e.keyCode: 65
    - e.which: 65

滚轮事件

火狐浏览器
- DOMMouseScroll
- 滚轮向上滑动
  - e.detail: -3

其他浏览器

onmousewheel

滚轮向上滑动

google和IE
    deltaX: -0
    deltaY: -100
    deltaZ: 0
    detail: 0
    wheelDelta: 120
    wheelDeltaX: 0
    wheelDeltaY: 120

事件派发

事件基础

事件是由通知和侦听组合完成的

先侦听后通知，执行对应的函数

//侦听事件     //先侦听
document.addEventListener("天王盖地虎",eventHandler);
//侦听的对象是document
function eventHandler(e){
    console.log(e);
} //将evt事件抛向侦听对象document,并且事件类型相同时，执行eventHandler函数

//创建一个事件对象
//事件类型必须是一个字符串
var evt=new Event("天王盖地虎");//"天王盖地虎"是事件类型
//通知，抛发      //后抛发
document.dispatchEvent(evt);//将evt事件抛向侦听对象document
//抛发的对象是document

注意：
事件的类型必须相同
事件侦听的对象和抛发的对象必须相同
将事件抛向侦听对象就可以
先侦听后抛发
部分事件是系统默认事件，这些事件会由系统自动抛发

this

节流

当持续触发事件时，保证一定时间段内只调用一次事件处理函数。让函数执行一次后，在某个时间段内暂时失效，过了这段时间以后再重新激活（类似于技能冷却时间）

//节流案例
//利用定时器
var input0=document.querySelector("#input0");
var ids;
input0.addEventListener("input",inputHandler);

function inputHandler(e){
    if(ids!==undefined) return;
    ids=setTimeout(function(){
        clearTimeout(ids);
        ids=undefined;
        console.log(input0.value);
    },500);
}

防抖

对于短时间内连续触发的事件，防抖的含义就是让某个时间期限内，事件处理函数只执行一次

//防抖
一开始设置全局变量time=0；
在要执行的函数里面写上：
time--；
if(time>0)return;
time=15;
要执行的语句；

节流和防抖的区别
- 防抖是将多次执行变为最后一次执行，节流是将多次执行变为每隔一段时间执行

颜镜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件

事件对象事件侦听和删除侦听添加事件标准浏览器的事件监听器语法: 元素.addEventListener(‘事件类型’, 事件处理函数，是否捕获，{once：true})作用: 给元素添加一个事件处理函数, 当事件触发的时候有函数执行IE 低版本的事件监听器语法: 元素.attachEvent(‘on事件类型’, 事件处理函数)作用: 给元素添加一个事件处理函数, 当事件触发的时候有函数执行addEventListener和attachEvent和onclick=fn
复制链接

扫一扫