这是第一篇技术性博客。

因为最近做的web版前端求职简历算是告一段落了（点此看简历）。（稍微记录下吧：自从确定简历的简笔画风格后（因为刚开始设想的蓝天白云大树啥的不仅图片特难找而且做着做着就觉得有点俗了，简笔画这种黑白风格对PS技术要求就很低了），大概花了写这篇博客前的4、5天做好的（额，上班时间也在做，因为最近公司不忙））总之就是在做简历的过程中感觉对js事件了解多了一点，所以先记下来，以后争取能再完善。

  • 避免重复注册事件

这是我曾经在QQ群里求助的一个问题，感觉看过的书里也没有特意提到。具体来说就是一个元素相同的事件处理程序注册多次的话，每次执行时会把以前累计注册的事件都执行。这个问题在以下情况最常见：在元素aa的事件里创造了元素bb并给它添加了事件，如此一来每次a相应事件发生时都会给bb添加事件。

<!DOCTYPE html>
<html>
<style type="text/css">
#aa{background-color:lightgreen;}
#bb{background-color:pink;}
</style>
<body>
<p id="aa" >aa</p>
<p id="bb" >bb</p>

</body>
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"> </script>
<script type="text/javascript"> $(function(){
var i=0;
$('#aa').click(function(){
i++;
$('#bb').click(function(){
alert(i);
})
})
}) </script> </html>

运行代码

如#aa和#bb为兄弟节点：

$(function(){ var i=0;

    $('#aa').click(function(){

        i++;

         $('#bb').click(function(){

             alert(i);

         })

     })

})

如上，则第一次click #aa再click #bb时，  弹出1；

　　　　第二次click #aa再click #bb时，连续弹出2、2；

　　　　第三次click #aa再click #bb时，连续弹出3、3、3.

解决办法：先删除事件再添加，unbind以后再bind。

  • 重要的事件对象

我们知道在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息，包括导致事件的元素、事件类型等。其中的常用有：

1. event.type(被触发的事件的类型，如“click”)；

2.event.eventPhase(调用事件处理程序的阶段:1表示捕获阶段,2表示"处于目标",3表示冒泡阶段)

3.event.target和event.currentTarget

4.event.stopPropagation()

这就涉及到事件流了，"DOM2级事件“规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。捕获阶段从document往下到目标节点的父元素就停止，然后是处于目标阶段，事件发生，在事件处理中也看成冒泡阶段的一部分，在冒泡阶段可以对事件作出响应。在事件处理程序内部，this始终等于event.currentTarget，表示注册事件的对象，而由于事件流导致冒泡阶段也会触发事件，而 event.target就表示实际的事件目标。（2013-8-21添加：并不是只在冒泡阶段响应，由于Netscape和IE的事件发生顺序不同，W3C综合了二者，可以选择是在捕获阶段还是冒泡阶段绑定事件处理函数，这是通过addEventListener()方法实现的，如果这个函数的最后一个参数是true，则在捕获阶段绑定函数，反之false，在冒泡阶段绑定函数。

"DOM2级事件“中添加事件处理程序：

var btn=document.getElementById('myBtn');

btn.addEventListener("click",function(){alert(this.id);},false);

大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容各种浏览器，不建议事件捕获阶段注册事件处理程序。W3C默认是绑定在冒泡阶段。）

比如一个元素包含一个子元素，为父元素添加事件：

    <div id='father'>

     <p id='son' >aaaaa</p>

    </div>
$('#father').click(function(event){

        console.log(event.eventPhase);    
　　　　 console.log("event.target:"+event.target+",event.currentTarget:"+event.currentTarget);

})

在不包含son的father区域click时为：

2  event.target:[object HTMLDivElement],event.currentTarget:[object HTMLDivElement]；

在son上click时：

