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. VS2013 opencv 无法删除“继承的值”问题解决方案

    http://www.360doc.com/content/15/0103/14/110467_437739376.shtml 解决方案: (1)视图——其他窗口——属性管理器. 注意:是”属性管理器 ...

  2. 可横向滑动的vue tab组件

    示例 前端使用技术:框架->vue 组件>ly-tab一个用于移动端的可触摸滑动具有回弹效果的可复用Vue组件 ly-tab 介绍地址 ly-tab npm地址 使用步骤 1,引入包,定义 ...

  3. js 背景从无到黑的渐变 字从白到黑的渐变

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 匈牙利&&EK算法(写给自己看)

    (写给自己看)匈牙利算法(最大匹配)和KM算法(最佳匹配) 匈牙利算法 思想 不断寻找增广路,每次寻得增广路,交换匹配边和非匹配边,则匹配点数+1 这里增广路含义:交错路,即从未匹配点出发经过未匹配边 ...

  5. sklearn学习1----sklearn.SVM.SVC

    1.SVM有两种作用:分类和回归,分类是用SVC,回归用SVR. 2.SVC:(中文官网) 重点在svm.SVC(),fit(X,Y),以及SVC中的参数. 3.SVC参数: ①C,C是控制软间隔中的 ...

  6. C++基础 (3) 第三天 构造函数 构造函数初始化列表 拷贝构造函数 析构函数 静态成员变量

    // 同类之间无私处 2构造函数 3析构函数 4构造函数的种类和析构函数的顺序 结论:析构函数的调用顺序,跟对象的构造顺序相反,谁先构造,谁最后一个被析构. 拷贝构造函数: 注意: 等号写在下面和写在 ...

  7. js判断当前移动设备平台

    //js判断当前移动设备平台 var isiOs = false; var isAndroid = false; var isWindowsPhone = false; if(/(iPhone|iPa ...

  8. JavaScript模块化编程之AMD

    简单的说一下AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义".它采用异步方式加载模块,模块的加载不影响它 ...

  9. 小松之LINUX 驱动学习笔记(一)

    本篇主要是讲解驱动开发的基础知识以及一些环境配置方面的问题. 下面是一个hello world的简单的模块代码,很简单./*********************** 模块的简单例子* author ...

  10. python中的and、or 操作符

    在python中 非空 非零的数都为真 1. 其"and"操作符返回的结果是决定表达式结果的值:两边条件都为真则结果为真,有一假则为假 1) 当and两边条件为“真”时,返回的是a ...