event
event（事件流）是 window对象的一个属性
在JS中事件有2种类型 一种是冒泡类型 一种是捕获类型
冒泡类型最先是在IE中出现，而捕获类型最先在标准的DOM中出现，不过最终IE得胜 从而在标准的DOM中有捕获和冒泡两种
冒泡的顺序是从下到上p>div>body>document，捕获恰恰相反

事件监听的方法
事件监听的方法分为两种，传统事件监听和非传统事件监听

传统的事件监听如下
1. <div onclick=test1()>111</div>
<script>
function test1(){
alert("11")
}
</script>
2.<div id ="div1">222</div>
<script>
document.getelementById("div1")
div1.onclick=function(){
alert("222")
}
</script>

非传统的事件监听 非传统事件也分为2种，一种是IE事件监听，一种是标准的DOM事件监听
IE事件监听
在IE事件监听中有2个函数，一个是添加事件处理函数，一个时删除事件处理函数
[obj].attachEvent('event_style',event_name);//添加事件处理函数
[obj].detachEvent('event_style',event_name);//删除事件处理函数
<body>
<div id="div1">IE事件监听</div>
<script>
window.onload=function(){//页面加载
var div1=document.getelementById("div1");//得到对象
div1.attachEvent('onclick',test1)//添加IE事件函数
}
function test1(){
//调用添加的事件函数
alert("333")//打印测试
div1.detachEvent('onclick',test1)//删除这个事件处理函数
}
</script>
</body>
标准的DOM事件监听
在标准的DOM事件监听中也有2个函数，一个是添加事件处理函数，一个是删除事件处理函数，这两个函数和IE的不行同，而且参数也不相同，有3个参数，第一个参数是事件类型，第二个参数是函数名，第三个参数有两个值，true值代表是捕获事件，false是冒泡事件，例子如下
[obj].addEventListener("event_style",event_name,event_modle)//添加事件处理函数
[obj].removeEventListener("event_style",event_name,event_modle)//删除事件处理函数

<body>
<div id="div2">444</div>
</body>
<script>
window.onload=function(){
var div2=document.getelementById("div2");
div2.addEventListener("click",test2,false)
//在添加事件函数这行代码，大家可能发现和IE有所不同，不同点2点，第一点就是事件类型和IE不同，缺少了'on'这单词，不过大家不要惊讶，这本身就是存在的，所有大家在使用的时候一定要切记，onmouseover变成mouseover等等，还有第三个参数代表，事件模型，在这里是冒泡类型，因此用false
}
</script>
function test2(){
alert("444");
div2.removeEventListener('click',test2,false)
//删除这个事件处理函数
}

到底我们何时用传统事件何时用非传统事件呢？

大家可能体会到，传统的事件只能处理一个对象，而如果我们要处理多个时呢，用非传统的话，这样大大的会提高我们代码的可阅读性，在非传统的事件处理函数中，可以存在多个事件函数

window.onload=function(){
var div1=document.getelementById("div1");
var div2=document.getelementById("div2");
div2.addEventListener("click",test2,false)
div1.addEventListener("click",test1,false)
//从上面的代码看，是不是我们的代码可阅读性提高了不少呢？
}

