logo头像

求知若渴,虚心若愚

jQuery - jQuery源码学习 - 定义一些变量和函数(21行-94行)(三)

load

  • 页面上所有的资源(图片,音频,视频等)被加载以后才会触发load事件
  • 简单来说,页面的load事件会在DOMContentLoaded被触发之后才触发
  • onload事件所有的浏览器都支持:window.load=function(){}
  • 我们在 jQuery 中经常使用的 (document).ready(function() { // …代码… }); 其实监听的就是 DOMContentLoaded 事件
  • 而(document).load(function() { // …代码… }); 监听的是 load 事件。
  • 在用jquery的时候,我们一般都会将函数调用写在ready方法内,就是页面被解析后,我们就可以访问整个页面的所有dom元素,可以缩短页面的可交互时间,提高整个页面的体验

addEventListener

  • 用于向指定元素添加事件句柄
  • 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄
1
2
3
4
5

// 为 <button> 元素添加点击事件。 当用户点击按钮时,在 id="demo" 的 <p> 元素上输出 "Hello World" :
document.getElementById("myBtn").addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
});

TIP
Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法

Opera 7.0 及 Opera 更早版本也不支持。

对于这些不支持该函数的浏览器,你可以使用 attachEvent() 方法来添加事件句柄

1
2
3
4
5
6
7

var x = document.getElementById("myBtn");
if (x.addEventListener) { //所有主流浏览器,除了 IE 8 及更早 IE版本
x.addEventListener("click", myFunction);
} else if (x.attachEvent) { // IE 8 及更早 IE 版本
x.attachEvent("onclick", myFunction);
}
参数 描述
event 必须。字符串,指定事件名。
注意: 不要使用 “on” 前缀。 例如,使用 “click” ,而不是使用 “onclick”。
提示: 所有 HTML DOM 事件,可以查看菜鸟教程完整的 HTML DOM Event 对象参考手册
function 必须。指定要事件触发时执行的函数。
当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如, “click” 事件属于 MouseEvent(鼠标事件) 对象。
useCapture 可选。布尔值,指定事件是否在捕获或冒泡阶段执行。
可能值:
true 事件句柄在捕获阶段执行
false- 默认。事件句柄在冒泡阶段执行
  • 您可以通过函数名来引用外部函数。
  • 您可以在文档中添加许多事件,添加的事件不会覆盖已存在的事件
  • 您可以在同一个元素中添加不同类型的事件
  • 当传递参数值时,使用”匿名函数”调用带参数的函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// 添加两个点击事件,不会覆盖
document.getElementById("myBtn").addEventListener("click", myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction);

// 添加多个不同事件
document.getElementById("myBtn").addEventListener("mouseover", myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction);
document.getElementById("myBtn").addEventListener("mouseout", someOtherFunction);

// 使用"匿名函数"调用带参数的函数
document.getElementById("myBtn").addEventListener("click", function() {
myFunction(p1, p2);
});

// this访问元素
document.getElementById("myBtn").addEventListener("click", function(){
this.style.backgroundColor = "red";
});

// 添加 <div> 事件句柄
document.getElementById("myDIV").addEventListener("mousemove", myFunction);

// 移除 <div> 事件句柄
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);

removeEventListener

1
2
3
4
5
6

// 语法
element.removeEventListener(event, function, useCapture)

// 移除 <div> 元素的事件句柄
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
  • 如果要移除事件句柄,addEventListener() 的执行函数必须使用外部函数
  • 匿名函数,类似 “document.removeEventListener(“event“, function(){ myScript });” 该事件是无法移除的

TIP
Internet Explorer 8 及更早IE版本不支持 removeEventListener() 方法,Opera 7.0 及 Opera 更早版本也不支持。

对于这些不支持该函数的浏览器,你可以使用 detachEvent() 方法来移除由 attachEvent() 方法添加的事件句柄

这个也可能是jquery2.0.3不支持IE678的原因

兼容写法

1
2
3
4
5
6
7
8
9
10
11
12
13

// 不是IE就用2.03,IE8以上也用2.0.3,IE8及以下用1.11版本
<!--[if !IE]> -->
<script src="/Scripts/jquery-2.0.3.min.js"></script>
<!-- <![endif]-->

<!--[if lte IE 8]>
<script src="/Scripts/jquery-1.11.1.min.js"></script>
<![endif]-->

<!--[if gt IE 8]>
<script src="/Scripts/jquery-2.0.3.min.js"></script>
<![endif]-->
参数 描述
event 必须。要移除的事件名称。
注意:不要使用 “on” 前缀。 例如,使用 “click” ,而不是使用 “onclick”。
提示: 所有 HTML DOM 事件,可以查看菜鸟教程完整的 HTML DOM Event 对象参考手册
function 必须。指定要移除的函数。
useCapture 可选。布尔值,指定移除事件句柄的阶段。
可能值:
true - 在捕获阶段移除事件句柄
false- 默认。在冒泡阶段移除事件句柄
注意: 如果添加两次事件句柄,一次在捕获阶段,一次在冒泡阶段,你必须单独移除该事件。
1
2
3
4
5
6
7

var x = document.getElementById("myDIV");
if (x.removeEventListener) { // // 所有浏览器,除了 IE 8 及更早IE版本
x.removeEventListener("mousemove", myFunction);
} else if (x.detachEvent) { // IE 8 及更早IE版本
x.detachEvent("onmousemove", myFunction);
}
支付宝打赏 微信打赏

赞赏是对我们的肯定!