事件监听的理解

一,

事件监听:为同一个对象的同一个事件绑定多个事件处理程序

事件绑定:对DOM元素绑定事件处理函数  一般分为三种  1、在DOM元素中直接绑定  2、在js中绑定  3、绑定事件监听函数

事件委托:利用冒泡的原理,把事件加到父级上,触发执行效果

事件委托的好处:

1、实现对未来元素事件的绑定

未来元素:绑定事件时,页面上还不存在的元素

2、减少事件绑定,提高性能

1、事件分为DOM 0级事件和Dom 2级事件,DOM2级事件也叫做事件监听。DOM 0级事件的缺点是如果事件相同 后者的事件会覆盖前者的事件,DOM2级事件可以解决这个问题

二、DOM2级事件的方法是

addEventListener()

参数1:事件类型  不需要加on

参数2:回调函数

参数3:布尔值  true代表捕获   false代表冒泡

解绑事件方法:removeEventListener()

但是IE不支持此方法

IE浏览器下用:attachEvent()

参数1:事件类型  需要加on

参数2:回调函数

解绑事件方法:detachEvent()

3、事件流、事件冒泡、事件捕获

当一个HTML元素产生一个事件时,该事件会在元素节点与根节点之间的路径传播,路径所经过的节点都会收到该事件,这个传播的过程叫做DOM事件流

元素触发事件时,事件的传播过程称为事件流,过程分为捕获和冒泡两种

冒泡事件:微软提出的   事件由子元素传递到父元素的过程,叫做冒泡

捕获事件:网景提出的   事件由父元素到子元素传递的过程,叫做事件捕获

4、IE与火狐的事件机制有什么区别?

事件处理机制:IE是事件冒泡、火狐是 事件捕获;

5、事件代理/事件委托

利用冒泡机制,将子元素的事件委托给父元素去监听(给父元素添加事件),当子元素触发事件时,事件冒泡到父级如果希望指定的子元素才能触发事件,可以通过事件对象(event)获得事件源(target),然后通过       条件判断是不是期望的子元素,如果是的话,执行事件,否则不执行

6、事件委托的好处

1、实现对未来元素事件的绑定

2、减少事件绑定,提高性能

7、如何找到事件源

var target = e.target||e.srcElement

tagName能找到事件源的元素名

原文地址:https://www.cnblogs.com/-Los/p/9111870.html

时间: 2024-10-10 18:16:41

事件监听的理解的相关文章

Zookeeper 事件监听 - 史上最详解读

