在各种浏览器中存在三种事件模型：原始事件模型，DOM2事件模型，IE事件模型。其中原始的事件模型被所有浏览器所支持，而DOM2中所定义的事件模型目前被除了IE以外的所有主流浏览器支持。

　　浏览器事件模型分为三个阶段

　　1.捕获阶段

　　2.目标阶段

　　3.冒泡阶段

　　DOM节点获取方法：

　　1.通过id获取  document.getElementById()

　　2.通过name属性获取  document.getElementsByName()

　　3.通过标签名获取   document.getElementsByTagName()

　　4.通过class属性获取   document.getElementsByClassName()

　　5.原生js中的querySelector  和   qureySelectorALL方法也是同样可以获取相应的dom节点，相似与jQuery，但比jq更快

简单概括下浏览器事件模型，如何获得资源dom节点的更多相关文章

  1. React对比Vue（03 事件的对比，传递参数对比，事件对象，ref获取DOM节点，表单事件，键盘事件，约束非约束组件等)

    import React from 'react'; class Baby extends React.Component { constructor (props) { super(props) t ...

  2. Vue 双向数据绑定、事件介绍以及ref获取dom节点

    vue是一个MVVM的框架 M model V view MVVM  model改变会影响视图view,view改变会影响model 双向数据绑定必须在表单里面使用 //我发现在谷歌浏览器翻译后的网页 ...

  3. 简单概括下MongoDB 4.0 新特性

    (1)跨文档事务支持 (ACID) 首个支持跨文档事务的NoSQL云数据库,将文档模型的速度,灵活性和功能与ACID保证相结合.现在,使用MongoDB解决各种用例变得更加容易. (2)40%迁移速度 ...

  4. Javascript事件模型(一)：DOM0事件和DOM2事件

    javascript事件模型,本文主要有以下内容: DOM0事件模型 DOM2事件模型  一.DOM0事件模型 早期的事件模型称为DOM0级别. DOM0的事件具有极好的跨浏览器优势, 会以最快的速度 ...

  5. 理解javascript中的事件模型

    javascript中有两种事件模型:DOM0,DOM2.而对于这两种的时间模型,我一直不是非常的清楚,现在通过网上查阅资料终于明白了一些. 一.  DOM0级事件模型 DOM0级事件模型是早期的事件 ...

  6. javascript中0级DOM和2级DOM事件模型浅析

    Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button&q ...

  7. 轻松学习JavaScript二十七：DOM编程学习之事件模型

    在介绍事件模型之前,我们先来看什么是事件和什么是event对象. 一事件介绍 JavaScript事件是由訪问Web页面的用户引起的一系列操作,使我们有能力创建动态页面.事件是能够被 JavaScri ...

  8. javascript中0级DOM和2级DOM事件模型浅析 分类： C1_HTML/JS/JQUERY 2014-08-06 15:22 253人阅读 评论(0) 收藏

    Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button&q ...

  9. jQuery (01) 浏览器的事件模型

    浏览器的事件模型 由网景公司引入的 DOM0 级事件模型 把事件处理程序绑定到 DOM 元素的属性上: ele.onclick(); ele.onDOMContentLoad(); ele.onloa ...

随机推荐

  1. 爬取豆瓣电影Top250信息

    # -*- coding:utf-8 -*- __author__ = "MuT6 Sch01aR" import requests from pyquery import PyQ ...

  2. linux 修改openfiles

    使用ulimit -a 可以查看当前系统的所有限制值,使用ulimit -n 可以查看当前的最大打开文件数. 新装的linux默认只有1024,当作负载较大的服务器时,很容易遇到error: too ...

  3. jquery与原生js比较

    以选择符为例,类似于这种 $(".class") 方式,在ie里面,肯定比$("#id") 低很多,而对于chrome和firefox,则因为提供了getEle ...

  4. selenium2 用testNG对百度首页输入框进行测试 （三）

    如果还没有安装testNG的亲,可以点击http://www.cnblogs.com/milanmi/p/4346580.html查看安装过程. 这节主要是对百度首页的输入框进行输入测试. packa ...

  5. java代理模式与装饰者模式

    静态代理和装饰者模式的区别: 先来看一下装饰者模式的定义:装饰者模式动态地将责任附加到对象上.若要扩展功能,装饰者提供了比继承更有弹性的替代方案. 总结一下采用装饰者模式是为了增强或拓展原对象的功能. ...

  6. javascript总结18:javascript DOM简介

    1 HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应.在事件发生时,执行JavaScript 方法,做出交互. 2 格式: onclick=JavaScript脚本 3 H ...

  7. UIView 和 CALayer区别 为啥有UIView还要CALayer?

    今天,被坑了,面试的时候没回答出来,特此记录一下 一.继承结构 1: UIView的继承结构为: UIResponder : NSObject UIResponder是用来响应事件的,也就是UIVie ...

  8. K860i的109升级需要的PinyinIME.apk和QuickSearchBox.apk两个文件

    联想K860i的109版本终于可以正常更新了,感谢下乐Phone之家的蚊子咬(http://bbs.lephone.cc/space-uid-6410.html)提供了关键的两个文件:PinyinIM ...

  9. Java实现四则运算 谢雅淇 袁杏仪

    GitHub链接:https://github.com/3216004716/four-operations.git 项目相关要求 使用 -n 参数控制生成题目的个数,例如 Myapp.exe -n ...

  10. .net Stream篇（五）

    MemoryStream 目录: 1 简单介绍一下MemoryStream 2 MemoryStream和FileStream的区别 3 通过部分源码深入了解下MemoryStream 4 分析Mem ...