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. AI:机器人与关键技术--总是被科普

    AI:机器人与关键技术--总是被科普 原文链接:www.csdn.net/article/2014-04-22/2819430 机器人发展建议: 有需求才有生产,有更高的需求才有发展: 第一条:我们的 ...

  2. MongoDB_可视化工具Robo 3T

    Robo 3T可以对MongoDB进行可视化操作. Robo 3T安装 官网下载地址:https://robomongo.org/ 进入官网,点击下载,Studio 3T功能更全面,基础功能是免费的, ...

  3. python 跑服务器,访问自己制作的简单页面

    1  python 跑服务器,访问自己制作的简单页面 2 # win+b出现一个网址http:/0.0.1:5000/复制到浏览器查看# http://127.0.0.1:5000/home 做这个首 ...

  4. 取/etc/password文件最后一个单词的最后一个字符

    三种方法都可以 [root@localhost ~]# sed -n "1,5 s#.*\(.\)#\1#p" /etc/passwd [root@localhost ~]# se ...

  5. 算法46----移除K位数字

    一.题目:移除K位数字 给定一个以字符串表示的非负整数 num,移除这个数中的 k 位数字,使得剩下的数字最小. 注意: num 的长度小于 10002 且 ≥ k. num 不会包含任何前导零. 示 ...

  6. Python数据分析4------------数据变换

    1.简单变换: 开方.平方.对数等 2.数据规范化: (1)离差标准化(最小最大标准化):消除量纲(单位)影响以及变异大小因素的影响. x1=(x-min)/(max-min) 代码:data1=(d ...

  7. 51nod-活动安排问题之二

    有若干个活动,第i个开始时间和结束时间是[Si,fi),活动之间不能交叠,要把活动都安排完,至少需要几个教室? 分析:能否按照之一问题的解法,每个教室安排尽可能多的活动,即按结束时间排序,再贪心选择不 ...

  8. BZOJ 2161 布娃娃 (主席树)

    题面 想了一个主席树做法 我们把每个区间的两个端点拆开 对$L,R$分别从小到大排序,分别从左到右依次把对应标号的$c_{i}$插入到权值主席树里 每次查询$p_{i}$,在排序后的$L,R$数组上分 ...

  9. java基础口述

    1:什么是变量?变量的定义格式?要使用变量需要注意什么? 在程序运行过程中,其值是可以在某个范围内发生改变的量. 变量其实就是内存中一小块区域. 由3部分组成: 1,数据类型: 限定变量的取值 2,变 ...

  10. CentOS 笔记(五) 常用工具

    远程 :XShell6  ,PuTTy FPT:Xfpt ,pscp.exe