在DOM事件深入浅出(一)中,我主要给大家讲解了不同DOM级别下的事件处理程序,同时介绍了事件冒泡和捕获的触发原理和方法.本文将继续介绍DOM事件中的知识点,主要侧重于DOM事件中Event对象的属性和方法. 那么什么是DOM事件中Event对象呢?事件对象(event object)指的是与特定事件相关且包含该事件详细信息的对象.我们可以通过传递给事件处理程序的参数获取事件触发后所产生的一系列方法和属性. Event对象 Event对象其实是一个事件处理程序的参数,当调用事件时,我们只需要将其…

在项目开发时,我们时常需要考虑用户在使用产品时产生的各种各样的交互事件,比如鼠标点击事件.敲击键盘事件等.这样的事件行为都是前端DOM事件的组成部分,不同的DOM事件会有不同的触发条件和触发效果.本文就将带大家深入浅出地了解DOM事件的那些属性和方法. 首先在介绍DOM事件之前我们先来认识下DOM的不同级别.针对不同级别的DOM,我们的DOM事件处理方式也是不一样的. DOM级别与DOM事件 DOM级别一共可以分为4个级别:DOM0级,DOM1级,DOM2级和 DOM3级,而DOM事件分为3个级…

今天详细讲解JavaScript中的常用事件类型和功能. 一 鼠标事件 1,  click:点击事件 等同于mousedown+mouseup,不管这两个事件间隔多久,都会触发一次click事件. 2,  mousedown:鼠标按下事件 3,  mouseup:鼠标弹起事件 4,  mouseover/mouseenter:鼠标移入事件 5,  mouseout/mouseleave:鼠标移出事件 注意:ES5添加的mouseenter和mouseleave阻止了事件冒泡. 6,  mouse…

<高性能javascript> 领悟随笔之-------DOM编程篇二 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整个页面文档.DOM编程性能一直以来都是非常受开发者关注的话题,如何编写高性能的DOM是前端开发必不可少的技能. 1.重绘与重排 当浏览器加载完页面所有的元素.js.css.图片之后会自动生成两个数据结构: 1.dom树 (图片为转载) 如图所示,dom树表示了整个页面文档的结构,通过访问dom树我们可以得到某…

你真的了解DOM事件么? 我们大家都知道,人与人之间的交流可以通过语言,文字,肢体动作,面部微表情等,但是你知道Javascript和HTML之间是通过什么进行交互的么?你又知道Javascript和HTML之间是如何进行交互的么?如果你不是那么清楚,可以看这篇文章... 前面的话: 这篇博文由浅入深,先介绍两种事件流,然后介绍常见的事件处理程序以及它们之间的差异(涉及到一个简单的兼容的处理函数),后面还会针对事件对象进行深入学习,最后则是通过DOM事件实现的小案例. 事件流: 关于事件流,简单…

前言 很久没有扯淡了,我们今天来扯淡吧. 我今天思考了一个问题,我们页面的dom树到底是如何渲染的,而CSS盒模型与javascript是否有联系,于是便想到一个问题: CSS的盒模型具有厚度么??? 该文只是一种帮助理解的说法,与官方定义不一定统一,权当扯淡 盒模型 稍微入门点的前端都知道CSS盒模型,于是我们不厌其烦的偷图来用: 这个就是我们传说中的盒模型,我们这里先把盒模型放一放,来看我们的DOM事件流 DOM事件流 在上一篇博客中,我们详细说了下javascript的事件机制:[移动端兼…

一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 前面提到,事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.响应某个事件的函数就叫事件处理程序(也叫事件处理函数.事件句柄).事件处理程序的名字以"on"开头,因此click事件的事件处理程序就是onclick,load事件的事件处理程序就是onload. 为事件指定事件处理程序的方法主要有3种. 1.html事件处理程序 首先,这种方法已经过时了.因…

一:DOM事件流: 事件流是从页面接收事件的顺序,DOM2级事件规定事件流包括三个阶段: ①事件捕获阶段:用意在于事件达到目标之前捕获它,在事件捕获阶段事件流模型:document→html→body→div ②处于目标阶段2:实际的目标到事件 ③事件冒泡阶段:由最具体的元素接收到事件,然后向上传播到较为不具体的节点.事件流模型:div →body→ html→ document 二:事件委托 事件委托顾名思义:将事件委托给另外的元素.其实就是利用DOM的事件冒泡原理,将事件绑定到目标元素的父节…

一.事件流 事件流描述的是从页面中接受事件的顺序.IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流1.事件冒泡事件冒泡,事件最开始由最具体触发事件的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上转播至最不具体的节点(文档).2.事件捕获事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件. 二.事件处理程序 1.HTML事件处理程序直接在HTML中写事件属性,缺点:HTML与js耦合在一起.2.DOM0级事件处理程序3.DOM2级事件处理程序DO…

近期温习了部分w3c上关于DOM事件的规范,发现以前有些模糊的概念更加清晰,以及受到罗胖(罗辑思维)的影响,很是想分享自己的了解的东西,希望大家给予指正或补充. 一.事件类型 参数 事件接口 初始化方法 HTMLEvents HTMLEvent iniEvent() MouseEvents MouseEvent iniMouseEvent() UIEvents UIEvent iniUIEvent() 此处为DOM2级事件,DOM3级对事件分解更加详细,后续文章继续整理. 二.事件对象 也就是所…