DOM事件机制进一步理解

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <style type=&…

前言本文主要介绍DOM事件级别.DOM事件模型.事件流.事件代理和Event对象常见的应用,希望对你们有些帮助和启发! 本文首发地址为GitHub博客,写文章不易,请多多支持与关注! 一.DOM事件级别 DOM级别一共可以分为四个级别:DOM0级.DOM1级.DOM2级和DOM3级.而DOM事件分为3个级别:DOM 0级事件处理,DOM 2级事件处理和DOM 3级事件处理.由于DOM 1级中没有事件的相关内容,所以没有DOM 1级事件. 1.DOM 0级事件 el.onclick=functi…

深入理解DOM事件机制系列第三篇——事件对象

× 目录 [1]获取 [2]事件类型 [3]事件目标[4]事件代理[5]事件冒泡[6]事件流[7]默认行为前面的话在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.所有浏览器都支持event对象,但支持方式不同.本文将详细介绍事件对象获取事件对象 [1]一般地,event对象是事件程序的第一个参数 [注意]IE8-浏览器不支持 //IE8-浏览器输出undefined,其他浏览器则输出事件对象[object MouseEvent] <div i…

系统学习DOM事件机制

本文将从以下几个方面介绍DOM事件: 基本概念:DOM事件的级别 DOM事件模型,事件流描述DOM事件捕获的具体流程 Event对象的常见应用自定义事件 DOM事件的级别 //DOM0 element.onclick = function(){} //DOM2 element.addEventListener('click',function(){},false) //DOM3 element.addEventListener('onmouseover',function(){},false…

DOM事件机制(事件捕获和事件冒泡和事件委托)

内容: 1.事件复习 2.事件冒泡与事件捕获 3.事件委托 1.事件复习 (1)事件事件是用来处理响应的一个机制,这个响应可以来自于用户(点击, 鼠标移动, 滚动), 也可以来自于浏览器下面的链接描述了所有事件:https://developer.mozilla.org/en-US/docs/Web/Events (2)事件绑定事件绑定有3种方法,前两钟方法在这里不介绍,主要看第三种: addEventListener方法(使用事件监听绑定事件) addEventListener: 1 e…

DOM 事件机制&事件委托

一.事件机制事件是在编程时系统内发生的动作或者发生的事情,系统会在事件出现的时候触发某种信号并且会提供一个自动加载某种动作的机制(来自MDN).每个事件都有事件处理器(有时也叫事件监听器),也就是触发事件时运行的代码块.严格来说事件监听器监听事件是否发生,然后事件处理器对事件做出反应. 二.DOM事件流事件传播是一种机制,用于定义事件如何传播或通过DOM树传播,事件传播有两种方式:事件捕获(Capture)和事件冒泡(Bubble).事件传播形式上有三个阶段: 捕获阶段:从窗口进入事件目标阶…

DOM事件机制解惑(摘)--事件的传播机制

DOM事件流为什么是有事件流? 假如在一个button上注册了一个click事件,又在其它父元素div上注册了一个click事件,那么当我们点击button,是先触发父元素上的事件,还是button上的事件呢,这就需要一种约定去规范事件的执行顺序,就是事件执行的流程. 浏览器在发展的过程中出现实了两种不同的规范 IE9以下的IE浏览器使用的是事件冒泡,先从具体的接收元素,然后逐步向上传播到不具体的元素. Netscapte采用的是事件捕获,先由不具体的元素接收事件,最具体的节点最后才接收到事件…

从八道面试题看JavaScript DOM事件机制

As we all know,事件机制其实很简单,无非冒泡和捕获这两点,笔者不再赘述,网上相关文章一大堆,下面让我们直接看面试题题目一到七,统一设置css .test2 { height: 50px; } 题目一 <div class="test1"> <div class="test2"></div> </div> <script> document.querySelector('.test1').ad…

深入理解DOM事件机制系列第四篇——事件模拟

× 目录 [1]引入 [2]模拟机制 [3]自定义事件前面的话事件是网页中某个特别的瞬间,经常由用户操作或通过其他浏览器功能来触发.但实际上,也可以使用javascript在任意时刻来触发特定的事件,而此时的事件就如同浏览器创建的事件一样.本文将详细介绍事件模拟引入以下面的实际需求为例,来详细说明事件模拟的使用.按钮一的点击效果是弹出1.而我们通过新增按钮二来模拟按钮一的效果 <button id="btn1">按钮一</button> <scri…

深入理解DOM事件机制系列第二篇——事件处理程序

× 目录 [1]HTML [2]DOM0级 [3]DOM2级[4]IE[5]总结前面的话事件处理程序又叫事件侦听器,实际上就是事件的绑定函数.事件发生时会执行函数中相应代码.事件处理程序有HTML事件处理程序.DOM0级事件处理程序.DOM2级事件处理程序和IE事件处理程序四类,下面将详细介绍该部分内容 HTML事件处理程序某个元素支持的每种事件,都可以使用一个与相应事件处理程序同名的HTML特性来指定.这个特性的值应该是能够执行的JavaScript代码在事件处理程序函数内部,this…

【DOM事件机制进一步理解】的更多相关文章