Js DOM 详解
DOM事件类
基本概念 DOM事件的级别
1.DOM0 element.onclick = function(){}
2.DOM2 element.addEventListener("click",function(){},false)
3.DOM3 element.addEventListener("key",function(){},falses)
一、DOM事件模型
1.捕获
2.冒泡
二、DOM事件流
当浏览器和用户交互的时候
事件捕获 - 目标 - 冒泡
三、描述DOM事件捕获的具体流程
具体流程： window - document - html - boby - element
四、Event对象的常见应用
elent.preventDefault() 阻止默认事件
elent.stopPropagation() 阻止冒泡流
elent.stopImmediatePropagation() 可以阻止当前事件向祖辈元素的冒泡传递，也就是说该事件不会触发执行当前元素的任何祖辈元素的任何事件处理函数。
elent.currentTarge() 当前被点击的元素
elent.target()
当前被绑定的元素 （父元素）
五、自定义事件
var eve = new Event("custome");
ev.addEventListener("custome",function(){
console.log("custome");
})
触发：
ev.dispatchEvent(eve);
代码演示
<body>
<div id="ev">
<style type="text/css">
#ev{
width: 300px;
height:100px;
background: red;
color: #fff;
text-align: center;;
line-height: 100px;
}
</style>
目标元素
</div>
<script type="text/javascript">
// 捕获的流程 window-document - body - html - ev
// **如果是冒泡 把 true 改为false
// window
var ev = document.getElementById("ev");
window.addEventListener("click",function(){
console.log("window captrue");
},true);
// document
document.addEventListener("click",function(){
console.log("document captrue");
},true);
// body
document.documentElement.addEventListener("click",function(){
console.log("body captrue");
},true)
// html
document.documentElement.addEventListener("click",function(){
console.log("html captrue");
},true)
// body
document.documentElement.addEventListener("click",function(){
console.log("body captrue");
},true)
// click
ev.addEventListener("click",function(){
console.log("ev captrue");
},true)
// 自定义事件
var ev = new Event("test");
ev.addEventListener("test",function () {
console.log("test dispath");
})
ev.dispatchEvent(eves);
</script>
</body>
当点击触发div时候，事件发生的顺序为：
window captrue
js.dom.html:54 document captrue
js.dom.html:62 body captrue
js.dom.html:69 html captrue
js.dom.html:76 body captrue
js.dom.html:83 ev captrue
Js DOM 详解的更多相关文章
- Day04 dom详解及js事件
day04 dom详解 DOM的基础 Document对象 Element对象 Node对象 innerHTML 事件处理 表单验证 上次课内容回顾: JS中ECMAScript用法: JS定义变 ...
- JavaScript(2)---DOM详解
JavaScript(2)---DOM详解 一.DOM概念 什么是DOM DOM全称为文本对象模型(Document Object Model),它定义了所有HTML元素的对象和属性,以及访问他们的方 ...
- JavaScript进阶内容——DOM详解
JavaScript进阶内容--DOM详解 当我们已经熟练掌握JavaScript的语法之后,我们就该进入更深层次的学习了 首先我们思考一下:JavaScript是用来做什么的? JavaScript ...
- js对象详解(JavaScript对象深度剖析，深度理解js对象)
js对象详解(JavaScript对象深度剖析,深度理解js对象) 这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕 ...
- 虚拟DOM详解
虚拟DOM简介 Virtual Dom可以看做一棵模拟了DOM树的JavaScript对象树,其主要是通过vnode,实现一个无状态的组件,当组件状态发生更新时,然后触发Virtual Dom数据的变 ...
- 虚拟Dom详解 - (二)
第一篇文章中主要讲解了虚拟DOM基本实现,简单的回顾一下,虚拟DOM是使用json数据描述的一段虚拟Node节点树,通过render函数生成其真实DOM节点.并添加到其对应的元素容器中.在创建真实DO ...
- 虚拟Dom详解 - (一)
随着Vue和React的风声水起,伴随着诸多框架的成长,虚拟DOM渐渐成了我们经常议论和讨论的话题.什么是虚拟DOM,虚拟DOM是如何渲染的,那么Vue的虚拟Dom和React的虚拟DOM到底有什么区 ...
- Node.js npm 详解
一.npm简介 安装npm请阅读我之前的文章Hello Node中npm安装那一部分,不过只介绍了linux平台,如果是其它平台,有前辈写了更加详细的介绍. npm的全称:Node Package M ...
- Vue.js项目详解
还是以Blog项目来讲解,最近我本人利用闲暇时间,以博客作为参考学习一些新的技术并尝试之前没有尝试过的思路来玩玩. 技术看似枯燥,但是带有一个目的来学,你会发现还是蛮有趣的. 主要实践的就是前后端分离 ...
随机推荐
- css中的 nav ul li ul 与 nav>ul>li 这两种写法的区别
<nav> <ul id="a"> <li>a1</li> <li>a2</li> <li>a3 ...
- Java学习笔记6（循环和数组练习题）
1.输出100到1000的水仙花数: public class LoopTest{ public static void main(String[] args){ int bai = 0; int s ...
- C#串口发送数据
使用指定的端口名.波特率.奇偶校验位.数据位和停止位初始化 SerialPort 类的新实例 SerialPort serialPort = new SerialPort("COM3&quo ...
- 5、ABPZero系列教程之拼多多卖家工具 修改User表结构
毕竟这个框架是外国人开发的,对于我们国人来说还是有些地方并不合适,就好比如注册时需要填写名字.姓氏一样,今天要说的就是如何去掉这2个字段. 先看如下修改完成的效果图 User表结构修改 修改User类 ...
- 用Vue开发一个实时性时间转换功能，看这篇文章就够了
前言 最近有一个说法,如果你看见某个网站的某个功能,你就大概能猜出背后的业务逻辑是怎么样的,以及你能动手开发一个一毛一样的功能,那么你的前端技能算是进阶中高级水平了.比如咱们今天要聊的这个话题:如何用 ...
- CountDownLatch源码解析
一.CountDownLatch介绍 CountDownLatch是在jdk1.5被引入的,它主要是通过一个计数器来实现的,当在初始化该类的构造函数时,会事先传入一个状态值,之后在执行await方法后 ...
- django命令(笔记，自己看的）
新建一个项目,名字为mysite:django-admin.py startproject mysite 新建一个应用App,名字为apppython manage.py startapp learn ...
- 如何上传webshell后改回原来的webshell的格式
一般后台不给允许上传php,asp格式的东东 所以我们要把木马改为jpg格式 记录下上传的路径 我们上传后木马因为格式不对不能被正确解析,我们可以利用网站的备份数据库模式恢复格式 在备份数据库那填上我 ...
- [bzoj3233] [Ahoi2013]找硬币
一开始没什么思路...后来想到确定最大硬币面值就知道其他面值能取多少了..而且结果是可以由较小的面值转移过来的. f[i]表示最大面值为i时的最小硬币数.a[i]表示第i个物品的价钱. f[i]=mi ...
- BZOJ 2823: [AHOI2012]信号塔
题目:http://www.lydsy.com/JudgeOnline/problem.php?id=2823 随机增量法.不断加点维护圆,主要是三点共圆那里打得烦(其实也就是个两中垂线求交点+联立方 ...