javascript是事件驱动的,那什么是事件?事件就是在javascript中被侦测到DOM元素行为,就称之为javascript事件。

2、事件的三个阶段

事件的三个阶段分别为:

1、捕获阶段 2、目标阶段3、冒泡阶段。

捕获的概念:就会为了找到目标DOM元素,会从上往下一级一级查找,直到找到目标DOM元素。(window->document->html->body->......->目标DOM元素。

冒泡的概念:目标事件执行后,会从下往上一级一级查找是否有相同事件类型,直到window。

3、事件的绑定方式

1、最简单绑定方式:btn.onclick=function(){};

2、W3C标准绑定方式:addEventListener(事件名称,事件处理程序,useCapture)第三个参数是布尔值,如果是true表示捕获,如果是false就是冒泡,默认为冒泡。

3、IE中:attachEvent("on" + 事件名称, 事件处理程序)这个方法不支持:捕获阶段。

4、三种绑定事件this的指向问题。

1、 onclick 事件中的this 就是 当前对象

2、addEventListener 事件处理程序中的this:当前对象

3、attachEvent 事件处理程序中的this : window

5、事件兼容的封装

 var addEvent = function() {
//属于方法检测,判断window是否有该方法
if(window.addEventListener) { return function f1(target, type, handler) {
target.addEventListener(type, handler);
};
} else if(window.attachEvent) { return function f2(target, type, handler) {
target.attachEvent("on" + type, function() {
handler.apply(target);//因为this默认指向window,所以通过apply方法来改变this的指向问题
//apply使用方法:function.apply(第一个参数,第二个参数)
// 第一个参数:表示指向那个对象来调用函数
// 第二个参数:是一个数组或者是伪数组的对象 (这个参数是可选的)
这个数组中的每一项的值,都将作为被调用函数的参数
});
};
} else { return function f3(target, type, handler) {
target["on" + type] = handler;
};
}
}(); //封装事件兼容函数使用到了闭包技术,目的是:当在页面中多次调用该函数,可以避免重复判断,提高js执行效率。

javascript一个重要知识点:事件。的更多相关文章

  1. JavaScript一个鼠标滚动事件的实例

    <script type="text/javascript" src="./whenReady.js"></script> <!- ...

  2. javascript事件有哪些?javascript的监听事件

    事件类型: 1.界面事件 onload:描述文档,图片,css已经frame,object加载完毕时触发,window.onload window.onload = function(){ //代表图 ...

  3. JavaScript的for循环中嵌套一个点击事件为何点击一次弹出多个相同的值

    先看下面一段代码: for(var i=0; i<10; i++) { $('#ul').bind('click', function() { alert(i) }) } 对于这段代码,当点击I ...

  4. javascript中关于value的一个小知识点(value既是属性也是变量)

    今天在学习input的value值时,发现这么一个小知识点,以前理解不太透彻 [1]以下这种情况是常见情况,会弹出“测试内容” <input type="button" va ...

  5. 《JavaScript 模式》知识点小抄本(下)

    介绍 最近开始给自己每周订个学习任务,学习结果反馈为一篇文章的输出,做好学习记录. 这一周(02.25-03.03)我定的目标是<JavaScript 模式>的第七章学习一遍,学习结果的反 ...

  6. 《JavaScript 模式》知识点小抄本(上)

    介绍 最近开始给自己每周订个学习任务,学习结果反馈为一篇文章的输出,做好学习记录. 这一周(02.25-03.03)我定的目标是<JavaScript 模式>的第七章学习一遍,学习结果的反 ...

  7. Javascript并发模型和事件循环

    Javascript并发模型和事件循环 JavaScript的"并发模型"是基于事件循环的,这个并发模型有别于Java的多线程, javascript的并发是单线程的. Javas ...

  8. js中关于value的一个小知识点(value既是属性也是变量)

    今天在学习input的value值时,发现这么一个小知识点,以前理解不太透彻. [1]以下这种情况是常见情况,会弹出“测试内容” <input type="button" v ...

  9. JavaScript学习06 JS事件对象

    JavaScript学习06 JS事件对象 事件对象:当事件发生时,浏览器自动建立该对象,并包含该事件的类型.鼠标坐标等. 事件对象的属性:格式:event.属性. 一些说明: event代表事件的状 ...

随机推荐

  1. 高级I/O函数

    给套接口上的I/O设置超时 1.调用alarm,在调用超过指定时间时产生SIGALARM信号,这涉及到信号处理,而且可能和进程中其他的alarm冲突 2.使用select阻塞在等待I/O上,selec ...

  2. BZOJ 1266: [AHOI2006]上学路线route Floyd_最小割

    十分简单的一道题. 图这么小,跑一边 Floyd 就得到第一问最短路径的答案. 考虑第二问怎么求:我们可以先将最短路径组成的图从原图中抽离出来,构成新图 $G$. 我们发现,只要 $G$ 的起点与终点 ...

  3. 打包c++项目

    InstallShield Limited Edition for Visual Studio 2013 图文教程(教你如何打包.NET程序) InstallShield 2015 Limited E ...

  4. 解决python3在sublim Text3中中文乱码的问题

    在Tool >> BulidingSystem 中  新建 python3 写入如下代码 { "cmd": ["C:/python3/python.exe&q ...

  5. mmap,malloc分配随机内存

    随机数1G #cat malloc_rand_1g.c #include <stdio.h> /* printf, scanf, NULL */ #include <stdlib.h ...

  6. 实现el-dialog的拖拽,全屏,缩小功能

    基于el-dialog, 封装了一下.,实在懒得写,所以直接把代码 粘出来了 大概粘了一下效果.自己体会把. 组件使用 <el-dialog v-dialogDrag ref="xhz ...

  7. nyoj27-水池数目【DFS】

    题目描述: 南阳理工学院校园里有一些小河和一些湖泊,现在,我们把它们通一看成水池,假设有一张我们学校的某处的地图,这个地图上仅标识了此处是否是水池,现在,你的任务来了,请用计算机算出该地图中共有几个水 ...

  8. 谈谈python里面关于任务队列

    谈谈python里面关于任务队列 为什么要做任务队列 要回答这个问题我们首先看看在流水线上的案列,如果人的速度很慢,机器的速度比人的速度快很多,就会造成,机器生产的东西没有及时处理,越积越多,造成阻塞 ...

  9. codevs——T1576 最长严格上升子序列

    http://codevs.cn/problem/1576/  时间限制: 1 s  空间限制: 256000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描述 Descr ...

  10. 双向链表的实现与操作(C语言实现)

    双向链表也叫双链表,是链表的一种,它的每一个数据结点中都有两个指针,分别指向直接后继和直接前驱.所以,从双向链表中的随意一个结点開始,都能够非常方便地訪问它的前驱结点和后继结点. 单链表的局限 1.单 ...