1.事件传播机制:事件冒泡,事件捕获。

  
 

2.注册事件处理程序方式:

  • 设置html标签属性为事件处理程序,文档元素的事件处理程序属性,名字由“on”后面跟着事件名组成,例如:onclick,onmouseover,用法如下
 <div id="div1" onClick="console.log('div1');"><div>
  1. html里面不区分大小写,所以事件处理程序属性名字  onClick 大小写可以混写
  2. 若给同一元素写多个onclick事件处理属性,只执行第一个onclick里面的代码
  3. 在事件冒泡中注册事件处理程序
  • 设置JavaScript对象属性为事件处理程序,用法如下
 div1.onclick = function(){
     console.log('div1');
};
  1. 因为JavaScript是严格区分大小写的,所以,这种形式下属性名只能按规定小写;
  2. 若给同一元素对象写多个onclick事件处理属性,后面写的会覆盖前面的
  3. 在事件冒泡过程中注册事件处理程序
  • addEventListener()
addEventListener()接受三个参数:
 
 div1.addEventListener('click',function(){
console.log('div1-bubble');
},false);
不会覆盖
第一个参数是要注册处理程序的事件类型,其值是字符串,但并不包括前缀“on”
第二个参数是指当指定类型的事件发生时应该调用的函数;
第三个参数是布尔值,默认值为false=在事件冒泡过程中注册事件处理程序。
true=就是在事件捕获过程中注册事件处理程序。
IE8以及其之前版本的浏览器并不支持addEventListener()和removeEventListener()。

3.事件委托     在元素还未添加到页面之前就为它绑定事件,这里也是经常遇到的问题!用于新增的dom节点,其他方法无效

 $(document.body).on('click','#lucky-draw',function(){ })  
普通绑定---$(".delete").click(function(){});  相当于在所有类为delete上面分别注册click事件。内存占用大,绑定时间也长,并且不适用于动态添加的元素!
.on绑定----只在document上注册了一个click事件,内存占用约2.2M,绑定时间约为1ms。故这种方式绑定比较好!
 

4.事件冒泡

说到事件,不得不说的就是防止事件冒泡

1) 对比 event.preventDefault() 和 event.stopPropagation()

event.stopPropagation() 方法    在事件传播链中阻止事件冒泡, event.preventDefault() 只是在事件发生时阻断浏览器的默认响应,但事件仍然会向上传递。

例如:

 // 这个例子中, 一个 id 是 'foo' 的 div 包含了一个 id 是 'bar' 的 button

 $("#foo").click(function(){

 / div 'foo' 上的鼠标点击

 });

 $("#bar").click(function(e){

 // button 'bar' 上的鼠标点击

 e.stopPropagation();

 });

由于按钮的点击处理内部调用了 stopPropagation() 方法,这个事件永远不会传递到 div ,所以 div 的点击事件处理不会被触发。它能够有效阻止父元素捕获子元素的事件。

相反,如果你把刚才调用的 stopPropagation() 替换成 preventDefault(),只有浏览器的默认响应会被阻止,但是 div 的点击事件处里仍然会被触发。

2) 返回 false

(a)在 jQuery 事件处理中返回 false 相当于 jQuery 的 event 对象连续调用了 preventDefault() 和 stopPropagation() 方法。

(b) 在超链接标签的原生 Javascript onclick 事件处理中返回 false 会阻止浏览器默认的地址导航,并且阻止了DOM事件的冒泡传递。

(c) 在非超链接标签(例如: div,button等)的原生 Javascript onclick 事件处理中返回 false 不会起任何作用。

事件大概就总结到这里,有不正确的劳烦各位大神指点一下。码完之后要午睡一下,下午才有一个好状态继续学习嘿嘿。

