前言

JavaScript是一种事件驱动型语言。事件驱动是指JavaScript引擎并不是在看到代码之后就会立即执行,而是会在合适的时间才去执行。这个合适的时间是指当某个事件发生之后(例如一个输入框的内容发生了变化,这就是一个事件)。只有当相应的事件发生了之后,相应的操作才会执行,这就是事件驱动。

事件驱动包含三个关键内容:事件、事主和处理方法。

理解了事件模型,我们就能明白JavaScript中的代码虽然是用于描述怎么操作对象的,但是并不一定要立即操作对象。

事件基础、事件侦听与抛发

js事件分为系统事件和自定义派发事件。

IE8以上支持

  • DOM.addEventListener(事件类型,事件回调函数);

    事件侦听方法,仅用于仅用于EventTarget对象,给DOM元素添加一个事件侦听(监听),只能收到对应事件类型的消息,当收到这个消息。就执行事件回调函数。


//这里click这个消息就是系统消息,clickHandler,就是这个系统消息收到后,执行的事件回调函数。
document.addEventListener("cilck",clickHandler);
/**
事件回调函数
e 有且仅有一个参数e
e 是一个事件对象,侦听事件收到的消息时获得的事件对象
*/
function clickHandler(e){
console.log(e);
}
  • EventTarget.dispatchEvent(事件对象);

    抛发事件方法,派发事件,仅用于EventTarget对象

    //这里的“myClick”,就是自定义事件类型,是事件传输的“暗号”。
document.addEventListener("myClick",myClickHandler); var evt = new Event("myClick");//创建一个事件对象
evt.a=10;
document.dispatchEvent(evt);//向document抛发新建的event事件,抛发事件关键是将新建事件的参数传输出来 function myClickHandler(e){
console.log(e===evt);//true
console.log(e.a);//10,接收到了派发事件对象的参数
}

总结

  1. 事件必须先侦听后抛发。
  2. 侦听和派发的对象是同一个。
  3. 侦听和派发的事件类型完全相同。其实事件类型就是一个任意字符串
  4. 系统派发的事件字符串是固定的,自定义派发的事件,字符串可以任意
  5. 事件侦听回调函数,不能传参,因此事件回调函数中有且仅有一个参数,这个参数即为事件对象
  6. 事件都可以手动派发,手动派发的话,页面加载完后就会执行

案例

对象间数据传递, 打算执行obj2.c 将局部变量5传递给obj1的方法b中

要求:使程序模块的可重用性、移植性大大增强。一个好的内聚模块应当恰好做一件事。

obj1 和 obj2 互相调用,但是不相互影响,删除任意一个函数后,也不会报错。

// 高内聚低耦合
var obj1={
a:function(){
// this 对象的方法中this就是该对象自身,这里this就是obj1
document.addEventListener("aaa",this.b);
},
b:function(e){
// 传到这里
console.log(e.s);//5
}
} var obj2={
v:10,
c:function(){
var s=5;
var evt=new Event("aaa");
evt.s=s;
document.dispatchEvent(evt);
},
d:function(){
//......
} } obj1.a();//注册事件
obj2.c();//创建事件,并且把这个事件抛发出去

