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 详解的更多相关文章

  1. Day04 dom详解及js事件

    day04 dom详解 DOM的基础 Document对象 Element对象 Node对象 innerHTML 事件处理 表单验证   上次课内容回顾: JS中ECMAScript用法: JS定义变 ...

  2. JavaScript(2)---DOM详解

    JavaScript(2)---DOM详解 一.DOM概念 什么是DOM DOM全称为文本对象模型(Document Object Model),它定义了所有HTML元素的对象和属性,以及访问他们的方 ...

  3. JavaScript进阶内容——DOM详解

    JavaScript进阶内容--DOM详解 当我们已经熟练掌握JavaScript的语法之后,我们就该进入更深层次的学习了 首先我们思考一下:JavaScript是用来做什么的? JavaScript ...

  4. js对象详解(JavaScript对象深度剖析，深度理解js对象)

    js对象详解(JavaScript对象深度剖析,深度理解js对象) 这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕 ...

  5. 虚拟DOM详解

    虚拟DOM简介 Virtual Dom可以看做一棵模拟了DOM树的JavaScript对象树,其主要是通过vnode,实现一个无状态的组件,当组件状态发生更新时,然后触发Virtual Dom数据的变 ...

  6. 虚拟Dom详解 - (二)

    第一篇文章中主要讲解了虚拟DOM基本实现,简单的回顾一下,虚拟DOM是使用json数据描述的一段虚拟Node节点树,通过render函数生成其真实DOM节点.并添加到其对应的元素容器中.在创建真实DO ...

  7. 虚拟Dom详解 - (一)

    随着Vue和React的风声水起,伴随着诸多框架的成长,虚拟DOM渐渐成了我们经常议论和讨论的话题.什么是虚拟DOM,虚拟DOM是如何渲染的,那么Vue的虚拟Dom和React的虚拟DOM到底有什么区 ...

  8. Node.js npm 详解

    一.npm简介 安装npm请阅读我之前的文章Hello Node中npm安装那一部分,不过只介绍了linux平台,如果是其它平台,有前辈写了更加详细的介绍. npm的全称:Node Package M ...

  9. Vue.js项目详解

    还是以Blog项目来讲解,最近我本人利用闲暇时间,以博客作为参考学习一些新的技术并尝试之前没有尝试过的思路来玩玩. 技术看似枯燥,但是带有一个目的来学,你会发现还是蛮有趣的. 主要实践的就是前后端分离 ...

随机推荐

  1. 原生JavaScript如何解决父元素查找指定类名的子元素的问题

    问题:已知一个元素的类名是right并且这个元素的祖先元素的类名为parent,现在想通过原生JavaScript获得这个类名为right的元素. 我的思路:利用递归.先判断已知的祖先元素(题中的pa ...

  2. C#高级编程学习一-----------------第五章泛型

    三层架构之泛型应用 概述 1.命名约定 泛型类型以T开头或就是T. 2.泛型类 2.1.创建泛型类

  3. 设计模式学习(三): 装饰者模式 (附C#实现)

    需求 做一个咖啡店的订单系统. 买咖啡时,可以要求加入各种调料,如奶,豆浆,摩卡等.咖啡店会根据调料的不同收取不同的费用.订单系统要考虑这些. 初版设计 然后下面就是所有的咖啡....: cost方法 ...

  4. 【转自Testerhome】iOS 真机如何安装 WebDriverAgent

    开始 尽量升级Xcode到最新版,保持iPhone的版本大于9.3 从github上下载代码 git clone https://github.com/facebook/WebDriverAgent ...

  5. 【RMQ】洛谷P3379 RMQ求LCA

    题目描述 如题,给定一棵有根多叉树,请求出指定两个点直接最近的公共祖先. 输入输出格式 输入格式: 第一行包含三个正整数N.M.S,分别表示树的结点个数.询问的个数和树根结点的序号. 接下来N-1行每 ...

  6. HTML5——localStorage

    html5的学习,忘记的差不多了,特地拿出来重新记录一下,从它的本地存储开始吧! 假设这样的html结构: <div id= "one_storage" class=&quo ...

  7. JavaScript基础知识（数据类型及转换、运算符）

    9.数据类型 概念:表示当前存储的数据的分类(表示数字 - 整数和小数) u  原始类型(原始值) -----[typeof运算符:判断变量的原始类型] *number(数字):表示数字        ...

  8. 【JavaScript数组】

    1.什么是数组--Array 数组就是一组数据的集合 其表现形式就是内存中的一段连续的内存地址 数组名称其实就是连续内存地址的首地址 2.关于js中的数组特点 数组定义时无需指定数据类型 数组定义时可 ...

  9. 浅析ASCII、Unicode和UTF-8三种常见字符编码

    什么是字符编码? 计算机只能处理数字,如果要处理文本,就必须先把文本转换为数字才能处理.最早的计算机在设计时采用8个比特(bit)作为一个字节(byte),所以,一个字节能表示的最大的整数就是255( ...

  10. [bzoj1705] [Usaco2007 Nov]Telephone Wire 架设电话线

    正常DP.. f[i][j]表示前i个电线杆,把第i个电线杆高度改为j的最少总费用.设原来电线杆高度为h[] f[i][j]=min{ f[i-1][k]+C*|j-k|+(j-h[i])^2,(k& ...