event(1)的更多相关文章

  1. 如何利用ETW（Event Tracing for Windows）记录日志

    ETW是Event Tracing for Windows的简称,它是Windows提供的原生的事件跟踪日志系统.由于采用内核(Kernel)层面的缓冲和日志记录机制,所以ETW提供了一种非常高效的事 ...

  2. [.NET] C# 知识回顾 - Event 事件

    C# 知识回顾 - Event 事件 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/6060297.html 序 昨天,通过<C# 知识回顾 - ...

  3. Atitit 解决Unhandled event loop exception错误的办法

    Atitit 解决Unhandled event loop exception错误的办法 查看workspace/.metadata/.log org.eclipse.swt.SWTError: No ...

  4. Java模拟Windows的Event

    场景 开发中遇到一个场景,业务操作会不定时的产生工作任务,这些工作任务需要放入到一个队列中,而另外会有一个线程一直检测这个队列,队列中有任务就从队列中取出并进行运算. 问题 业务场景倒是简单,只不过这 ...

  5. 事件EVENT与waitforsingleobject的使用

    事件event与waitforsingleobject的配合使用,能够解决很多同步问题,也可以在数据达到某个状态时启动另一个线程的执行,如报警. event的几个函数: 1.CreateEvent和O ...

  6. 火狐浏览器中event不起作用解决办法--记录（一）

    今天遇到了这个问题.IE,谷歌下都没问题,但在FF下却不起作用,很郁闷查了半天,看别人博文写了老长,结果试了要么起作用,但太麻烦,要么不起作用,说了那么多跟没说一样. 其实只要这一句代码就行:e=ar ...

  7. Event事件

    妙味课堂-Event事件 1.焦点:当一个元素有焦点的时候,那么他就可以接受用户的输入(不是所有元素都能接受焦点) 给元素设置焦点的方式: 1.点击 2.tab 3.js 2.(例子:输入框提示文字) ...

  8. Event Sourcing Pattern 事件源模式

    Use an append-only store to record the full series of events that describe actions taken on data in ...

  9. 严重: Exception sending context initialized event to listener instance of class

    问题描述:Exception sending context initialized event to listener instance of class org.springframework.w ...

  10. [转载]C#委托和事件(Delegate、Event、EventHandler、EventArgs)

    原文链接:http://blog.csdn.net/zwj7612356/article/details/8272520 14.1.委托 当要把方法作为实参传送给其他方法的形参时,形参需要使用委托.委 ...

随机推荐

  1. Kettle解析JSON错误,We MUST have the same number of values for all paths,We can not find and data with path [$.

    最近公司要从聚石塔上抽取数据,其中有JSON格式数据,所以学习一下Kettle解析JSON,碰到小小问题,记录一下: (1) 2015/07/15 15:22:48 - trade_detail.0 ...

  2. Spring学习总结（2）- AOP

    一,什么是AOP AOP(Aspect Oriented Programming)意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP是OOP的延续,是软件开发中 ...

  3. 一、生成网络表--create Netlist

    Orcad Capture原理图篇 一.生成网络表--create Netlist 1.操作: .dsn文件--Tools--create Netlist 出现如下对话框--默认不进行更改--点击确定 ...

  4. Javac编译找不到符号,报错

    Javac编译找不到符号 报错 找不到符号 如果是两个.java有调用关系,需要同时编译 首先我检查了下代码,发现并没有问题,然后将A.java文件的内容复制到D.java中,发现程序能正常运行,而之 ...

  5. vue-cli2.X环境搭建

    1.先安装nodejs环境https://npm.taobao.org/mirrors/node (选择版本) 下一步 下一步 默认安装就行 2.检查node和npm的是否成功安装node -v np ...

  6. 讨论Spring整合Mybatis时一级缓存失效得问题

    问题 1.学习测试时发现了一级缓存并没有生效,先看案例: setting配置: <settings> <!-- (1) 提供可控制Mybatis框架运行行为的属性信息 --> ...

  7. SQL学习记录：定义(一)

    --1.在这里@temp是一个表变量,只有一个批处理中有效,declare @temp table; --2. 如果前面加#就是临时表,可以在tempDB中查看到,它会在最后一个使用它的用户退出后才失 ...

  8. Js事件分发与DOM事件流

    这一篇比较透彻:https://www.jianshu.com/p/dc1520327022 点击了目标节点后,捕获阶段里事件会从外向目标传递:到了目标阶段,捕获和冒泡的执行顺序按照事件被定义的先后顺 ...

  9. opensuse 安装APACHE2+MYSQL+PHP5

    sudo zypper in apache2-mod_php5 apache2 mariadb 装好后, 记得启动APACHE2对PHP的支持: a2enmod php5 默认mysql密码为空, 可 ...

  10. fat32转ntfs ，Win7系统提示对于目标文件系统文件过大解决教程

    系统之家 发布时间:18-05-3117:56 很多Win7用户在复制较大的文件时,系统会弹出窗口提示“对于目标文件系统,文件XXX过大”,出现这种情况的原因是FAT32的文件系统不支持复制大于4g的 ...