javascript事件学习笔记

事件冒泡

并不是所有的事件都支持事件冒泡,比如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判断是在绑定的元素自身发生的还是由子元素冒泡上来的。参数多个的话用‘‘‘‘括起来,而不是[]。

时间: 2024-10-21 08:27:25

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

JS 事件学习笔记(二)

在JS事件学习笔记(一)中学习了事件流.事件处理程序.事件对象以及跨浏览器应该怎么做等知识,现在我们现在来学习浏览器中主要的各种事件. 一. load事件 load事件通常是通过JavaScript代码指定,在window对象上绑定,实际上根据DOM2规定,应该在document上而非window上触发load事件,但是所有浏览器都在window对象上实现了该事件.因此以确保兼容性推荐使用该方法: 另外,在window上发生的事件也可以作为body元素的属性在html代码中添加. load事件的

JavaScript闭包学习笔记

原文:JavaScript闭包学习笔记 闭包(closure)是JavaScript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 下面就是我的学习笔记,对于JavaScript初学者应该是很有用的. 一.变量的作用域 要理解闭包,首先必须理解JavaScript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. JavaScript语言的特殊之处,就在于函数内部可以直接读取全局变量. 1 var n=999; 2 3 function f1() { 4 alert

javascript面向对象学习笔记(二)——创建对象

javascript面向对象学习笔记(二)--创建对象 工厂模式 该模值抽象了创建具体对象de过程.用函数来封装噫特定接口创建对象的细节. function createPerson(name,age,job){ var o=new Object(); o.name=name; o.age=age; o.job=job; o.sayName=function(){ alert(this.name); }; return o; } var person1=createPerson("Chiaki&

C#中的委托、事件学习笔记

1.委托delegate 委托delegate也是一种类型,在任何可以声明类的地方都可以声明委托,它将方法当做另一个方法的参数进行传递,这样就可以传递不同的方法,完成不同的功能,使程序具有很好的可扩展性. 举例: 假设这里有一台电脑,有人会用它写程序,有人会用它打游戏,有人会用它看电影,有人会用它边听音乐边玩游戏,有人会用它边听音乐边看文档,边上QQ. 这台电脑可以抽象成一个类Computer,里面有个方法DoWork,所有的人都要通过这个方法来做自己的事情. 不用委托的时候我们可以实现一些固定

JavaScript正则表达式学习笔记之一 - 理论基础

自从年前得空写了两篇文章之后就开始忙了,这一忙就是2个月??.当时信誓旦旦说的定期写篇博客的计划也就泡汤了??,不过好在最近有空,顺便总结一下这两个月遇到的几个问题.第一个问题就是项目中用到了一些正则才发现之前被自己忽略的正则是时候补一补了.恰逢今天周六??,就把自己学习JavaScript正则表达式的笔记整理成文,写了这篇关于正则表达式理论基础的文章,希望本文能对有需要的同学提供帮助.号外:本文相对基础,大神请忽略??. 一. 基本概念 正则表达式是用于匹配字符串中字符组合的模式. 一种几乎可

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

写在前面 最近在看<MVC的Javascript富应用开发>一书,本来是抱着一口气读完的想法去看的,结果才看了一点就傻眼了:太多不懂的地方了.只好看一点查一点,一点一点往下看吧,进度虽慢但也一定要坚持看完.本学习笔记是对书上所讲解内容的理解和记录. 笔记里的代码大多会按书上摘录下来,因为<MVC的Javascript富应用开发>是结合了JQuery库,所以对于JQuery中不太懂的知识点也会附在代码后面,也算是一些额外的收获. MVC概述 要学习MVC,首先得知道MVC是什么,MV

《JS高程》事件学习笔记

事件:文档或浏览器窗口中发生的一些特定的交互瞬间,也即用户或浏览器自身执行的某种动作. ------------------------------------------------------------------------------------------------------------- 一.事件流 事件流:描述的是页面中接收事件的顺序. IE:事件冒泡流,即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档): NetScape:事件捕获流,即不太具体的节

JavaScript正则表达式-学习笔记(不定期更新)

JavaScript权威指南学习笔记,禁止转载! 8.正则表达式 在常见的字符串检索或替换中,我们需要提供一种模式表示检索或替换的规则. 正则表达式使用单个字符串来描述.匹配一系列符合某个句法规则的字符串. 使用: /\d\d\d/.test("123");  //true new RegExp("Bosn").test("Hi,Bosn");  //true 正则基础: . 任何字符(除换行符以外) /-/.test('[email prote

JavaScript对象-学习笔记

JavaScript权威指南学习笔记,禁止转载! 5.对象 对象的属性是无序的,每个属性都有一个字符串key和值value, 数据属性的标签:writable.enumerable.configurable.value 访问器属性的标签:enumerable.configurable.get.set.get表示属性可读,set表示属性可写.属性前面有下划线表示只能通过对象方法get/set访问的属性,也就是访问器属性. (1)创建对象 1)字面量var obj={x:1,y:2}; 2)new: