js中的事件部分总结
一、HTML事件
HTML事件处理就是直接在HTML标签上添加事件,举例
<p class="" onclick=function(){alert(HTML事件)}></p>
这种方式的好处是简单易懂,兼容性好。
缺点是代码的耦合性太高,不便于修改,而且一个事件只能监听一个function,多个function会被覆盖,并且事件无法删除。
二、DOM 0级处理事件
DOM 0级处理事件可以理解成通过修改标签元素的onclick属性,来加入事件。 举例
<div id="btn"></div>
<script>
var btn=document.getElementById("btn");
btn.onclick=function(){alert(DOM 0级事件)}
</script>
删除方式为
btn.onclick=null;
这种方式的优点是耦合较低,产生的问题是只能监听一个事件,容易被覆盖。
三、DOM 2级处理事件(重点)
DOM 2级处理事件是通过addEventListener(参数一,参数二,参数三)的方式添加事件
其中
参数一:事件类型,如onclick onload,但在参数一种,前面的On 需要省略。
参数二:回调函数:可以直接为某个function(){},也可以将函数提取,直接写函数名,不必添加括号
参数三:定义冒泡或捕获,true为捕获,false为冒泡,考虑到兼容器的问题(IE 678只支持冒泡,不支持捕获)在这里推荐使用false——冒泡
function Dom(){alert(“DOM 2级处理事件”)}
addEventListener("click",Dom,false);
这里删除监听的方式为
removeEventListener("click",Dom,false);
DOM 2级处理事件的有点是不会被覆盖,一次性可以添加多个监听事件,缺点是IE 8之下不可用(IE 8之下使用IE事件的处理程序)
四、 IE事件的处理程序(补充)
IE 6 7 8 9 10都支持的一种专属事件方式,通过attachEvent添加事件
举例
attachEvent(参数一,参数二)
其中参数一为事件类型,但和DOM 2级事件不同,这里的事件类型前面需要加上On
参数二为回调函数
因为是IE专属,默认为冒泡处理,所以没有参数三
举例:
function Ie(){alert(IE专属事件)}
btn.attachEvent("onclick",Ie);
删除事件用detachEvent
btn.detachEvent("onclick",Ie);
js中的事件部分总结的更多相关文章
- 怎么理解js中的事件委托
怎么理解js中的事件委托 时间 2015-01-15 00:59:59 SegmentFault 原文 http://segmentfault.com/blog/sunchengli/119000 ...
- js中冒泡事件和捕获事件
js中冒泡事件和捕获事件: 冒泡事件:冒泡事件是从里向外,即是从被绑定元素开始一直向外到达页面的所有祖先元素都会被触发,这 一过程被称为事件冒泡.这个事件从原始元素开始一直冒泡到DOM树的最上层 捕获 ...
- 看懂此文,不再困惑于 JS 中的事件设计
看懂此文,不再困惑于 JS 中的事件设计 今天刚在关注的微信公众号看到的文章,关于JS事件的,写的很详细也很容易理解,相关的知识点都有总结到,看完就有种很舒畅的感觉,该串起来的知识点都串起来了.反正一 ...
- js中冒泡事件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- DOM 以及JS中的事件
[DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...
- 从零开始的JS生活(二)——BOM、DOM与JS中的事件
上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举 ...
- js中的事件,内置对象,正则表达式
[JS中的事件分类] 1.鼠标事件: click/dbclick/mouseover/mouseout/mousemove/mousedown/mouseup 2.键盘事件: keydown: 键盘按 ...
- JS中的事件以及DOM 操作
[DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...
- JS中的事件&对象
一.JS中的事件 (一)JS中的事件分类 1.鼠标事件 click/dblclick/onmouseover/onmouseout 2.HTML事件 onload/onscroll/onsubmit/ ...
- JS学习五(js中的事件)
[JS中的事件分类] 1.鼠标事件 click/bdlclick/onmouseover/onmouseout 2. HTML事件 onload/onscroll/onsubmit/onchange/ ...
随机推荐
- python错误类型
在运行或编写一个程序时常会遇到错误异常,这时python会给你一个错误提示类名,告诉出现了什么样的问题(Python是面向对象语言,所以程序抛出的异常也是类).能很好的理解这些错误提示类名所代表的意思 ...
- 安装Windows 7
-EndFragment--> 1.安装win7_64位步骤: https://www.douban.com/note/224102684/ 安装Win7系统为硬盘分区的方法 笨小康2012-0 ...
- tomcat重启脚本
#!/bin/bashPATH=/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/binexport JAVA_HOME=/opt/jd ...
- [深度优先搜索] POJ 1426 Find The Multiple
Find The Multiple Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 28550 Accepted: 118 ...
- 【Linux】【通信】1.ping不通
关于为什么ping不通有很多种原因,但直接的表象就网络之间没有成功进行通讯: 在构建虚拟机和win之间的交互时,主要使用了3种网络模式: 桥接bridge VMnet0 主机host VMne ...
- Java Mysql分页显示
public class View { private int currentPage; private int pageSize; private int recordCount; public V ...
- python 获取脚本所在目录
平时写python经常会想获得脚本所在的目录,例如有个文件跟脚本文件放在一个相对的目录位置,那就可以通过脚本文件的目录找到对应的文件,即使以后脚本文件移到其他地方,脚本也基本不需要改动(相对于写死目录 ...
- C++小项目:directx11图形程序(四):d3dclass
主菜终于来了.这个d3dclass主要做的工作是dx11图形程序的初始化工作,它将创建显示表面交换链,d3d设备,d3d设备上下文,渲染目标表面,深度模板缓存:设置视口,生成投影矩阵. D3D设备:可 ...
- PostSharp-4.3.22安装包_KeyGen发布
PostSharp-4.3.22安装包_KeyGen发布 请低调使用. 下载相关 PostSharp-4.3.22安装包_KeyGen.part1.rar PostSharp-4.3.22安装包_Ke ...
- Activity Intent相关FLAG介绍
先首先简单介绍下Task和Activity的关系 Task就像一个容器,而Activity就相当与填充这个容器的东西,第一个东西(Activity)则会处于最下面,最后添加的东西(Activity ...