JS 的事件基础、事件侦听与抛发、的更多相关文章

  1. stopImmediatePropagation和stopPropagation (事件、防止侦听)

    参考: ActionScript 3.0 Step By Step系列(六):学对象事件模型,从点击按扭开始 actionscript宝典 一.事件模型 egret中的事件模型和flash是一样的,但 ...

  2. Vue.js 源码分析(七) 基础篇 侦听器 watch属性详解

    先来看看官网的介绍: 官网介绍的很好理解了,也就是监听一个数据的变化,当该数据变化时执行我们的watch方法,watch选项是一个对象,键为需要观察的数据名,值为一个表达式(函数),还可以是一个对象, ...

  3. Js 事件基础

    一:js中常见得事件 (1) : 鼠标事件         click :点击事件         dblclick :双击事件         contextmenu : 右键单击事件        ...

  4. vue02 过滤器、计算和侦听属性、vue对象的生命周期、阻止事件冒泡和刷新页面

    3. Vue对象提供的属性功能 3.1 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 定义过滤器的方式有两种. 3.1.1 使用Vue.fil ...

  5. js事件流、事件处理程序/事件侦听器

    1.事件流 事件冒泡 IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档). 事件捕获 ...

  6. js基础——事件绑定(事件监听)

    JavaScript事件一共有三种监听方法分别如下: 1.事件监听一夹杂在html标签内 <div id="box" onClick="alert('HELLO W ...

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

    目录: 前言 Node.js事件驱动介绍 Node.js事件 注册并发射自定义Node.js事件 EventEmitter介绍 EventEmitter常用的API error事件 继承EventEm ...

  8. JavaScript DOM高级程序设计 4.3控制事件流和注册事件侦听器--我要坚持到底!

    一.事件流 我们通过下面一个实例,进行说明. <body> <h1>Event Flow</h1> <ul id="nav"> &l ...

  9. Android事件侦听器回调方法浅谈

    http://developer.51cto.com/art/201001/180846.htm Android事件侦听器作为视图View类的接口,其中包含有不少回调方法,比如:onClick():o ...

随机推荐

  1. Natas27 Writeup(mysql溢出截断漏洞)

    Natas27: 一个登录节界面,查看源码. <html> <head> <!-- This stuff in the header has nothing to do ...

  2. win7 win10 更换电脑盘符的图标

    效果如下 第一步 -> 1.把文件全放到盘符住目录 2.如果需要更换图标 (文件最好是ICO后缀的) 打开 Autorun 文件并编辑 第二步 -> 重启电脑就完了 下载连接  已经放到码 ...

  3. css第二波

    目录 css第二波 盒子模型 浮动 三种取值 清除浮动 浮动页面布局 溢出 定位 相对定位 relative(相对定位) 绝对定位 absolute(绝对定位) 固定定位 fixed(固定) 模糊框 ...

  4. hdu3367最大伪森林(并查集)

    题目链接:http://icpc.njust.edu.cn/Problem/Hdu/3367/ 题目要求一个连通图的最大伪森林,伪森林是一个最多有一个回路的图.我们只要用Kruskal最大生成树的策略 ...

  5. P3916 图的遍历 题解

    原题链接 简要题意: 求从每个点开始,可以到达的编号最大的点. 我们只要发现一条性质,这题就变得挺简单了. 你想,如果从每个点开始走,分别遍历,肯定是不科学的. 因为是有向图,所以当前点 \(x\) ...

  6. 新版Shader组件更新啦,支持 Creator2.3.x 外,还有新特性...

    B站视频 https://www.bilibili.com/video/BV1j7411X7mG/ 新版 ShaderHelper 组件更新啦,这个版本主要更新了三个功能: Cocos Creator ...

  7. html5 window.postMessage 传递数据的使用

    window.postMessage(图片介绍): 发送方(图片介绍): 接收方(图片介绍): 个人测试一(iframe): 发送方,地址为:http://localhost:63342/HelloH ...

  8. Building Applications with Force.com and VisualForce (DEV401) (二十):Visualforce Pages: Visualforce Componets (Tags)

    Dev401-021:Visualforce Pages: Visualforce Componets (Tags) Module Agenda1.Tag Basics2.Tag Bindings T ...

  9. OSLab:实模式与保护模式

    日期:2019/5/18 12:00 内容:操作系统实验作业:x86:IA-32:实模式与保护模式. PS:如果我们上的是同一门课,有借鉴代码的铁汁请留言告知嗷.只是作业笔记,不推荐学习. 一.实模式 ...

  10. Python python 函数参数:可变参数

    # 可变参数 '''传入的参数数量是不确定的 ''' '''若是要计算几个数(未知)的平方和 ''' def cal(nums): sum = 0 for num in nums: sum = sum ...