JavaScript - DOM 事件

一只小网虫

已于 2022-04-25 15:17:06 修改

阅读量93

点赞数 1

分类专栏： JavaScript DOM操作文章标签： javascript vscode

于 2021-10-10 22:46:26 首次发布

本文链接：https://blog.csdn.net/m0_48407729/article/details/120693550

版权

JavaScript DOM操作专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、事件

1.1 什么是事件?

当用户与 web 页面进行某些类型的交互时,事件就会发生.

1.2 事件类型

鼠标事件：
  click、dblclick、 mouseup、 mousedown、
  mouseout、 mouseover、 mousemove、contextmenu
键盘事件：
  keypress、 keyup、 keydwon  任意一个键都会有效
HTML 事件：
  load、 resize、 scroll
表单事件：
  change、 blur、 focus、input、
  select、 submit、 reset
触摸事件：
  touchstart 
1.3 事件处理程序

响应某个事件的函数就叫事件处理程序。

2、事件添加方式

2.1 DOM 0级（只支持冒泡）

添加事件方式 1：
   Element.on事件名 = function(){}
添加事件方式 2： //不推荐
  <button onclick = 'fun()'>按钮</button>
  function fun(){
  	console.log()
  }
删除事件：
  	Element.on事件名 = null
2.2 DOM 2级

添加事件 (事件监听)
  Element.addEventlistener(事件名, function,bool)
  // bool: 用于决定冒泡事件还是捕获事件
  // false 就是冒泡事件, ture 是捕获事件;
例：
  txt.addEventListener('input', fn, false)

  function fn(){
  	consolse.log();
  }

  //IE 事件监听
  Element.attachEvent(on事件名, function);
移除事件：
  Element.removeEventListener(与添加的事件名一样, 与添加的函数一样, 与添加的 bool一样)
IE 移除事件
  detachEvent(event,function)
2.3 事件流

概念：

描述的是从页面中接收事件的顺序。

分类：

1）冒泡事件：

由最具体的元素开始执行,逐级向上传递到 window 对象。
  child --> father --> body --> html --> document --> window
2）捕获事件:：

当事件发生的时候，从最外层开始执行事件，然后逐层向下传递，一直传递到最具体的元素。
  window --> document --> html --> body --> father --> child

  冒泡和捕获事件, 捕获事件优先执行。
3）W3C 标准事件流:：

当事件发生的时候, 先执行捕获,在冒泡；
  	window --> document --> html --> body --> father --> child --> father --> body --> html --> document --> window

3、事件对象

3.1 概念

代表事件的状态,比如事件发生在那个元素上面,鼠标的位置信息,按下键盘那个建等等。

事件对象只会出现由事件触发的函数里。

3.2 获取事件对象的方法
  //event就是事件对象
  //event == arguments[0];

  元素.onclick = function(event){ 
  	var e = event || window.enent;
  }
3.3 常见事件对象属性

type：事件类型

target：触发此次事件的目标元素: (点的是谁就是谁)
  e.target || e.srcElement
currentTarget：绑定当前事件的监听对象: (事件写在谁的身上就是谁)
  e.currentTarget
鼠标在浏览器内容区域的坐标点:
  e.clientX, e.clientY
鼠标相对屏幕的坐标点
  e.screenX, e.screenY
鼠标在事件元素内部的坐标点
  e.offsetX, e.offsetY
键盘码(只能是键盘事件才能获取)
  event.keyCode || event.charCode
3.4 阻止事件冒泡
  event.stopPropagation()

  event.cancelBubble = ture //IE写法
3.5 阻止默认行为(a 标签的跳转表单提交事件 )
  event.preventDefault()

  window.event.returnValue = false;   //IE写法

4、事件委托

4.1 概念

利用事件冒泡的原理，将事件添加在父元素上，通过父元素去触发事件。

4.2 好处

耦合度降低; 提高性能;
可以随时添加子元素;

4.3 使用
  list.onclick = function(e) {
  	var e = e || window.event;
  	var target = e.target || e.srcElement; // 触发事件的目标

  // if(target.nodeName.toLowerCase() == 'li') {
  if(target.className.toLowerCase() == 'item') {
  	console.log(target.innerText);
  	}
  }
总结：批量添加事件都可以使用事件委托。