javascript一个重要知识点:事件。
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一个重要知识点:事件。的更多相关文章
- JavaScript一个鼠标滚动事件的实例
<script type="text/javascript" src="./whenReady.js"></script> <!- ...
- javascript事件有哪些?javascript的监听事件
事件类型: 1.界面事件 onload:描述文档,图片,css已经frame,object加载完毕时触发,window.onload window.onload = function(){ //代表图 ...
- JavaScript的for循环中嵌套一个点击事件为何点击一次弹出多个相同的值
先看下面一段代码: for(var i=0; i<10; i++) { $('#ul').bind('click', function() { alert(i) }) } 对于这段代码,当点击I ...
- javascript中关于value的一个小知识点(value既是属性也是变量)
今天在学习input的value值时,发现这么一个小知识点,以前理解不太透彻 [1]以下这种情况是常见情况,会弹出“测试内容” <input type="button" va ...
- 《JavaScript 模式》知识点小抄本(下)
介绍 最近开始给自己每周订个学习任务,学习结果反馈为一篇文章的输出,做好学习记录. 这一周(02.25-03.03)我定的目标是<JavaScript 模式>的第七章学习一遍,学习结果的反 ...
- 《JavaScript 模式》知识点小抄本(上)
介绍 最近开始给自己每周订个学习任务,学习结果反馈为一篇文章的输出,做好学习记录. 这一周(02.25-03.03)我定的目标是<JavaScript 模式>的第七章学习一遍,学习结果的反 ...
- Javascript并发模型和事件循环
Javascript并发模型和事件循环 JavaScript的"并发模型"是基于事件循环的,这个并发模型有别于Java的多线程, javascript的并发是单线程的. Javas ...
- js中关于value的一个小知识点(value既是属性也是变量)
今天在学习input的value值时,发现这么一个小知识点,以前理解不太透彻. [1]以下这种情况是常见情况,会弹出“测试内容” <input type="button" v ...
- JavaScript学习06 JS事件对象
JavaScript学习06 JS事件对象 事件对象:当事件发生时,浏览器自动建立该对象,并包含该事件的类型.鼠标坐标等. 事件对象的属性:格式:event.属性. 一些说明: event代表事件的状 ...
随机推荐
- 如何避免命令 rm -rf 的悲剧
一.root高管用户为例,其他用户类同. https://www.cnblogs.com/eos666/articles/10389179.html [root@jenkins /]# vim /ro ...
- WIN7无法保存打印机设置错误0x000006d9处理办法(转载)
办公电脑安装了GHOST版WIN7操作系统,在设置打印机共享时,报(错误0x000006d9),无法设置打印机共享, 查看微软官方文档:说是停止或禁用了Windows防火墙服务,必须启用 Window ...
- php libevent扩展
Libevent 是一个用C语言编写的.轻量级的开源高性能网络库,主要有以下几个亮点:事件驱动( event-driven),高性能;轻量级,专注于网络,不如 ACE 那么臃肿庞大: 源代码相当精炼. ...
- jemeter安装步骤
1.jmeter下载地址:http://jmeter.apache.org/download_jmeter.cgi 2.在安装jmeter之前首先要安装jdk1.8以上版本,朋友们,千万不要忘了 jd ...
- python的包装和授权
包装:python为大家提供了标准数据类型,以及丰富的内置方法,其实在很多场景下我们都需要基于标准数据类型来定制我们自己的数据类型,新增/改写方法,这就用到了我们刚学的继承/派生知识(其他的标准类型均 ...
- vue-cli 中eslint代码检查之过滤指定文件
在需要过滤的文件头部末尾分别添加:/* eslint-disable */,/* eslint-disable no-new */
- 在 vue-test-utils 中 mock 全局对象
vue-test-utils 提供了一种 mock 掉 Vue.prototype 的简单方式,不但对测试用例适用,也可以为所有测试设置默认的 mock. mocks 加载选项 mocks 加载选项 ...
- 提高生产力:Web前端验证的标准化
统一验证标准,减少重复劳动,提高生产力. 当公司内部有多个Web项目的时候,统一验证标准就很有必要了.统一不同项目的验证规则,比如 同为用户名 使用同一套标准,甚至用户名和机构名等也使用同一套标准.( ...
- 【Codeforces Round #505 (rated, Div. 1 + Div. 2, based on VK Cup 2018 Final) B】Weakened Common Divisor
[链接] 我是链接,点我呀:) [题意] 给你n个数对(ai,bi). 让你求一个大于1的数字x 使得对于任意的i x|a[i] 或者 x|b[i] [题解] 求出第一个数对的两个数他们有哪些质因子. ...
- android继续探索Fresco
我们接着上文继续说,上篇博客中我们已经知道了Fresco怎么用,也知道了它的非常多属性.可是非常多时候xml文件是不能满足你的要求的.这就须要你在代码中动态的改变显示的内容,今天我们就来探索一下怎样在 ...