目录 写在前面 1.1. Curator 事件监听 1.1.1. Watcher 标准的事件处理器 1.1.2. NodeCache 节点缓存的监听 1.1.3. PathChildrenCache 子节点监听 1.1.4. Tree Cache 节点树缓存 写在最后 疯狂创客圈 亿级流量 高并发IM 实战 系列 疯狂创客圈 Java 分布式聊天室[ 亿级流量]实战系列之 -25[ 博客园 总入口 ] 写在前面 ? 大家好,我是作者尼恩.目前和几个小伙伴一起,组织了一个高并发的实战社群[疯狂创客

【COCOS CREATOR 系列教程之二】脚本开发篇&事件监听、常用函数等示例整合

[Cocos Creator ](千人群):  432818031 上一篇,介绍了Himi在使用过cc所有组件后的一篇总结,没有具体介绍每个组件的原因在于官方文档很齐全,而且也有视频的介绍. 所以希望童鞋们可以把我这两篇博文当成对组件.脚本两部分开发的整理与总结. 后续的文章,Himi应该主要更新一些官方还未补充或者还没有的教程.避免无用功. 下面直接放出代码,因为不是很难理解.所以不再一一赘述,都是常用的函数.事件监听.动作回调.定时器等开发过程中必接触的. 大致内容如下: cc 属性介绍 获

事件监听:诀别Android繁琐的事件注册机制——view.setOnXXXXListener 滚犊子

好久没写过随笔了......windows phone生态没起来,属于.net阵营的我最近工作不是太忙,闲暇之余就心血来潮开始研究安卓.先简单扯两句这几天学习下来对java事件监听机制的一点感触.客观地讲,java的事件监听机制相比.net好原始,暂不说委托.lamda.泛型等的繁琐,仅一个事件监听,就需要各种listener才能实现,比如安卓里到处都是view.setOnXXXXListener.被C#“语法糖”和宇宙第一IDE惯坏的我真心有点不习惯,于是就决定写个工具来封装这些烦人的list

前端基本知识(四):JS的异步模式:1、回调函数;2、事件监听;3、观察者模式;4、promise对象

JavaScript语言将任务的执行模式可以分成两种:同步(Synchronous)和异步(Asychronous). “同步模式”就是一个任务完成之后,后边跟着一个任务接着执行:程序的执行顺序和排列顺序是一直的:”异步模式”则完全不同,每一个任务都有一个或者多个回调函数(callback),前一个任务结束的时候,不是执行下一个任务,二十执行回调函数,后一个任务则是不等前一个任务结束就执行,所以程序的执行顺序与任务顺序不一致的,异步的. 在浏览器端,耗时时间长的操作都应该异步执行,避免浏览器数去

WebView使用详解(二)——WebViewClient与常用事件监听

登录|注册     关闭 启舰 当乌龟有了梦想-- 目录视图 摘要视图 订阅 异步赠书:Kotlin领衔10本好书      免费直播:AI时代,机器学习如何入门?      程序员8月书讯      每周荐书:Java Web.Python极客编程(评论送书) WebView使用详解(二)--WebViewClient与常用事件监听 2016-05-28 11:24 20083人阅读 评论(13) 收藏 举报  分类: 5.andriod开发(148)  版权声明:本文为博主原创文章,未经博主

Javascript异步编程方法之------“事件监听”

Javascript异步编程方法之------“事件监听”另一种思路是采用事件驱动模式.任务的执行不取决于代码的顺序,而取决于某个事件是否发生.还是以f1和f2为例.首先,为f1绑定一个事件(这里采用的jQuery的写法).f1.on('done', f2);上面这行代码的意思是,当f1发生done事件,就执行f2.然后,对f1进行改写:function f1(){setTimeout(function () {// f1的任务代码f1.trigger('done');}, 1000);}f1.

事件监听addEventListener()和removeEventListener() ---------1

一直想写一个原生事件监听的记录,方便以后看,不愿意写主要是事件监听的单词太长,记起来好难记每次都要查,这次把知道的写完了,来这里查好了,以后要是理解的更透彻了,就再补全好了 首先,DOM0级事件和DOM2级事件 给一个元素添加事件有三种方法 HTML <input type="button" value='button1' id='btn1' /><input type="button" value='button2' id='btn2' />

Node.js 教程 05 - EventEmitter(事件监听/发射器 )

目录: 前言 Node.js事件驱动介绍 Node.js事件 注册并发射自定义Node.js事件 EventEmitter介绍 EventEmitter常用的API error事件 继承EventEmitter 前言: 今天事儿太多了,没有发太多的东西.不好意思了各位. 本篇主要介绍Node.js中的事件驱动,至于Node.js事件概念的东西,太多了. 本系列课程主要抱着的理念就是,让大家慢慢的入门,我也尽量写的简单一点. 所以呢,本文事件驱动,大家的目标应该是:理解Node.js的事件驱动.会

关于事件监听机制的总结(Listener和Adapter)

记得以前看过事件监听机制背后也是有一种设计模式的.(设计模式的名字记不清了,只记得背后实现的数据结构是数组.) 附上事件监听机制的分析图: 一个事件源可以承载多个事件(只要这个事件源支持这个事件就可以,男人就不支持生孩子的事件)  事件和监听器有对应关系的. 下面用awt中的标准图形化界面分析: 接口WindowListener 中有一个实现类WindowAdapter类.适配器类. EventListener.java 下面是所有超级接口EventListener.java的源代码   其实就