js的事件模型是事件流模型，即意味着页面上不止一个元素响应相同的事件，当我们点击页面上的按钮时，实际上是点击了按钮，以及按钮的容器------整个页面。
对于IE，使用的是事件冒泡技术。其意思是从最内部点击的元素开始，向上触发到最外部(document 对象)。
而对于Netscape来说，使用称为事件捕获的解决方案。
如：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="button" style="font-size: 18px" value="PLESE PUSH ME" onclick="c()"/>
</body>
</html>
事件冒泡 触发路径为：input->body->document
到了IE3.0, HTML元素也可以接收冒泡事件。触发路径为：input->body->html->document
Mozilla浏览器支持html元素上的事件。但是，事件也可以上升到不是DOM的一部分的windows对象。
触发路径为:input->body->html->document->window
事件捕获
Netscape 触发路径为：document->body->input
DOM事件流
DOM同时支持事件的捕获和事件的冒泡, 但是事件捕获先发生。
触发路径：windows->document->body->input->body->document->windows
DOM事件有一个特色是，文本节点也可以触发事件(IE不行)。
事件处理：包括两个方面：传统事件处理和现代事件处理
传统事件处理：1、所有浏览器都支持 。2、只会执行最后的绑定事件，即执行单一事件
(1)js中指定事件处理
匿名函数指定事件
<input id="mybtn" type="button" style="font-size: 18px" value="PLESE CLICK ME"/>
<script>
var obtn = document.getElementById("mybtn");
obtn.onclick = function(){
alert("====");
}
</script>
已有函数名
<script>
function showmsg(){
alert("-_-!!");
}
</script>
<body>
<input id="mybtn" type="button" style="font-size: 18px" value="PLESE CLICK ME"/>
<script>
var obtn = document.getElementById("mybtn");
obtn.onclick = showmsg;
</script>
</body>
注意：1、绑定事件处理程序到事件属性时，只能引用函数的名称，后面不能加括号。加括号意味着马上执行函数，不用通过点击事件。
2、不论函数的定义是怎样的，必须确保在XHTML元素被添加到DOM之前，登记事件处理程序，否则，将因为一个不存在的对象而得到一个错误。即最好不要将事件处理程序写在HTML标签后。
(2)XHTML标记中处理事件
<input id="mybtn" type="button" style="font-size: 18px" value="PLESE CLICK ME" onclick="alert('-_-!!');"/>
注意：在传统事件处理中不可书写多个相同的事件，事件处理会覆盖，只执行最后绑定的事件：
<input id="mybtn" type="button" style="font-size: 18px" value="PLESE CLICK ME" onclick="alert('-_-!!');"/>
<script>
var obtn = document.getElementById("mybtn");
obtn.onclick = function(){
alert("0_-!!");
}
</script>
运行结果只会执行最后绑定的第二个。这就是单一事件处理。
现代事件处理程序
1、兼容性不是很好。2、可以为每个事件指派多个事件处理。
(1)IE中
[object].attachEvent("事件处理程序的名称", 函数); // 添加事件处理程序
[object].detachEvent("事件处理程序的名称", 函数); // 删除事件处理程序
如：
<script>
function showmsg(){
alert("-_-!!");
}
function showmsg2(){
alert("0_-!!");
}
</script>
<body>
<input id="mybtn" type="button" style="font-size: 18px" value="PLESE CLICK ME" />
<script>
var obtn = document.getElementById("mybtn");
obtn.attachEvent("onclick", showmsg);
obtn.attachEvent("onclick", showmsg2);
</script>
</body>
(2)DOM
[object].addEventListener("事件处理程序的名称", 函数, bCapture); // 添加事件处理程序
[object].removeEventListener("事件处理程序的名称", 函数, bCapture); // 删除事件处理程序
第三个参数是指程序是否用在冒泡或捕获阶段。
<script>
function showmsg(){
alert("-_-!!");
}
function showmsg2(){
alert("0_-!!");
}
</script>
<body>
<input id="mybtn" type="button" style="font-size: 18px" value="PLESE CLICK ME" />
<script>
var obtn = document.getElementById("mybtn");
obtn.addEventListener("click", showmsg,false);
obtn.addEventListener("click", showmsg2,false);
</script>
</body>
用传统方式直接将函数指派给事件处理程序，那么事件处理程序就是在冒泡阶段添加的。
obtn.onclick = showmsg;
==
obtn.addEventListener("click", showmsg,false);
事件处理的返回值
<input id="mybtn" type="button" style="font-size: 18px" value="PLESE CLICK ME" onclick="return confirm('are you sure?')"/>
只有使用return语句了才会返回一个值
如果是这样：那么confirm的值是不会返回给浏览器的。
<input id="mybtn" type="button" style="font-size: 18px" value="PLESE CLICK ME" onclick="confirm('are you sure?')"/>
相关推荐
1．实现JavaScript事件注册； 2．实现JavaScript事件处理函数； 3．实现JavaScript鼠标和键盘事件； 4．实现JavaScript表单相关事件； 5．实现JavaScript字幕滚动事件； 6．实现JavaScript编辑事件；
相关阅读： JavaScript事件学习小结(五）js中事件类型之鼠标事件 ...JavaScript事件学习小结(二)js事件处理程序 //www.jb51.net/article/86264.htm JavaScript事件学习小结（三）js事件对象 一、事件处理
相关阅读： JavaScript事件学习小结(五）js中事件类型之鼠标事件 ...JavaScript事件学习小结(二)js事件处理程序 //www.jb51.net/article/86264.htm JavaScript事件学习小结（三）js事件对象 鼠标事件 D
主要介绍了JavaScript常见事件处理程序,结合实例形式总结分析了javascript HTML事件、DOM事件、IE事件等相关处理程序与操作技巧,需要的朋友可以参考下
JS与HTML之间的交互通过事件实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件，以便事件发生时执行相应的代码。本文将介绍JS事件相关的基础知识。
相关阅读： JavaScript事件学习小结(五）js中事件类型之鼠标事件 ...JavaScript事件学习小结(二)js事件处理程序 //www.jb51.net/article/86264.htm JavaScript事件学习小结（三）js事件对象 //www.
第3章 JavaScript事件处理 第4章 JavaScript基于对象编程 第5章 文档对象模型 DOM 第6章 String Math Array等数据对象 第7章 Window及相关顶级对象 第8章 Document对象">该资源为8个PDF文档教程 适合JS开发初学者 ...
相关阅读： JavaScript事件学习小结(五）js中事件类型之鼠标事件 ...JavaScript事件学习小结(二)js事件处理程序 //www.jb51.net/article/86264.htm JavaScript事件学习小结（三）js事件对象 一、事件对象
主要为大家详细介绍了JavaScript事件处理程序的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
相关阅读： JavaScript事件学习小结(五）js中事件类型之鼠标事件 ...JavaScript事件学习小结(二)js事件处理程序 //www.jb51.net/article/86264.htm JavaScript事件学习小结（三）js事件对象 一、事件 事
主要介绍了JS事件流与事件处理程序,结合实例形式分析了事件流与事件处理程序相关概念、原理、用法及操作注意事项,需要的朋友可以参考下
有关JAVASCRIPT的相关的PPT以及详细的讲解更能帮助读者进一步的进行学习和了解。
第10章 JavaScript事件处理 264 10.1 事件概述 264 10.1.1 事件简介 264 10.1.2 指定事件 265 10.2 原始事件模型 267 10.2.1 事件类型 267 10.2.2 使用事件返回值 269 10.2.3 使用事件this关键字 269 10.2.4 使用...
一、什么是事件冒泡 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个...
Vuemit：最小的Vue.js的事件处理程序
主要介绍了JavaScript中为事件指定处理程序的五种方式,结合实例形式简单分析了JavaScript事件处理的相关原理与事件指定处理程序的五种常用方式,需要的朋友可以参考下
本节稍稍深入地讨论关于事件处理的话题，如果你对模式、闭包和面向对象等概念还不太理解，不妨暂且等阅读完相关内容之后再回过头来阅读它，相信你会有很大收获。 1 事件处理模式 在程序设计领域，“事件处理”是一...
所有可能触发事件的对象都是一个集成了EventEmitter类的子类的实例对象，在Node.js中，为EventEmitter类定义了许多方法，所有与对象的事件处理函数的绑定及解除相关的处理均依靠这些方法的调用来执行。 EventEmitter...
JavaScript事件代理 事件代理在JS世界中一个非常有用也很有趣的功能。当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。 这主要得益于浏览器的事件冒泡...