事件流:元素接收事件的顺序

1.事件冒泡:事件由最具体的元素开始接收,逐级向上传递到document元素。即从里到外。

2.事件捕获:由外到里,先接收的是document然后逐级向内,最后才到具体的元素。

DOM0级事件处理程序

给元素绑定一个事件:element.event = function(){};

比如:给按钮加一个点击事件,弹出这是一个按钮  var obtn = document.getElementById('btn');

obtn.onclick = function(){alert("这个是按钮");}

取消元素绑定的事件可以将执行的函数改为空     obtn.onclick = null;

0级只能绑定一个同名的事件,绑定两个及以上时,后面的会覆盖前面的,只能显示最后绑定的那个。

DOM2级事件处理程序

添加事件  addEventListenner();里面接收三个参数:事件名,执行的函数,是否冒泡(事件名不要加on;true为冒泡 false不冒泡)。

移除事件  removeEventListenner();里面也是三个参数,与添加事件的参数一致才能移除;

dom2会有兼容性问题   IE9以前版本并不识别addeventlistenner 和 removeEventListenner

ie:添加事件  attachEvent()和dettachEvent();接收两个参数:事件名(有on),执行的函数;

在使用时,通常要用能力检测:if(addEventListenenr){addEventListenenr();}else(){attachEvent();}

if(removeEventListenenr){removeEventListenenr();}else(){dettachEvent();}

dom2级可以给同一个元素绑定多个同名的事件。

DOM事件对象  event

事件对象:在触发DOM上的事件都会产生一个对象 event 里面保存着这个事件的所有内容

介绍几个常用的属性和方法:

1.type属性,用于获取事件类型 eg:obtn.onclick = function(event){alert(event.type);}  //弹出click.

2.target属性,用于获取事件目标,即被绑定事件的元素。

3.stopProgation()方法,用于阻止冒泡

4.preventDefault()方法,用于阻止默认行为    比如a元素默认是跳转到另一个页面打开url的地址

调用event.preventDefault();就不会跳转。

IE中的事件对象

1.type属性与DOM中的一致;

2.获取事件目标:srcElement属性

3.阻止事件冒泡是用cancelBubble属性  设置为true

4.阻止默认行为:returnValue属性设置为false

兼容性:ie8之前不能识别event,用的是window.event

处理办法:var event = event || window.event;

javascript自学002--DOM事件的更多相关文章

  1. 二、JavaScript语言--事件处理--DOM事件探秘

    第一章 事件流 事件:是文档或浏览器窗口中发生的.特定的交互瞬间.JavaScript和HTML之间的交互都是通过事件来实现的. 事件流:描述的是从页面中接受事件的顺序 IE:事件冒泡流 Netsca ...

  2. 二、JavaScript语言--事件处理--DOM事件探秘--下拉菜单

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. javascript总结30 :DOM事件

    事件: 1 在js中可以说一整套事件能完成一个功能: 事件的定义:当什么时候执行什么事: 使用事件的基本结构:事件源+事件类型=执行的指令 2 事件三要素:事件源 事件类型, 驱动程序(匿名函数). ...

  4. JavaScript HTML DOM 事件

    JavaScript HTML DOM 事件 HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应. 实例 Mouse Over Me 对事件做出反应 我们可以在事件发生时执行 ...

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

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

  6. javascript系列之DOM(三)---事件

    原文:javascript系列之DOM(三)---事件 事件是javascript跳动的心脏,是DOM所有成分结合的万金油.当我们在WEB 上进行某些交互时,事件也就发生了.点击某些内容,鼠标经过特定 ...

  7. 走进javascript——DOM事件

    DOM事件模型 在0级DOM事件模型中,它只是简单的执行你为它绑定的事件,比如你为某个元素添加了一个onclick事件,当事件触发时,它只是去调用我们绑定的那个方法,不再做其他的操作. 在2级DOM事 ...

  8. JavaScript DOM事件模型

    早期由于浏览器厂商对于浏览器市场的争夺,各家浏览器厂商对同一功能的JavaScript的实现都不进相同,本节内容介绍JavaScript的DOM事件模型及事件处理程序的分类. 1.DOM事件模型.DO ...

  9. JavaScript Dom 事件

    JavaScript  Dom 事件 对于事件需要注意的要点: // this标签当前正在操作的标签. this // event封装了当前事件的内容. even 常用事件 // 鼠标单击.触发事件 ...

  10. 【总结整理】JavaScript的DOM事件学习(慕课网)

    事件:在文档或者浏览器窗口中发生的一些,特定的交互瞬间 HTML和JavaScript的交互通过事件 来实现 比如:1.滚动条向下滑动,加载图片 2.图片轮播,鼠标由2-5页调换 本章内容1.理解事件 ...

随机推荐

  1. Bootstrap Table Examples

    The examples of bootstrap table http://bootstrap-table.wenzhixin.net.cn/examples/ http://www.jq22.co ...

  2. Android学习---如何创建数据库,SQLite(onCreate,onUpgrade方法)和SQLiteStudio的使用

    一.android中使用什么数据库? SQLite是遵守ACID的关系数据库管理系统,它包含在一个相对小的C程式庫中.它是D.RichardHipp建立的公有领域项目.SQLite 是一个软件库,实现 ...

  3. PE文件头

    pe文件头查看器下载与原文地址: http://www.pc6.com/softview/SoftView_109840.html PE文件入门: PE文件总的来说是由DOS文件头.DOS加载模块.P ...

  4. Python编写邮件群发(qq邮箱)

    #电子邮件操作 import poplib import smtplib from email.header import decode_header from email.mime.text imp ...

  5. command line

    command line terminal vim 编辑工具 vim 编辑命令 j 光标上移 k 光标下移 l 光标左移 h 光标右移 x / dd 删除一行 v 多行模式 :w 保存 :q 不保存退 ...

  6. M2事后分析汇报总结

    学霸网站项目Postmortem结果 M2之于M1的改进 文档和问答的整合 完成webservice 完成数据库触发器设计与完整性约束依赖(大规模) 优化学霸UI 资源的搜索 外部问题的搜索 文档的上 ...

  7. 搭建高可用mongodb集群(四)—— 分片

    按照上一节中<搭建高可用mongodb集群(三)—— 深入副本集>搭建后还有两个问题没有解决: 从节点每个上面的数据都是对数据库全量拷贝,从节点压力会不会过大? 数据压力大到机器支撑不了的 ...

  8. Android Studio使用JNI和NDK进行开发

    想要学习一下在Android Studio中进行JNI的开发,文章挺多的,但是几乎没有一个完整的说明的,中间总是有一两步漏掉.分享技术就应该完整的让读者学会,藏着掖着不是君子所为.对于那些故意含糊过去 ...

  9. 《CODE》读后笔记——第21~25章

    21.总线连接 总线是提供给计算机中每块电路板的数字信号的集合,这些信号可以分为4类:地址信号,数据输入信号,数据输出信号,控制信号.另外,总线给计算机中的各个电路板提供电源. S-100总线:早期流 ...

  10. Servlet知识

    1.Servlet概述 2.编写Servlet的开发步骤a.建立标准的JavaWeb应用目录FirstAppWEB-INFclasseslibweb.xmlb.编写一个类,实现javax.servle ...