LC

前端中的事件是？

 
  • 2021年 07月12日
  • 0 阅读

事件构成三要素

  1. 触发的元素

  2. 事件函数（on+事件类型）

  3. 事件处理函数（方法）

事件书写方式

  • 元素内部直接写
<a href='' onclick=”alert('hello')“></a>
  • 元素内部调用函数
<a href="" onclick="fn()"></a>
  • 使用对应的事件属性添加事件
var box = document.getElementById("box");
box.onclick = function () {};
box.onclick = fn;

事件类型

1.鼠标事件

  • 点击事件 onclick （执行在按下和弹起之后）

  • 双击事件 ondblcilck

  • 移入事件 onmouseover （子元素也会触发）

  • 移出事件 onmouseout

  • 移入事件 onmouseenter

  • 移出事件 onmouseleave

  • 移动事件 onmousemove

  • 按下 onmousedown

  • 弹起 onmouseup

2.键盘事件

  • onkeydown 按下

  • onkeyup 弹起

  • onkeypress 按下后弹起前 （字符按键 包含字母数组下划线特殊字符及回车和空格）

3.html 事件

  • onload 加载 window

  • onunload 卸载 window

  • onblur 失去焦点 input

  • onfoucs 获取焦点 input

  • onsubmit 提交事件 form 表单

  • onreset 重置事件 form 表单

  • onselect 文本内容选择事件 input 和 textarea

  • onscoll 滚动栏滚动事件 window

  • onchange 内容修改事件 表单元素的

事件源对象

event 其实是对应的触发的事件函数里面的第一个参数

兼容写法

box.onclick = function (e) {
  e = e || window.event; //兼容写法
};
事件源对象的相关属性

button 按键按下的是那个 0 表示左键 1 表示中间滚轮 2 表示右键

type 事件类型

target 目标元素（触发事件的元素） currentTarget 实际触发事件的元素

x 获取鼠标的 x 坐标 y 获取鼠标的 y 坐标 （有兼容问题 ie 浏览器）

screenX 获取屏幕到鼠标的 x 距离 screenY 获取屏幕到鼠标的 y 距离

pageX 获取鼠标离页面最顶部的 x 距离（包含滚动栏的） pageY 获取鼠标离页面最顶部的 y 距离（包含滚动栏的）火狐浏览器不支持

clientX 获取鼠标离页面的可视区域的 x 距离 clientY 获取鼠标离页面可视区域的 y 距离

offsetX 获取鼠标在盒子里面的 x 坐标 offsetY 在获取鼠标在盒子里面的 y 坐标

image-20220330110619037

ctrlKey 是否按着 ctrl 键

shiftKey 是否按着 shift 键

altKey 是否按着 alt 键

key 获取对应的按钮的值

code 获取按钮

keyCode 获取按钮值的 ascii 码 （只会获取大写）

charCode 获取字符 ascii 区分大小写的（只会运用在 keypress 里面）

事件的 this 指向

如果是在对应的 function 里面的 那么 this 指向 function 的拥有者（也就是触发事件的元素）

如果他在没有对象包的情况下他指向 window （有对象包就属于对象的拥有者）

阻止事件冒泡及默认行为

事件冒泡：触发里面的事件的时候 事件会进行向上冒泡 进而触发外面的事件（事件的向上传递）

阻止事件冒泡
e.stopPropagation(); //兼容问题 不兼容ie 遵从w3c规范
e.cancelBubble = true; //兼容ie 不遵从w3c规范（未来会被废弃）
//兼容写法
e.stopPropagation ? e.stopPropagation() : (e.cancelBubble = true);
阻止默认行为
e.preventDefault(); //兼容问题
e.returnValue = false; //兼容
return false; //后续的代码是不会执行 放在最后面
e.preventDefault ? e.preventDefault() : (e.returnValue = false);
offset 家族（元素的属性 只读属性）

offsetParent 基于偏移的父元素（有定位（没有定位找 body） 就近原则 ）

offsetLeft 左边的偏移量 offsetTop 上面的偏移量

offsetWidth 自身宽度 offsetHeight 自身高度

事件监听器

添加 addEventListener

element.addEventListener("事件名", function () {}, false); //参数1 事件名 参数2 方法  参数3 是否捕捉 默认false 为冒泡

删除 removeEventListener

element.removeEventListener("事件名", function () {}); //如果里面的参数2为一个function声明 那么将不能删除 建议抽取这个function

获取样式（元素样式）

window.getComputedStyle() //获取样式

window.getComputedStyle(元素, null); //第一个参数为元素 第二个参数为null 也可以省略
//兼容写法
var style = window.getComputedStyle
  ? window.getComputedStyle()
  : window.currentStyle;

事件委托机制

主要是将事件委托给父元素 在父元素内使用 target 进行判断当前点击的是那个元素 再做相关操作

//利用事件委托机制我给ul添加
var box = document.getElementById("box");
box.onclick = function (e) {
  //通过e.target找到你点击的目标元素 来进行操作
  console.log(e.target.innerText); //目标元素
};

拖拽的实现

主要运用的是 onmousedown onmousemove onmouseup

搜索