js中的事件委托
- - JavaScript - Web前端 - ITeye博客1，什么是事件委托：通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件. 也就是：利用冒泡的原理，把事件加到父级上，触发执行效果. 我们可以看一个例子：需要触发每个li来改变他们的背景颜色.
Js冒泡事件详解及阻止
标签：
js
事件
| 发表时间：2014-03-20 23:31 | 作者：ycdyx
出处：http://www.iteye.com
Js冒泡机制是指如果某元素定义了事件A，如click事件，如果触发了事件之后，没有阻止冒泡事件，那么事件将向父级元素传播，触发父类的click函数。
如下例所示：
<html>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script>
function ialertdouble(e) {
alert('innerdouble');
stopBubble(e);
}
function ialertthree(e) {
alert('innerthree');
stopBubbleDouble(e);
}
function stopBubble(e) {
var evt = e||window.event;
evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble=true);//阻止冒泡
}
function stopBubbleDouble(e) {
var evt = e||window.event;
evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble=true);//阻止冒泡
evt.preventDefault();//阻止浏览器默认行为，这样链接就不会跳转
}
$(function() {
//方法一
//$('#jquerytest').click(function(event) {
// alert('innerfour');
// event.stopPropagation();
// event.preventDefault();
//});
//方法二
$('#jquerytest').click(function() {
alert('innerfour');
return false;
});
});
</script>
<div onclick="alert('without');">without
<div onclick="alert('middle');">middle
<div onclick="alert('inner');">inner</div>
<div onclick="ialertdouble(event)">innerdouble</div>
<p><a href='http://www.baidu.com' onclick="ialertthree(event)">innerthree</a></p>
<p id='jquerytest'><a href='http://www.baidu.com'>innerfour</a></p>
</div>
</div>
</html>
当你点击inner的时候，会依次弹出‘inner’，‘middle’和‘without’。这就是事件冒泡。
从直观上来看，也是这样的，因为最里层的区域是在父级节点中的，点击了子级节点的区域，其实也是点击了父级节点的区域，所以事件会传播起来。
其实，很多的时候，我们并不想事件冒泡，因为这样会同时触发几个事件。
接下来：我们点击innerdouble。就会发现她并没有冒泡，因为她在调用的方法ialertdouble()中调用了stopBubble()方法，方法通过判断浏览器类型（Ie通过cancleBubble() 、firefox通过stopProgation()）来阻止冒泡。
但如果是链接的话，我们会发现她也会阻止冒泡，但是会跳转，这就是浏览器的默认行为。需要借助preventDefault()方法来阻止。具体可以查看ialertthree()。
目前主流的都是借助jquery来绑定click事件的，这样的话，就简单多了。
我们可以在点击事件时传入参数event，然后直接
event.stopPropagation();
event.preventDefault(); //没有链接不需要加这个。
这样就可以了。
框架就是好，其实还有更简单的，在事件处理程序中返回false，这是对在事件对象上同时调用stopPropagation()和preventDefault()的一种简写方式。
【详细代码见上面，记得载入jquery.js。】
其实也还可以在每个click事件中加入判断：
$('#id').click(function(event){
if(event.target==this){
//do something
}
})
解析：事件处理程序中的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素。这个属性是DOM API中规定的，但是没有被所有浏览器实现 。jQuery对这个事件对象进行了必要的扩展，从而在任何浏览器中都能够使用这个属性。通过.target，可以确定DOM中首先接收到事件的元素（即实际被单击的元素）。而且，我们知道this引用的是处理事件的DOM元素，所以可以编写以上代码。
不过推荐使用return false，Jquery绑定事件的话。
更多请支持：http://www.webyang.net/Html/web/article_102.html
已有 0 人发表留言，猛击->> 这里<<-参与讨论
ITeye推荐
如下例所示：
<html>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script>
function ialertdouble(e) {
alert('innerdouble');
stopBubble(e);
}
function ialertthree(e) {
alert('innerthree');
stopBubbleDouble(e);
}
function stopBubble(e) {
var evt = e||window.event;
evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble=true);//阻止冒泡
}
function stopBubbleDouble(e) {
var evt = e||window.event;
evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble=true);//阻止冒泡
evt.preventDefault();//阻止浏览器默认行为，这样链接就不会跳转
}
$(function() {
//方法一
//$('#jquerytest').click(function(event) {
// alert('innerfour');
// event.stopPropagation();
// event.preventDefault();
//});
//方法二
$('#jquerytest').click(function() {
alert('innerfour');
return false;
});
});
</script>
<div onclick="alert('without');">without
<div onclick="alert('middle');">middle
<div onclick="alert('inner');">inner</div>
<div onclick="ialertdouble(event)">innerdouble</div>
<p><a href='http://www.baidu.com' onclick="ialertthree(event)">innerthree</a></p>
<p id='jquerytest'><a href='http://www.baidu.com'>innerfour</a></p>
</div>
</div>
</html>
当你点击inner的时候，会依次弹出‘inner’，‘middle’和‘without’。这就是事件冒泡。
从直观上来看，也是这样的，因为最里层的区域是在父级节点中的，点击了子级节点的区域，其实也是点击了父级节点的区域，所以事件会传播起来。
其实，很多的时候，我们并不想事件冒泡，因为这样会同时触发几个事件。
接下来：我们点击innerdouble。就会发现她并没有冒泡，因为她在调用的方法ialertdouble()中调用了stopBubble()方法，方法通过判断浏览器类型（Ie通过cancleBubble() 、firefox通过stopProgation()）来阻止冒泡。
但如果是链接的话，我们会发现她也会阻止冒泡，但是会跳转，这就是浏览器的默认行为。需要借助preventDefault()方法来阻止。具体可以查看ialertthree()。
目前主流的都是借助jquery来绑定click事件的，这样的话，就简单多了。
我们可以在点击事件时传入参数event，然后直接
event.stopPropagation();
event.preventDefault(); //没有链接不需要加这个。
这样就可以了。
框架就是好，其实还有更简单的，在事件处理程序中返回false，这是对在事件对象上同时调用stopPropagation()和preventDefault()的一种简写方式。
【详细代码见上面，记得载入jquery.js。】
其实也还可以在每个click事件中加入判断：
$('#id').click(function(event){
if(event.target==this){
//do something
}
})
解析：事件处理程序中的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素。这个属性是DOM API中规定的，但是没有被所有浏览器实现 。jQuery对这个事件对象进行了必要的扩展，从而在任何浏览器中都能够使用这个属性。通过.target，可以确定DOM中首先接收到事件的元素（即实际被单击的元素）。而且，我们知道this引用的是处理事件的DOM元素，所以可以编写以上代码。
不过推荐使用return false，Jquery绑定事件的话。
更多请支持：http://www.webyang.net/Html/web/article_102.html
已有 0 人发表留言，猛击->> 这里<<-参与讨论
ITeye推荐
相关 [js 事件] 推荐：
JS动态添加事件
- - CSDN博客推荐文章方法一、setAttribute. obj.setAttribute("onclick", "javascript:alert('测试');");. 但是IE不支持用
setAttribute 设置某些属性，包括对象属性、集合属性、 事件属性，也就是说用 setAttribute 设置 style、onclick、onmouseover 这些属性在 IE 中是行不通的.
键盘事件处理的JS库 Kibo
- Le - 开源中国社区最新软件Kibo是一个简单的用于处理键盘事件的Javascript工具库. 这个Javascript类库的特点是，它不但能监听普通的按键事件，它还能监听组合键和功能键，例如Ctrl+C，Shift+w. 还有一个特点是，它把各种键都给符合化了，例如，如果你想监听[ctrl alt x]按键事件，你可以直接写成 k.down(‘ctrl alt x’, handler).
Js冒泡事件详解及阻止
- - JavaScript - Web前端 - ITeye博客Js冒泡机制是指如果某元素定义了事件A，如click事件，如果触发了事件之后，没有阻止冒泡事件，那么事件将向父级元素传播，触发父类的click函数. evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble=true);//阻止冒泡.
js onkeypress与onkeydown 事件区别详细说明
- - JavaScript - Web前端 - ITeye博客本文将详细介绍js onkeypress与onkeydown 事件区别:一个放开一个没有放开,onkeydown先于onkeypress 发生，需要的朋友可以参考下：. onkeypress 和 onkeydown 是有区别，下面将讲解 onkeypress 与 onkeydown 事件的区别. onkeypress 事件在用户按下并放开任何字母数字键时发生.
从事件驱动到observable的异步编程——PubSub+Promise+Rx的JS事件库
- Kejun - YY in Limbo 混沌海狂想你上当叻，虽然从外面看标题很有气势，传达出一种宏大叙事的赶脚，其实我只是刚刚把一个阿尔法城的JS模块提交到github，想顺便介绍一下，但我连API文档都懒得写，就别指望能深入浅出的讲一遍来龙去脉了⋯⋯. 所以就直接帖几个前置阅读的链接罢. 这些潮流的外部起源：（技术也有外源论/exogenesis⋯⋯）.
10个用来处理键盘事件的JQuery插件和JS类库
- - JavaScript - Web前端 - ITeye博客通常在web应用或者网站中，我们使用鼠标来控制元素或者执行导航，相对于桌面应用来说，使用web应用的快捷键次数可能会相对比较少，但是对于熟 练的专业人员来说，使用键盘可能更加容易并且更加快速，在今天这篇文章中，我们收集了10个jQuery的插件，帮助你创建各种基于键盘事件的web应 用，相信大家会喜欢的.
WebView JS 交互
- - ITeye博客WebView加jquery做页面会怎么样呢. // 创建WebView对象. // 把programList添加到js的全局对象window中，. // 这样就可以使用window.programList来获取数据. * 定义js回调java函数. // 绑定键盘的向上,向下按钮事件触发相应的js事件.
JS游戏引擎
- 米随随 - HTML5研究小组If you don’t have anything better to do and want to help fellow redditors interested in JS game dev out, feel free to fork the list and modify it as you like.
來源請求.js
- 红烧鲤鱼 - Blog: timdream很早以前就想講了，但講了大概又會被戰. 相較於英文維基百科，中文維基百科在社會和歷史條目充滿了 systemic bias. 但是那些主觀論述又不是編輯者有意加進去的，而是某種編輯者存在的社會所給予的暗示(Inception?)與集體共識，而不是原本百科全書應該有的可驗證的事實. 因為是暗示又是共識，所以有自覺的百科編輯者反而是少數；中文維基只好長成現在這個樣子了.