事件冒泡

并不是所有的事件都支持事件冒泡,比如submit ,focus,blur不支持事件冒泡,mouseover,mouseout虽然支持冒泡,但是一般不用,因为需要经常计算元素的位置,消耗比较大。
事件冒泡带来的优点是可以使用事件委托,提高了页面的性能,缺点是父级元素中如果也绑定了一样的事件,那么子元素事件的触发也会触发父级元素的事件,解决办法就是禁止子元素的事件冒泡。

事件委托

这是好东西,借助他可以提高页面的性能。首先,每个函数都是对象,都会占用内存,内存中的对象越多,性能越差。其次,必须事先指定所有事件程序而导致DOM的访问次数,会延迟整个页面的交互时间。
比如cick事件,我们可以把页面上所有的click事件都绑定到document元素上,然后根据event.target对象的属性(比如class,id什么的)区分,确定是来自哪个事件然后执行相应的代码。
事件委托还有一个优点,如果某些DOM是动态添加的,那么一旦添加后也会立即绑定相应的事件(如果在document元素绑定了的话),就不用再重新去绑定啦。
使用event.currentTarget == event.target可以判断是在绑定的元素自身发生的还是由子元素冒泡上来的。

jQuery中的事件绑定函数:on

关键是它的selecter参数,如果没有这个参数,直接在这个元素上触发,不管是本身触发还是子元素冒泡上来触发,当然可以在function中区分event.target实现事件委托。
如果selecter参数存在,那么为事件委托。只有在参数中选择器这一级及其后代上触发,之上的不会触发。同样可以用event.currentTarget == event.target判断是在绑定的元素自身发生的还是由子元素冒泡上来的。参数多个的话用''''括起来,而不是[]。

javascript事件学习笔记的更多相关文章

  1. JavaScript正则表达式学习笔记(二) - 打怪升级

    本文接上篇,基础部分相对薄弱的同学请移步<JavaScript正则表达式学习笔记(一) - 理论基础>.上文介绍了8种JavaScript正则表达式的属性,本文还会追加介绍几种JavaSc ...

  2. C#委托与事件学习笔记

    委托事件学习笔记 本文是学习委托和事件的笔记,水平有限,如有错漏之处,还望大神不吝赐教. 什么是委托?从字面意思来解释,就是把一个动作交给别人去执行.在实际开发中最常用的就是使一个方法可以当做一个参数 ...

  3. javascript正则表达式 - 学习笔记

    JavaScript 正则表达式 学习笔记 标签(空格分隔): 基础 JavaScript 正则表达式是用于匹配字符串中字符组合的模式.在javascript中,正则表达式也是对象.这些模式被用于Re ...

  4. JavaScript简易学习笔记

    学习地址:http://www.w3school.com.cn/js/index.asp 文字版: https://github.com/songzhenhua/github/blob/master/ ...

  5. javaScript 对象学习笔记

    javaScript 对象学习笔记 关于对象,这对我们软件工程到学生来说是不陌生的. 因为这个内容是在过年学到,事儿多,断断续续,总感觉有一丝不顺畅,但总结还是要写一下的 JavaScript 对象 ...

  6. 《JS高程》事件学习笔记

    事件:文档或浏览器窗口中发生的一些特定的交互瞬间,也即用户或浏览器自身执行的某种动作. -------------------------------------------------------- ...

  7. 【MarkMark学习笔记学习笔记】javascript/js 学习笔记

    1.0, 概述.JavaScript是ECMAScript的实现之一 2.0,在HTML中使用JavaScript. 2.1 3.0,基本概念 3.1,ECMAScript中的一切(变量,函数名,操作 ...

  8. Javascript MVC 学习笔记(一) 模型和数据

    写在前面 近期在看<MVC的Javascript富应用开发>一书.本来是抱着一口气读完的想法去看的.结果才看了一点就傻眼了:太多不懂的地方了. 仅仅好看一点查一点,一点一点往下看吧,进度虽 ...

  9. Javascript作用域学习笔记(三)

    看完<你不知道的javascript>上,对作用域的新的理解(2018-9-25更) 一.学习笔记:   1.javascript中的作用域和作用域链 +  每个函数在被调用时都会创建一个 ...

随机推荐

  1. sublime text2 用ctags插件实现方法定位

    sublime text2 用ctags插件实现方法定位(转) 我们用sublime几乎都会首先安装这个插件,这个插件是管理插件的功能,先安装它,再安装其他插件就方便了. 点击sublime的菜单栏 ...

  2. CentOS_6.5 64位系统,安装git服务器+客户端

    ================ git服务器安装 ==================== CentOS安装Git服务器 Centos 6.4 + Git 1.8.2.2 + gitosis## . ...

  3. 虚拟攻防系统 HoneyPot

    转载原地址 http://www.2cto.com/Article/200410/9.html Honeypot 是一个故意设计为有缺陷的系统,通常是用来对入侵者的行为进行警报或者 诱骗.传统的 Ho ...

  4. 面试之BI-SQL--table转换

    题目如下: Num 1 2 4 6 7 8 10 11 13 写条SQL语句转成下表: Column1  Column2 1              2 4              4 6     ...

  5. HDU 4438 Hunters (数学,概率计算)

    题意:猎人A和B要进行一场比赛.现在有两个猎物老虎和狼,打死老虎可以得X分,打死狼可以得Y分.现在有两种情况: (1)如果A与B的预定目标不同,那么他们都将猎到预定的目标. (2)如果A与B的预定目标 ...

  6. c语言 while (~scanf("%d%d",&n,&m)) 在这里这个符号“~”是什么意思

    按位取反,简单地说就是二进制1变0,0变1 由于scanf是有返回值的,且返回值为int型 特别的此处用法导致只有scanf返回-1,循环才会结束,也就是要返回EOF while (~scanf(&q ...

  7. MVC神韵---你想在哪解脱!(十四)

    修正票价字段的精度 前面我们追加数据的时候遗留下来一个问题,就是在追加数据的时候,票价(Price)字段中输入的是9.99元,但是电影清单显示画面中该数据的票价字段显示为10元,这是为什么?这个问题发 ...

  8. 用C++ 自娱自乐

    最无聊的时光当属 考试前的复习时段了,在一些论坛上看到一些用字符组成的图像,觉得有点意思,于是,自己 用C++ 参考一些论坛的图像,写了下面这个东西,来表达此时的心情. #include<ios ...

  9. windows下远程adb

    Android 使用 adb命令 远程安装apk cmd下到你的adb文件夹,一般在platform-tools下. adb devices 列出全部设备 adb connect xxx.xxx.xx ...

  10. XML Helper XML操作类

    写的一个XML操作类,包括读取/插入/修改/删除. using System;using System.Data;using System.Configuration;using System.Web ...