JS 事件、事件处理程序、事件流、事件对象

七彩冰淇淋与藕汤

已于 2022-04-10 15:05:50 修改

阅读量181

点赞数

文章标签： javascript html html5

于 2021-10-09 21:30:53 首次发布

本文链接：https://blog.csdn.net/qq_36582776/article/details/120679340

版权

事件：

事件是文档或者浏览器窗口中发生的，特定的交互瞬间。

事件是用户或浏览器自身执行的某种动作，如click,load和mouseover都是事件的名字。

事件是javaScript和DOM之间交互的桥梁。

事件处理程序

响应某个事件的函数就叫事件处理程序（也叫事件处理函数、事件句柄）

onClick 单击事件

onMouseOut 鼠标移出事件

onMouseOver 鼠标经过事件

onChange 文本内容改变

onSelect 文本框选中

onFocus 光标聚集

onBlur 移开光标

onLoad 网页加载事件（body中调用）

onUnload 关闭网页事件（body中调用）

DOM事件大全：HTML DOM 事件包括哪些 - summer_xbc - 博客园

JS绑定事件三种方式：

1.HTML级：在HTML中绑定

<input type="button" onClick="myFun()">

2.DOM0级：在js中绑定，覆盖绑定，只执行最后一个绑定

let button1 = document.getElementById("btn1")
button1.onclick = function() { console.log("执行了js绑定的事件") }
//将覆盖之前绑定的onclick事件
button1.onclick = function() { console.log("执行了js绑定的第二个事件") }

3.DOM2级：利用添加事件监听为对象添加事件。addEventListener绑定，可以绑定多个

let button2 = document.getElementById("btn2")
//使用addEventListener（）可为一个元素绑定多个事件
button2.addEventListener("mouseover", func1, false)
button2.addEventListener("click", func2, false)
button2.addEventListener("click", func3, false)
function func1() {
      console.log(button2)
}
function func2() {
      console.log(Date())
}
function func3() {
      console.log("---------------")
}

IE8.0及其以下版本不支持该方法，它使用attachEvent()来绑定事件监听函数。

function addEvent(obj,type,handle){
    try{  // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
        obj.addEventListener(type,handle,false);
    }catch(e){
        try{  // IE8.0及其以下版本
            obj.attachEvent('on' + type,handle);
        }catch(e){  // 早期浏览器
            obj['on' + type] = handle;
        }
    }
}

事件流：

事件流描述的是从页面中接收事件的顺序。事件发生时会在元素节点与根节点之间按照特定的顺序传播，路径所经过的所有节点都会收到该事件，这个传播过程即DOM事件流。

1.两种事件流模型

1.事件传播的顺序对应浏览器的两种事件流模型：捕获型事件流和冒泡型事件流。

冒泡型事件流：事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。【推荐】
捕获型事件流：事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。

事件冒泡：（第三个参数是false的时候是冒泡）

var body=document.getElementsByTagName('body')[0];
 
window.addEventListener('click',function(){
        console.log('window')
},false)
 body.addEventListener('click',function(){
        console.log('body')
},false)
 
var oDiv=document.getElementsByTagName('div')[0];
 oDiv.addEventListener('click',function(){
    console.log(1)
 },false)
 
oDiv.addEventListener('click',function(){
  console.log(2)
},false)

点击div运行结果

事件捕获：（第三个参数是false的时候是冒泡）

var body=document.getElementsByTagName('body')[0];
 
window.addEventListener('click',function(){
        console.log('window')
},true)
 body.addEventListener('click',function(){
        console.log('body')
},true)
 
var oDiv=document.getElementsByTagName('div')[0];
 oDiv.addEventListener('click',function(){
    console.log(1)
 },true)
 
oDiv.addEventListener('click',function(){
  console.log(2)
},true)

点击div运行结果

2.DOM标准规定事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。

事件捕获阶段：实际目标（<div>）在捕获阶段不会接收事件。也就是在捕获阶段，事件从document到<html>再到<body>就停止了。上图中为1~3.
处于目标阶段：事件在<div>上发生并处理。但是事件处理会被看成是冒泡阶段的一部分。
冒泡阶段：事件又传播回文档。

并非所有的事件都会经过冒泡阶段。所有的事件都要经过捕获阶段和处于目标阶段，但是有些事件会跳过冒泡阶段：如，获得输入焦点的focus事件和失去输入焦点的blur事件。

2.事件流的典型应用事件代理

1.事件代理的原理用到的就是事件冒泡和目标元素，把事件处理器添加到父元素，等待子元素事件冒泡，并且父元素能够通过target（IE为srcElement）判断是哪个子元素，从而做相应处理。

2. 总结一下事件代理的好处：

将多个事件处理器减少到一个，因为事件处理器要驻留内存，这样就提高了性能。想象如果有一个100行的表格，对比传统的为每个单元格绑定事件处理器的方式和事件代理（即table上添加一个事件处理器），不难得出结论，事件代理确实避免了一些潜在的风险，提高了性能。
DOM更新无需重新绑定事件处理器，因为事件代理对不同子元素可采用不同处理方法。如果新增其他子元素（a,span,div等），直接修改事件代理的事件处理函数即可，不需要重新绑定处理器，不需要再次循环遍历。

javaScript事件（一）事件流 - starof - 博客园

事件对象：

target 、srcElemrnt

var ele=event.target || event.srcElement; 
//获取目标元素，DOM中用target,IE中用srcElement

七彩冰淇淋与藕汤

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