3 event.target:[object HTMLParagraphElement],event.currentTarget:[object HTMLDivElement]。
这也就解释了为什么event.target的含义，有动作发生时是从document向下捕获到event.target而不是event.currentTarget，然后向上冒泡到document，在捕获阶段不触发事件。可以通过event.stopPropagation()来取消冒泡（2013-8-21添加：IE中的是event.cancelBubble()来取消事件冒泡（jQuery已经统一用event.stopPropagation()来兼容了吧）；DOM中的event.preventDefault()可以用来取消默认行为，如超链接的跳转，IE中的是要设置event.returnValue=false。）。
同样是上面的两个父子节点，可以看看下面这个例子的结果：
    $('#father').click(function(event){

        alert ('father:'+event.eventPhase);

    })

    $('#son').click(function(event){

        alert ('son:'+event.eventPhase);

    })

在不包含son的father区域click时为：father:2

在son上click时：son:2 father:3

为son的click事件里添加event.stopPropagation()后就可以只son:2了。

（以上若有错恳请指正）

附注：如果想根据具体情况来执行某些语句，可以利用if(event.target == this)。或event.target.tagName.toUpperCase()来获取标签名（当然这办法对有多层子元素的很不好）。

判断一个对象是否为jQuery对象：if(obj instanceof jQuery)，jQuery中比较两个对象是否为同一个对象：$('#son')==$('p')这样总是false，这样是在比较引用地址？还是jQuery没有这个办法？（

2013-8-21添加：在js中当比较两个使用值存储的数据时，若它们的值相同，等值比较的结果是true；如果比较两个使用引用存储的数据，当且仅当它们引用同一个值时，等值比较的结果才是true，比较的是引用（对应存储地址）。如

var a={x:1,y:2};

var b=a;

var c={x:1,y:2};

alert(a==b);//true

alert(a==c);//false

alert(a>=c);//不确定

）不过可以使用$(event.target).is($('p'))来判断。

  • 对含有子元素的节点对象的mouseenter、mouseleave和mouseover、mouseout

先来看一个例子：

$('#father').mouseover(function(event){

        console.log(event.target+'eovered');                  
　　　　$('#son').text(event.target+'overed').css('background','white');

    }).mouseout(function(event){

        console.log(event.target+'outed');

        $('#son').text(event.target+'outed').css('background','red');

    })

结果就是几十从father移入son、从son移除father，都会触发mouseover和mouseout啊。（页面从移出到移入的瞬间太快，效果不明显，从console.log里面看啊），这样是不是很烦哪？

如果你试试把mouseover和mouseout换成mouseenter和mouseleave，在IE8和最新版的grome和firefox里面一切就正常了啊，用IETester测试，连IE6都表现正常啊，IE9没有任何反应啊，就像没有加载js一样，IETester是不是坏了啊，我的IETester里的IE7一向都是打不开测试页面的，所以不知都IE7会怎么样啊，IETester很不好用啊，有木有推荐的其他工具啊？（欢迎补充更正具体的测试结果啊）

好吧，回正题，为什么会这样呢？

其实是就是因为DOM3级事件中定义的mouseenter、mouseleave都不冒泡，在光标移动到后代元素上不会触发。但DOM2级事件并没有定义这个事件，DOM3级事件将它纳入了规范，IE、Firefox9+和Opera支持这个事件。

就是这个样子啊。

但是非要用mouseover和mouseout的话，

W3C在mouseover和mouseout这两个触发的事件对象里添加了一个叫relatedTarget的属性，来表示与事件相关的DOM元素。event.mouseover中event.relatedTarget指向鼠标来自的元素，而mouseout中的relatedTarget指向的是鼠标去向的那个元素。据说在IE里对应的分别是event.fromElement和event.toElement（没测试过啦，jQuery都统一成event.relatedTarget）。

吐槽：原来写稍微技术一点的博客这么费时间啊， 从上午8点写到现在14：00，上午不过是打了2、3个小电话，填了些资料，中午都木有午休啊，原计划还要写一些UI事件的（UI事件是指那些不一定与用户操作有关的事件，如load、resize、scroll等，有时间再补充啊）。

总结：写技术博客最好还是放在晚上吧。

俺要工作了啊，看见有错的地方恳请指正啊，谢恩。