JavaScript事件详解的更多相关文章

  1. JavaScript事件详解-jQuery的事件实现(三)

    正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...

  2. JavaScript事件详解-Zepto的事件实现(二)【新增fastclick阅读笔记】

    正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...

  3. JavaScript事件详解-zepto的事件实现

    zepto的event 可以结合上一篇JavaScript事件详解-原生事件基础(一)综合考虑源码暂且不表,github里还有中文网站都能下到最新版的zepto.整个event模块不长,274行,我们 ...

  4. JAVASCRIPT事件详解-------原生事件基础....

    javaScirpt事件详解-原生事件基础(一)   事件 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间,通过监听特定事件的发生,你能 ...

  5. javascript - 事件详解

    一.事件流 1.事件流 描述的是在页面中接受事件的顺序 2.事件冒泡 由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点 (最具体 –> 最不具体) 3.事件捕获 最不具体的节点先接收事 ...

  6. javascript - 事件详解(阻止事件冒泡+阻止事件行为)

    一.事件流 1.事件流 描述的是在页面中接受事件的顺序 2.事件冒泡 由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点 (最具体 –> 最不具体) 3.事件捕获 最不具体的节点先接收事 ...

  7. 原生JavaScript事件详解

    JQuery这种Write Less Do More的框架,用多了难免会对原生js眼高手低. 小菜其实不想写这篇博客,貌似很初级的样子,但是看到网络上连原生js事件绑定和解除都说不明白,还是决定科普一 ...

  8. javascript事件详解1

    事件流讲解来袭,嘎嘎嘎嘎嘎 ---------------------------------------------------------------- 1.事件流:描述的是在页面中接受事件的顺序 ...

  9. 第三天:JS事件详解-事件流

    学习来源: F:\新建文件夹 (2)\HTML5开发\HTML5开发\04.JavaScript基础\6.JavaScript事件详解 学习内容:  1)基础概念 2)举例说明: 代码如上,如果用事件 ...

随机推荐

  1. JavaScript Patterns 3.7 Primitive Wrappers

    Primitive value types: number, string, boolean, null, and undefined. // a primitive number var n = 1 ...

  2. JavaScript Patterns 2.10 Naming Conventions

    1. Capitalizing Constructors var adam = new Person(); 2. Separating Words camel case - type the word ...

  3. Garbage Collectors – Serial vs. Parallel vs. CMS vs. G1 (and what’s new in Java 8)

    转自:http://blog.takipi.com/garbage-collectors-serial-vs-parallel-vs-cms-vs-the-g1-and-whats-new-in-ja ...

  4. jiulianhuan 快速幂--矩阵快速幂

    题目信息: 1471: Jiulianhuan 时间限制: 1 Sec  内存限制: 128 MB 提交: 95  解决: 22 题目描述 For each data set in the input ...

  5. repcached的安装练习

    1 自行寻找一个具有大量非结构化数据,很难使用关系型数据库进行处理的场景,清晰描述场景并指出困难所在,要求原创  譬如说:以易迅电商为例,顾客会对购买的商品做出反馈评论,这些评论都是非结构化的数据,如 ...

  6. Ngrok远程桌面及ssh配置

    上一篇Ngrok 内网穿透利器 使用教程我们讲到Ngrok的基本使用教程,这篇描述一下Ngrok的远程桌面及ssh配置 Step 1 修改配置文件ngrok.cfg server_addr: &quo ...

  7. 一致性哈希算法学习及JAVA代码实现分析

    1,对于待存储的海量数据,如何将它们分配到各个机器中去?---数据分片与路由 当数据量很大时,通过改善单机硬件资源的纵向扩充方式来存储数据变得越来越不适用,而通过增加机器数目来获得水平横向扩展的方式则 ...

  8. AC日记——石子归并 codevs 1048

    1048 石子归并  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描述 Description 有n堆石子排成一列,每堆石子 ...

  9. uGUI练习(一) Anchor

    一.练习步骤 如果用过NGUI的Anchor,我们知道在2.x的版本有UIAnchor组件(下图左),3.x版本中,每个UIWidget有自带的Anchors(下图右) 而uGUI的Anchor用起来 ...

  10. java 14 -10 Calendar类以及练习

    Calendar:它为特定瞬间与一组诸如 YEAR.MONTH.DAY_OF_MONTH.HOUR 等 日历字段之间的转换提供了一些方法, 并为操作日历字段(例如获得下星期的日期)提供了一些方法. 1 ...