12.在JavaScript中的事件模型如何理解?
一、事件与事件流
javascript
中的事件,可以理解就是在HTML
文档或者浏览器中发生的一种交互操作,使得网页具备互动性, 常见的有加载事件、鼠标事件、自定义事件等
由于DOM
是一个树结构,如果在父子节点绑定事件时候,当触发子节点的时候,就存在一个顺序问题,这就涉及到了事件流的概念
事件流都会经历三个阶段:
事件捕获阶段(capture phase)
处于目标阶段(target phase)
事件冒泡阶段(bubbling phase)
事件冒泡是一种从下往上的传播方式,由最具体的元素(触发节点)然后逐渐向上传播到最不具体的那个节点,也就是DOM
中最高层的父节点
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Event Bubbling</title></head><body><button id="clickMe">Click Me</button></body>
</html>
然后,我们给button
和它的父元素,加入点击事件
var button = document.getElementById('clickMe');button.onclick = function() {console.log('1.Button');
};
document.body.onclick = function() {console.log('2.body');
};
document.onclick = function() {console.log('3.document');
};
window.onclick = function() {console.log('4.window');
};
点击按钮,输出如下
1.button
2.body
3.document
4.window
点击事件首先在button
元素上发生,然后逐级向上传播
事件捕获与事件冒泡相反,事件最开始由不太具体的节点最早接收事件, 而最具体的节点(触发节点)最后接收事件
二、事件模型
事件模型可以分为三种:
原始事件模型(DOM0级)
标准事件模型(DOM2级)
IE事件模型(基本不用)
原始事件模型
事件绑定监听函数比较简单, 有两种方式:
HTML代码中直接绑定
<input type="button" onclick="fun()">
通过
JS
代码绑定
var btn = document.getElementById('.btn');
btn.onclick = fun;
特性
绑定速度快
DOM0
级事件具有很好的跨浏览器优势,会以最快的速度绑定,但由于绑定速度太快,可能页面还未完全加载出来,以至于事件可能无法正常运行
只支持冒泡,不支持捕获
同一个类型的事件只能绑定一次
<input type="button" id="btn" onclick="fun1()">var btn = document.getElementById('.btn');
btn.onclick = fun2;
如上,当希望为同一个元素绑定多个同类型事件的时候(上面的这个btn
元素绑定2个点击事件),是不被允许的,后绑定的事件会覆盖之前的事件
删除 DOM0
级事件处理程序只要将对应事件属性置为null
即可
btn.onclick = null;
标准事件模型
在该事件模型中,一次事件共有三个过程:
事件捕获阶段:事件从
document
一直向下传播到目标元素, 依次检查经过的节点是否绑定了事件监听函数,如果有则执行事件处理阶段:事件到达目标元素, 触发目标元素的监听函数
事件冒泡阶段:事件从目标元素冒泡到
document
, 依次检查经过的节点是否绑定了事件监听函数,如果有则执行
事件绑定监听函数的方式如下:
addEventListener(eventType, handler, useCapture)
事件移除监听函数的方式如下:
removeEventListener(eventType, handler, useCapture)
参数如下:
eventType
指定事件类型(不要加on)handler
是事件处理函数useCapture
是一个boolean
用于指定是否在捕获阶段进行处理,一般设置为false
与IE浏览器保持一致
举个例子:
var btn = document.getElementById('.btn');
btn.addEventListener(‘click’, showMessage, false);
btn.removeEventListener(‘click’, showMessage, false);
特性
可以在一个
DOM
元素上绑定多个事件处理器,各自并不会冲突
btn.addEventListener(‘click’, showMessage1, false);
btn.addEventListener(‘click’, showMessage2, false);
btn.addEventListener(‘click’, showMessage3, false);
执行时机
当第三个参数(useCapture
)设置为true
就在捕获过程中执行,反之在冒泡过程中执行处理函数
下面举个例子:
<div id='div'><p id='p'><span id='span'>Click Me!</span></p>
</div>
设置点击事件
var div = document.getElementById('div');
var p = document.getElementById('p');function onClickFn (event) {var tagName = event.currentTarget.tagName;var phase = event.eventPhase;console.log(tagName, phase);
}div.addEventListener('click', onClickFn, false);
p.addEventListener('click', onClickFn, false);
上述使用了eventPhase
,返回一个代表当前执行阶段的整数值。1为捕获阶段、2为事件对象触发阶段、3为冒泡阶段
点击Click Me!
,输出如下
P 3
DIV 3
可以看到,p
和div
都是在冒泡阶段响应了事件,由于冒泡的特性,裹在里层的p
率先做出响应
如果把第三个参数都改为true
div.addEventListener('click', onClickFn, true);
p.addEventListener('click', onClickFn, true);
输出如下
DIV 1
P 1
两者都是在捕获阶段响应事件,所以div
比p
标签先做出响应
IE事件模型
IE事件模型共有两个过程:
事件处理阶段:事件到达目标元素, 触发目标元素的监听函数。
事件冒泡阶段:事件从目标元素冒泡到
document
, 依次检查经过的节点是否绑定了事件监听函数,如果有则执行
事件绑定监听函数的方式如下:
attachEvent(eventType, handler)
事件移除监听函数的方式如下:
detachEvent(eventType, handler)
举个例子:
var btn = document.getElementById('.btn');
btn.attachEvent(‘onclick’, showMessage);
btn.detachEvent(‘onclick’, showMessage);
12.在JavaScript中的事件模型如何理解?相关推荐
- 【前端学习】前端学习第十五天:JavaScript中的事件模型
在各种浏览器中存在三种事件模型:原始事件模型.DOM事件模型和IE事件模型: 一.原始事件模型: 原始事件模型被所有浏览器支持: 在原始事件模型中.事件一旦发生就直接调用事件处理函数,事件不会向别的对 ...
- 浅谈JavaScript中的事件
事件在javascript中是响应用户的一种基本操作,本文列举了两种javascript中的事件模型及其绑定的方式,希望能对你的学习带来一点帮助.这些都是非常基础的但或许其中有你所遗漏.(以下事件均针 ...
- JavaScript学习笔记06【高级——JavaScript中的事件】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
- java基础66 JavaScript中的事件、localtion对象、screen对象(网页知识)
1.JavaScript中的事件注册 1.1.事件的注册方式 方式1:直接在html元素上注册<body onLoad="ready()"></body > ...
- javascript中浅拷贝和深拷贝的理解
javascript中浅拷贝和深拷贝的理解 什么是拷贝? 简单地说就是复制,对数据的复制 浅拷贝:改变拷贝者的值,被拷贝者的值也会变化 深拷贝:改变拷贝者的值,被拷贝者的值不会变化 由于基本数据类型是 ...
- JavaScript中call、apply个人理解
JavaScript中call.apply个人理解 一句话即通俗的说:call.apply 是为了改变this的状态而存在的 var lisi = {name:'李四',age:23};var zs ...
- JavaScript中的事件传播(DOM2标准事件模型)
在所有的现代浏览器当中--除了IE9之前的版本--都实现了DOM2标准事件模型,这个事件模型规定:每一个DOM元素所触发的事件都要经历三个阶段:一.捕获阶段:二.目标对象本身的事件处理程序调用阶段:三 ...
- 理解JavaScript中的事件
在很多语言的学习中,"事件"都是一个比较难理解,但是又是一个很重要的概念.JavaScript中的事件处理也是一样,正因为有了事件处理,才会出现Ajax拖动的效果.本文就讨论一下J ...
- javascript中的事件冒泡、事件捕获和事件执行顺序
谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有 ...
最新文章
- idea 端口被占用
- android使用桢布局,Android性能优化UI篇
- js字符串的操作方法
- mac+修改+ssh文件夹权限_用SSH指令批量修改文件夹 文件权限和拥有者
- 增长黑客系列:今天比昨天增长多少?快使用环比函数来分析日志
- Ubuntu配置静态IP
- SAP常用T-Code
- TokenInsight:反映区块链行业整体表现的TI指数较昨日同期上涨2.66%
- ASP.NET服务器控件查询
- MySQL数据库规范及解读
- escape()方法和unescape()方法
- 回顾 Firefox 历史
- 【Android驱动】aw9106驱动代码流程
- Magisk模块开发指南
- SQLite——Java使用SQLite初体验
- 用js随机生成随机车牌照
- winscp 同步_winscp以命令行方式同步服务器数据到PC机磁盘上
- 现代远程教育入学指南(石油大学)--入学篇---在线考试
- 计算机体系结构顶级会议ISCA,2017图灵奖得主展望黄金时代
- php安装oci8,php5安装oci8
热门文章
- linux如何改文件用户组权限,linux修改文件权限和用户组管理小结
- rclone unc_对于UNC科学家而言,开源是前进的道路
- 微信公众号文章、菜单如何实现一键拨号?
- Linux 下使用 C++ 实现的 Web 文件服务器
- Excel如何快速全选所有图片?
- 重试框架 Spring-Retry 和 Guava-Retry,你知道该怎么选吗?
- 天津市师范学校有计算机专业,天津工业大学,天津理工大学,天津师范大学,哪个学校的计算机专业强一点啊...
- git冲突解决(命令行)大全CTMD
- 利用网络劫持解决微信远程真机调试Api问题
- 计算机绘图教程试卷,计算机绘图教程.ppt