关于js中的事件的更多相关文章

  1. 怎么理解js中的事件委托

    怎么理解js中的事件委托 时间 2015-01-15 00:59:59  SegmentFault 原文  http://segmentfault.com/blog/sunchengli/119000 ...

  2. js中冒泡事件和捕获事件

    js中冒泡事件和捕获事件: 冒泡事件:冒泡事件是从里向外,即是从被绑定元素开始一直向外到达页面的所有祖先元素都会被触发,这 一过程被称为事件冒泡.这个事件从原始元素开始一直冒泡到DOM树的最上层 捕获 ...

  3. 看懂此文，不再困惑于 JS 中的事件设计

    看懂此文,不再困惑于 JS 中的事件设计 今天刚在关注的微信公众号看到的文章,关于JS事件的,写的很详细也很容易理解,相关的知识点都有总结到,看完就有种很舒畅的感觉,该串起来的知识点都串起来了.反正一 ...

  4. js中冒泡事件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. DOM 以及JS中的事件

    [DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...

  6. 从零开始的JS生活（二）——BOM、DOM与JS中的事件

    上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举 ...

  7. js中的事件，内置对象，正则表达式

    [JS中的事件分类] 1.鼠标事件: click/dbclick/mouseover/mouseout/mousemove/mousedown/mouseup 2.键盘事件: keydown: 键盘按 ...

  8. JS中的事件以及DOM 操作

    [DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...

  9. JS中的事件&对象

    一.JS中的事件 (一)JS中的事件分类 1.鼠标事件 click/dblclick/onmouseover/onmouseout 2.HTML事件 onload/onscroll/onsubmit/ ...

  10. JS学习五(js中的事件)

    [JS中的事件分类] 1.鼠标事件 click/bdlclick/onmouseover/onmouseout 2. HTML事件 onload/onscroll/onsubmit/onchange/ ...

随机推荐

  1. yarn资源调度（网络搜集）

    本文转自:http://www.itweet.cn/2015/07/24/yarn-resources-manager-allocation/ Hadoop YARN同时支持内存和CPU两种资源的调度 ...

  2. android使用apktool反编译出现Input file (d:\t) was not found or was not readable

    Input file (d:\t) was not found or was not readable 出现这个错误是因为apktool压缩包下载错误,我是下成首页的那个压缩包了 正确下载地址:htt ...

  3. MLlib 卡方检验

    1.卡方检验理论 1.1.  简介 总体的分布函数完全未知或只知形式.但不知其参数的情况,为了推断总体的某些未知特性,提出某些关于总体的假设.我们要根据样本对所提出的假设作出是接受,还是拒绝的决策.假 ...

  4. 转：Qt项目中遇到的一些小问题汇总

    链接:http://blog.csdn.net/yangyunfeizj/article/details/7082001    作者:GoatYangYang 公司让负责qt界面开发,但是接触qt又不 ...

  5. [LeetCode 118] - 杨辉三角形(Pascal's Triangle)

    问题 给出变量numRows,生成杨辉三角形的前numRows行. 例如,给出numRows＝5,返回: [     [1],    [1,1],   [1,2,1],  [1,3,3,1], [1, ...

  6. 【转】使用dos2unix批量转换文件

    原文网址:http://kuaile.in/archives/1208 dos2unix是Linux下的一个用户转换格式的程序,由于windows上文件的结束符和linux上的不同,那么在window ...

  7. Linux+eclipse+gdb调试postgresql源码

    pg内核源码解析课上用的vs调试pg源码, VS用起来确实方便,但是配置调试环境着实有点麻烦.首先得装个windows系统,最好是xp,win7稍微麻烦点:最好使用vs05,08和10也可以,但是比0 ...

  8. android 初学: 提示No Launcher activity found!

    提示No Launcher activity found! 三步检查: 1 必须有 <category android:name="android.intent.category.LA ...

  9. 上传jar包到Apache Archiva本地仓库

    1.登录archiva,点击左侧的upload Artifact 2 jar 包名称 为:java-client-4.1.2.jar 网上的pom配置为: <!-- https://mvnrep ...

  10. JS(一)

    循环还是很有意思的: 1) 安全数的作业: <!DOCTYPE html> <html lang="en"> <head> <meta c ...