javascript之事件模型
事件模型
冒泡型事件(Bubbling):事件由叶子节点沿祖先节点一直向上传递到根节点
捕获型事件(Capturing):由DOM树最顶元素一直到最精确的元素,与冒泡型事件相反
DOM标准事件模型:DOM标准既支持冒泡型事件,也支持捕获型事件,可以说是两者的结合体,首先是捕获型,接着冒泡传递
事件对象
在IE浏览器中事件对象是window的一个属性,在DOM标准中,event必须作为唯一的参数传给事件处理函数
获得兼容的event 对象:
function(event){ //event 是作为DOM标准的参数传入处理函数 event = event ?event : window.event; }在IE中,事件的对象包含在event的srcElement中,而在DOM标准中,对象包含在target属性中
获得兼容的event 对象指向的元素:
var target =event.srcElement ? event.srcElement : event.target ;前提是,保证event对象已经正确的获取
事件监听器
IE下,注册的监听器逆序执行,即后面注册的先执行
element.attachEvent('onclick',observer); //注册监听器 element.detachEvent('onclick',observer) //移除监听器第一个参数为事件名称,第二个为回调处理函数
DOM标准下:
element.addEventListener('click',observer,useCapture) element.removeEventListener('click',observer,useCapture)第一个参数为事件名称,没有“on”的前缀,第二个参数为回调处理函数,第三个参数说明回调函数是在捕获阶段调用还是冒泡阶段调用,默认true为捕获阶段
事件传递
兼容地取消浏览器的事件传递
function someHandler(event){ event = event || window.event; if(event.stopPropagation) //DOM标准 event.stopPropagation(); else event.cancelBubble = true; //IE标准 }取消事件传递后的默认处理
function someHandler(event){ event = event || window.event; if(event.preventDefault) //DOM标准 event. preventDefault (); else event.returnValue = true; //IE标准 }
javascript之事件模型的更多相关文章
- JavaScript DOM 事件模型
JavaScript DOM 事件模型 JavaScript 是基于面向对象和事件驱动的一门语言,事件模型是 DOM 中至关重要的内容,理解事件驱动机制.事件反馈.事件冒泡.事件捕获以及事件委托能帮助 ...
- JavaScript DOM事件模型
早期由于浏览器厂商对于浏览器市场的争夺,各家浏览器厂商对同一功能的JavaScript的实现都不进相同,本节内容介绍JavaScript的DOM事件模型及事件处理程序的分类. 1.DOM事件模型.DO ...
- Javascript标准事件模型
本文为原创,转载请注明出处: cnzt 文章:cnzt-p http://www.cnblogs.com/zt-blog/p/6676913.html 1. 分类 IE -- 冒泡型 现代 ...
- 说说JavaScript中的事件模型
1.javascript中为元素添加事件处理程序的方法有以下几种方式,可以为javascript元素添加事件处理程序 (1) 直接将事件处理代码写在html中(2) 定义一个函数,赋值给html元素的 ...
- Javascript知识——事件
O(∩_∩)O~~又是新的一周开始了,今天还是在继续学习Javascript知识,今天主要讲了事件的知识.现在就总结下吧. 事件 事件一般是用于浏览器和用户操作进行交互.最早是 IE 和 Netsca ...
- 走进javascript——DOM事件
DOM事件模型 在0级DOM事件模型中,它只是简单的执行你为它绑定的事件,比如你为某个元素添加了一个onclick事件,当事件触发时,它只是去调用我们绑定的那个方法,不再做其他的操作. 在2级DOM事 ...
- JavaScript的事件概述以及事件对象,事件流
事件处理程序 JavaScript 事件对象是由访问 Web 页面的用户引起的一系列操作,例如:用户点击页面上的某个按钮或者鼠标移动到页面的某个图片上而产生一系列的互动的反馈. 我们通过为指定事件绑定 ...
- JavaScript笔记——事件
事件一般是用于浏览器和用户操作进行交互.最早是 IE 和 Netscape Navigator 中出现, 作为分担服务器端运算负载的一种手段.直到几乎所有的浏览器都支持事件处理.而 DOM2 级规范开 ...
- 【repost】JavaScript 事件模型 事件处理机制
什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击 ...
随机推荐
- 8.QT-对话框(模态与非模态)
对话框介绍 对话框是于用户进行简易交互的顶层窗口 QDialog是Qt中所有对话框窗口的父类,是一种容器类型的组件 QDialog继承于QWidget类,如下图所示: QWidget和QDialog有 ...
- 入口文件开始,分析Vue源码实现
Why? 网上现有的Vue源码解析文章一搜一大批,但是为什么我还要去做这样的事情呢?因为觉得纸上得来终觉浅,绝知此事要躬行. 然后平时的项目也主要是Vue,在使用Vue的过程中,也对其一些约定产生了一 ...
- ES6(数组)
ES6数组新增特性 1. 空数组 2.将伪数组转换成真正的数组 将 p 标签集合转换成真正数组 类似于map的用法,转换数组同时还在遍历. 3.填充数组(将所有数组换成一个值) 1代表起始位置,3代表 ...
- three.js 3D 动画场景
Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机.光影.材质等各种对象.使用它它能让 WebGL 变得更加简单. 下面用Three.js渲染一个物体360 ...
- java 学习笔记2 面向对象(上)
类和对象 类是某一批对象的抽象,可以把类理解成某种概念.对象是一个具体存在的实体.类和对象是面向对象的核心. 类定义的是多个实例的特征,类不是具体存在,实例才是具体存在. 定义类(class)的语法: ...
- ServiceStack 简单服务搭建
1:定义数据实体 因为ServiceStack是基于请求参数来定义请求路由的,所以关键的是请求参数一定要定义好,同时可以在请求参数上自定义路由名和请求方式,作为对外接口名 上代码: namespace ...
- Java基础学习(1)——反射
反射就是把Java类中的各种成分映射成相应的Java类(主要用于框架开发) 反射的基石–>Class类 Java程序中的各个类属于同一事物,描述这类事务的Java类名就是Class. Class ...
- JavaScript基础知识从浅入深理解(一)
JavaScript的简介 javascript是一门动态弱类型的解释型编程语言,增强页面动态效果,实现页面与用户之间的实时动态的交互. javascript是由三部分组成:ECMAScript.DO ...
- Django REST Framework 最佳实践
Django REST framework 是一个强大且灵活的工具包,用以构建Web APIs. 为什么要使用REST framework? - 在线可视的API,对于赢得你的开发者们十分有用 - 验 ...
- Android开发学习之路--性能优化之布局优化
Android性能优化方面也有很多文章了,这里就做一个总结,从原理到方法,工具等做一个简单的了解,从而可以慢慢地改变编码风格,从而提高性能. 一.Android系统是如何处理UI组件的更新操作的 ...