监听事件:

addEventListener(type,callback,useCapture);

removeEventListener(type,callback,useCapture);

添加:

var button=document.getElementById("createButton");

button.addEventListener("click",function(){/* ... */},false);

移除事件监听:

var div=document.getElementById("div");

var listener=function(event){/* ..*/};

div.addEventListener("click",listener,false);

div.removeEventListener("click",listener,false);

1、如果事件监听的处理函数是匿名函数,那么只有在元素销毁时才会移除此事件;

2、绑定事件的第三个参数为事件的处理方式true:捕获,即当事件触发时回调函数的执行顺序父元素事件处理函数-->子元素事件处理函数;false时为我们通常所用的事件冒泡。

3、当事件冒泡时可以通过event.stopPropagation()函数来终止冒泡(传播);

4、浏览器同样给事件赋予了默认行为(checkbox选中,链接等),在事件传播阶段(之后)会触发这些默认行为。可以通过调用event.preventDefault()函数来阻止默认行为,同样也可以在回调函数中return false来阻止。

委托事件:

从事件冒泡开始就发生了事件委托,我们可以直接给父元素绑定事件监听,用来检测在其子元素内发生的事件,用来减少应用中事件监听的数量。

//在ul列表上做事件委托

list.addEventListener("click",function(){

if(e.currentTarget.tagName==="li"){

/*do something*/

return false;

}

},false);

JQuery:

//不要这样做,这样会给每个li元素都添加了事件监听(非常浪费)

$("ul li").click(function(){/*...*/})

$("ul").delegate("li","click",function(){/*...*/});

1、使用事件委托的好处是,所有为元素动态添加的子元素都具有事件监听。

自定义事件:

//绑定自定义事件

$(".class").bind("refresh.widget",function(){/*...*/});

//触发自定义事件

$(".class").trigger("refresh.widget");

//From O'Reilly

转载于:https://blog.51cto.com/dragonwarrior/1363974

2014-02-26_javascript_event相关推荐

  1. 人肉云-【软件和信息服务】2014.02

    提到曾经红火一时的"人肉搜索",大家肯定历历在目,很多知名的人肉搜索事件让我们见证了她的威力.你轻问度娘就可以例数人肉搜索为我们留下的很多经典案例,虽然人肉搜索被很多人诟病,但是她 ...

  2. 【电力电子】【2014.02】多相多电平逆变器输出电流峰间纹波分析

    本文对多相多电平逆变器的峰-峰输出电流纹波幅度进行了分析和讨论.根据交流电压分量计算电流纹波,并根据开关周期内电压电平的电流斜率和应用次数定义峰峰值.给出了基波周期内峰-峰电流纹波分布随调制指数变化的 ...

  3. 技术02期:这么做竟然能让你的hive运行得更流畅!

    导读 在大数据领域中,hive是基于Hadoop的一个数据仓库工具,主要用于对大数据量的处理工作,在平时设计和查询时要特别注意效率.数据倾斜.数据冗余.job或者I/O过多,MapReduce分配不合 ...

  4. 学习笔记--2014年7月7日

    2014年7月7日晚上学习笔记 ================ 目录: 一.学习Bash笔记 二.利用Ubuntu创建无线wifi 三.在Ubuntu里禁用不用的桌面 四.安装软件时依赖冲突的万能解 ...

  5. 2014湖南农业大学ACM校赛

    湖南农业大学 2014年 ACM 校赛Problem 2014 /2/23  星期日  12:30-17:30 A.搜素      1794.查找指定的字符串      B.链表      1795 ...

  6. 工作经验 2014.2.25更新

    ---------------------------------------------------------------------------------------------------- ...

  7. 2014年大数据预测分析市场的新兴方法

    随着海量信息被分析和编译,对于企业而言,现在比以往任何时候都更容易的充分利用这些数据来解决他们的具体业务需求.而且,通过利用大数据预测分析说带来的好处远远超出了传统营销的应用程序. 据路透社新闻报道, ...

  8. 文学 2014年2月23日 20:43:43

    文学 2014年2月23日 20:43:43 Kim (Barnes & Noble Classics Series) - Rudyard Kipling.epub: http://www.t ...

  9. 机器学习与高维信息检索 - Note 3 - 逻辑回归(Logistic Regression)及相关实例

    逻辑回归 Logistic Regression 3. 逻辑回归 补充: 凸性 Convexity 定义3.1 定理3.2 定理3.3 成本函数的凸性 3.1逻辑回归的替代方法 3.2 线性可分性和逻 ...

  10. 【Web API系列教程】1.2 — Web API 2中的Action Results

    前言 本节的主题是ASP.NET Web API怎样将控制器动作的返回值转换成HTTP的响应消息. Web API控制器动作能够返回下列的不论什么值: 1. void 2. HttpResponseM ...

最新文章

  1. 一些极其简易的自动巡线车模
  2. .NET | 多线程下的调用上下文 : CallContext
  3. 编程范式之字符和基本类型
  4. destoon复制新模块的方法
  5. JavaScript学习(六十九)—正则表达式实训题
  6. 第三届蓝桥杯决赛c++b组
  7. 在吗?我要讲件大事了,你绝对不知道CSDN公众号还有这个功能!错过后悔!
  8. Nginx测试实验--rest服务端负载均衡应用
  9. linux中的帮助命令man(manual 手册,帮助,指南)
  10. Spring boot Redis客户端 乱码
  11. windows补丁下载说明
  12. 科目三考场视频最新专业高清+实地模拟考试陪练车
  13. TGA格式图像文件分析
  14. 老年手机英文改中文_老年手机设置成英文怎么办
  15. 使用Huginn批量订阅微信公众号
  16. OBS录屏低音过重/背景嗡嗡声的解决方法
  17. 【2022最新】mac版本Chrome谷歌浏览器导入burpsuite证书
  18. 代数结构入门:群、环、域、向量空间
  19. 激光雷达的分类、主流激光雷达、原理是什么
  20. iOS:集成iAd广告

热门文章

  1. Java中的BigDecimal类你真的了解吗?
  2. 把我坑惨的一个update语句!
  3. 再有人问你Netty是什么,就把这篇文章发给他
  4. 大龄读博那几年,与君共勉
  5. 2020腾讯广告算法大赛分享(冠军)
  6. 研究生扩招20.74%!教育部公布重要数据
  7. 机器学习面试必备 CheatSheet
  8. 2块钱就能买上千张人脸照片?央视曝光AI黑产,产业链太惊人了
  9. Git教程:最详细、最傻瓜、最浅显、真正手把手教!
  10. Linux内核网络栈1.2.13-网卡设备的初始化流程