JavaScript 基础学习（下）

最新推荐文章于 2021-07-03 13:10:33 发布

tplwang

最新推荐文章于 2021-07-03 13:10:33 发布

阅读量163

点赞数

分类专栏：前端文章标签： JavaScript

本文链接：https://blog.csdn.net/ckwang6/article/details/88783286

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

BOM

BOM（浏览器对象模型）（browser object model）

window 对象

表示一个浏览器的实例，是BOM的和新对象。
在浏览器中，window 既是 JavaScript 访问浏览器窗口的一个接口，又是 ECMAScript 规定的 Global 对象。

全局作用域

在全局作用域声明的变量、函数都会变成 window 对象的属性和方法。

定义全局变量与 window 对象上直接定义属性还是有差别的：全局变量不能通过 delete 删除，而直接在 window 上定义的属性可以。IE8及之前的版本执行此操作会抛出错误。

此外，尝试访问未声明的变量会抛出错误，但是通过查询 window 对象仅仅会得到 undefined

窗口位置

使用 moveTo() 和 moveBy() 可以将窗口精确地移动到一个新位置。

// 将窗口移动到屏幕左上角
window.moveTo(0, 0)

// 将窗口向下移动100像素
window.moveBy(0, 100)

// 将窗口向左移动 50 像素
window.moveBy(-50, 0)

导航和打开窗口

window.open() 方法既可以导航到一个特定的URL，也可以打开一个新的浏览器窗口。

这个方法可以接收 4 个参数：要加载的URL、目标窗口名称、一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。
其中第二个参数，若存在有一个该名称的窗口，则在该窗口内打开这个URL ，否则就创建一个新的名为该参数的窗口并打开。还可以是一些特殊窗口名称：_self, _parent, _top, _blank。

_blank：通过一个新的网页窗口打开链接
_self：在本身这个网页窗口打开新的链接，如果是在框架中，则仅在框架中打开。
_parent：主要针对于框架网页中的跳转，如果一个页面中有多个框架组成，想要整个页面跳转到其他网页链接，则目标就要使用 _parent ，如果不适用只会在页面中的一小块跳转。
_top：

调用 close() 函数可以关闭窗口。仅适用于通过 open() 打开的弹出窗口。对于浏览器的主窗口，没有用户的允许是不能关闭的。不过弹出窗口可以调用 top.close() 在不经用户允许的情况关闭自己。
大多数窗口都内置有弹出窗口屏蔽程序。如果浏览器器内置的屏蔽程序阻止弹出窗口，那么 window.open() 很可能会返回 null 。可以通过检测这个的返回值来判断窗口是否被屏蔽。如果是浏览器扩展程序拦截的话，window.open() 会抛出错误。

系统对话框
浏览器可以通过alert()、confirm()、prompt() 方法调用系统对话框向用户显示消息。其中 prompt 方法接受两个参数，要显示给用户的文本提示和文本输入域的默认值。

location 对象

location 提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。它既是 window 对象的属性，也是 document 对象的属性。window.location 和 document.location 引用的是用一个对象。

查询字符串参数

location 自带的访问URL中包含的查询字符串的属性并不方便，下面我们新建一个方法：

function getQueryStringArgs() {
	// 去的查询字符串，并去掉开头的问号
	var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
		args = {},
		items = qs.length ? qs.split("&") : [],
		item = null,
		name = null,
		value = null,
		i = 0,
		len = items.length;
	for (i = 0; i < len; i++) {
		item = items[i].split("=");
		name = decodeURIComponent(item[0]);
		value = decodeURIComponent(item[1]);
		if (name.length) {
			args[name] = value;	
		}
	}
	return args;
}

位置操作

location 对象可以通过很多方法改变浏览器的位置。最常用的方式是使用assign() 方法。

location.assign("http://www.test.com");

//下面的代码与显示调用 assign 方法的效果完全一样
window.location = "http://www.test.com";
location.herf = "http://www.test.com";

replace() 方法可以接收一个URL作为参数，导致浏览器位置改变，但不会在历史记录中生成记录，这样单机浏览器的后退就不能回到前一个页面。
reload() 方法可以以最有效的方式重新加载页面。意思就是如果页面没有改变则从缓存直接加载。

location.reload(); // 可能会从本地直接加载
location.reload(true); // 强制从服务器重新加载

navigator

提供了一些跟浏览器相关的信息。不同的浏览器提供的信息不同。

检测插件

可以使用 plugins 数组检测出浏览器中是都安装了特定的插件，比如广告屏蔽插件。

// not IE
function hasPlugin(name) {
	name = name.toLowerCase();
	for (var i = 0; i <navigator.plugins; i++) {
		if (navigator.plugins[i].name.toLowerCase().indexOf(name) > -1) {
			return true;	
		}
		return false;
	}
}

想要在IE中检测插件唯一的方式就是使用专有的 ActiveXObject 类型，并尝试创建一个特定的插件实例。IE 以 COM 对象的方式实现插件，COM 对象使用唯一标识符来标识。要想检测特定的插件，就必须知道其COM标识符。通过这个唯一标识符来创建实例，如果创建成功则意味着具有对象。
鉴于两种插件检测的方法差别巨大，因此典型的做法是为特定的插件创建检测方法。

screen 对象

screen 对象在编程中的用处不大，基本上只用来表明客户端的能力。

history 对象

history 是 window 对象的属性，保存着用户上网的历史记录。出于安全考虑，开发人员不能获得用户浏览过的URL，但是可以借助历史列表实现后退和前进。
go() 方法可以在历史记录中任意跳转，该函数的参数可以是一个整数，正数表示向前跳转的值，负数表示向后跳转。参数也可以是一个字符串，会跳转到包含该字符串的第一个位置，可能后退可能前进，具体看哪个位置最近。如果历史记录中不含有该字符，则什么都不做。
可以使用 back() 来标识前进一页，forward() 来表示后退一页。

客户端检测

有这个话题，主要是因为各家浏览器都不尽相同，有些功能可能没有一个统一的方法来实现。但是只要有通用的方法，我们还是要优先使用通用方法。

能力检测

检测浏览器是否具有某项能力。
在可能的情况下，尽量使用 typeof 进行能力检测。因为这不仅可以让你知道某个东西是不是存在，还能让你知道这个存在的东西是不是你想要的。
特别要注意的是，能力检测并不能代表浏览器检测，也就是说不能单单凭几个能力检测就确定浏览器类型。

怪癖检测

识别浏览器的特殊行为（通常是bug）。

用户代理检测

navigator.userAgent。每次HTTP请求过程中，用户代理字符串都会作为响应首部发送。在客户端，用户代理检测的优先级排在能力检测和怪癖检测之后。因为该字符串的内容的演变具有一段故事，感兴趣的同学可以自行搜索一下。

var client = function() {
	var engine = {...};
	var browser = {...};
	var system = {...};
}
var ua = navigator.userAgent;
if (window.opera) {
	engine.ver = brower.ver = window.opera.version();
	egine.opera = browser.opera = paraseFloat(engine.ver);
} else if (/AppleWebkit\/(\S+)/.test(ua)) {
	engine.ver = RegExp["$1"];
	engine.webkit = paraseFloat(engine.ver);

	if (/Chrome\/(\S+)/.test(ua)) {
		browser.ver = RegExp["$1"];
		browser.chrome = parseFloat(browser.ver);	
	} else if (/Version\/(\S+)/.test(ua)) {
		browser.ver = RegExp["$1"];
		browser.browser.safari = paraseFloat(browser.ver);	
	} else {
		var safariVersion = 1;
		if (engine.webkit < 100) {
			safariVersion = 1;	
		} else if (engine.webkit < 312) {
			safariVersion = 1.2;	
		} else if (engine.webkit < 412) {
			safariVersion = 1.3;	
		} else {
			safariVersion = 2;	
		}
		browser.safari = browser.ver = safariVersion;
	}
} else if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)) {
	engine.ver = browser.ver = RegExp["$1"];
	engine.khtml = browser.konq = paraseFloat(engine.ver);
} else if (/rv:([^\)]+)\)Gecko\/\d{8}/.test(ua)) {
	engine.ver = RegExp["$1"];
	engine.gecko = parseFloat(engine.ver);
	// 确定是不是 Firefox
	if (/Firefox\/(\S+)/.test(ua)) {
		browser.ver = RegExp["$1"];
		engine.firefox = parseFloat(browser.ver);
	}
} else if (/MSIE([^;]+)/.test(ua)) {
	engine.ver = browser.ver = RegExp["$1"];
	engine.ie = browser.ie = parseFloat(engine.ver);
}

DOM

DOM 是针对 HTML 和 XML 文档的一个 API。

IE 中的所有DOM对象都是以COM对象的形式实现的。

节点层次

DOM 可以将任何 HTML 或者 XML 描绘成一个由多节点构成的结构。文档节点是每个文档的根节点。一般是 <html> 元素。

Node 类型

DOM 1 级定义了一个 Node 接口，该接口将由DOM中的所有节点类型实现。Node接口在 JavaScript中是作为 Node 类型实现的。除了在 IE 之外，其他浏览器都可以访问到这个类型。
文档中所有的节点之间都存在这样或者那样的关系，父子关系，兄弟关系。
每一个节点都有一个 childNodes 属性，其中保存着一个 Nodelist 对象。Nodelist 是一种类数组对象，用于保存一组有序的节点。NodeList 对象的独特之处在于，它实际上是基于 DOM 界都动态执行查询的结果，因此 DOM 结构的变化都能够自动反映在 NodeList 对象中。

// 可以使用方括号或者 item() 来访问
var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1);
var count = someNode.childNodes.length; // 仅表示执行那一刻的长度

每一个几点都有 parentNode 属性，该属性执行文档树中的父节点。可以通过 previousSibling 和 nextSibling 访问同一 childNodes 列表中的兄弟节点。
在这里插入图片描述
常用的操作DOM的方法有 appendChild()，用于向 childNodes 列表的末尾添加一个节点。如果需要把节点放到特定位置则需要使用 insertBefore() 方法，该方法接受两个参数：要插入的节点和作为参照的节点。如果参照节点为 null ，则 insertBefore() 与 appendChild() 执行相同的操作。
replaceChild() 方法可以接受两个参数：要插入的节点和要替换的节点。该方法将移除要替换的节点，并由要插入的节点占据其位置。如果仅仅只是想要移除节点，可以使用 removeChild() 方法，被移除的节点将会成为该方法的返回值。以上两种方法移除的节点任然为文档所有，只不多在文档中没有自己的位置了。

以上几个方法都是操作某个节点的子节点。并不是所有类型的节点都有子节点。

cloneNode() 和 normallize() 就是所有类型的节点都有的方法。第一个用于创建调用这个方法的节点的一个完全相同的副本，该函数还可以接受一个布尔值参数，用于表示该方法是否执行深复制（深复制赋值节点及其整个子节点树，浅复制只复制节点本身），新复制的节点仅仅是一个孤立的节点，需要调用上述几种方法添加到文档中。第二个方法用于处理文档树中的文本节点，调用该方法会删除子节点中不包含文本的文本节点和合并相邻的文本节点。

cloneNode() 不会复制添加到 DOM 节点中的 JavaScript 属性，例如事件处理程序。只会复制特性。IE 会有一个bug，它会复制事件处理程序。

Document 类型

浏览器中，document 对象表示整个 HTML 页面。另外 document 对象还是 window 对象的一个属性，因此可以全局访问。
documentElement 属性始终指向 HTML 页面中的 <html> 元素。

var html = document.documentElement; // 取得对 <html> 的引用
html === document.childNodes[0]; // true
html === document.firstChild; // true

document 对象还有一个 body 属性，直接指向 <body> 元素。

var body = document.body;

可以通过 document.doctype 来访问 <!DOCTYPE>
另外还可以通过 title, URL, domain, referrer 等属性来访问文档相应的信息。

Element 类型

每个元素都有特性，可以使用 getAttribute(), setAttribute(), removeAttribute() 来操作元素的属性。

有两类特殊的属性，虽然有对应的属性名，但属性的值与通过 getAttribute() 访问得到的返回值并不相同。第一类是 style ，通过CSS为元素指定的样式，通过 getAttribute() 访问返回的是CSS文本，通过属性来访问返回的对象。第二类是像 onclick 这样的事件处理程序，通过 getAttribute()访问返回的是相应代码的字符串，直接访问属性则返回一个函数。

使用 document.creatElement() 来创建新元素。这个方法接受要创建元素的标签名来作为参数。在IE中可以为该方法传入完整的元素标签，也可以包含属性。

Text 类型

该类型包含的是可以照字面解释的纯文本内内容。纯文本可以包含转义后的HTML字符，但是不能包含 HTML 代码。该类型节点没有子节点。
使用 document.creatTextNode() 创建新的文本节点。DOM中存在相邻的同胞文本节点容易分不清哪个文本解答你表示哪个字符串，所以就要用到上文提到的 normallize() 方法。另外 Text 还提供了一个相反的方法 splitText() ，这个方法会将一个文本节点分成两个文本节点。

var textNode = document.createTextNode("Hello world!");
var newNode = textNode.splitText(5);
textNode // "Hello"
newNode // "world!"

Comment 类型

注释在DOM中是 Comment 类型。该类型与 Text 类型继承自相同的基类。所以它拥有除 splitText() 之外的所有字符串操作方法。

Attr 类型

元素的特性在 DOM 中以 Attr 类型来表示。特性就是存在于元素的 attributes 属性中的节点。

DOM 操作技术

动态脚本

动态样式

DOM 扩展

选择符 API

querySelector()

该方法接收一个 CSS 选择符，返回与该模式匹配的第一个元素，如果为空，则返回 null 。通过 Document 类型调用该方法，会在文档元素的范围内查找匹配的元素。而通过 Element 类型调用该方法只会在该元素后代元素的范围内查找匹配的元素。

querySelectorAll()

返回所有匹配的元素，返回的是一个 NodeList 实例。只要传递的参数有效，该方法都会返回 NodeList ，如果没有匹配元素，NodeList 就会是空的。

matchSelector()

该方法接受一个 CSS 选择符作为参数，若果调用元素与该选择符匹配，返回 true，否则返回 false。

元素遍历

HTML5

与类（class）相关的特征

getElementsByClassName()：返回 NodeList
classList：表示元素所有类名的集合。是新集合类型 DOMTokenList 的实例。

焦点管理

document.activeElement 属性始终会引用 DOM 中当前获得了焦点的元素。默认情况下，文档刚刚加载完成时，该属性保存的是 document.body 的引用，加载期间值为 null。另外还可以使用 document.hasFocus() 来判定文档是否获得了焦点，使用该方法可以判断用户是否在跟页面交互。

HTMLDocument 的变化

readyState 属性：有两个可能的值, loading 和 complete
兼容模式：在标准模式下 document.compatMode的值等于 “CSS1Compat”，而在混杂模式下值为“BackCompat”
head 属性：H5新增了 document.head 属性来引用文档的 <head> 元素。

// 通常的 hack 做法
var head = document.head || document.getElementByTagName("head")[0];

自定义数据属性

H5 可以为元素添加非标准的属性，前缀 data-。添加了自定义属性后的元素，可以通过元素的 dataset 属性来访问自定义属性的值。

插入标记

innerHTML属性：读模式下，该属性返回调用该元素的所有子节点（包括元素，注释和文本节点）对应的HTML标记。写模式下，可以用这个属性执行创建新的 DOM 树，这个 DOM 树会完全替换调用元素的所有子节点。
outerHTML属性：读模式下，该元素赶回调用它的元素及所有子节点的HTML标签。写模式下，会根据HTML字符串创建新的 DOM 字数，然后用这个 DOM 字数完全替换调用元素。与 innerHTML 的区别在于该属性会包含调用元素。
insertAdjacentHTML() 方法：接收两个参数，插入位置和要插入的HTML文本。
内存与性能问题：在使用上述方法的时候，可能造成内存占用问题，因为将元素从文档树中删除之后，元素与实践处理程序之间的绑定关系在内存中并没有一并删除。因此在使用上述方法时，最好先手工删除要被替换的元素的所有实践处理程序和JavaScript对象。

scrollIntoView() 方法

H5 选择了 scrollIntoView() 作为标准方法。可以将调用该方法的元素呈现在视口中。

事件

JavaScript 与 HTML 之间的交互是通过事件来实现的。

事件流

事件流描述的就是页面中接收事件的顺序。IE 提出的是事件冒泡流，Netscape 则是事件捕获流。

事件冒泡

事件开始时是由最具体的元素接收，然后逐级向上传播到较为不具体的节点。

事件捕获

事件从较为不具体的节点传向最具体的节点。目前建议使用事件冒泡。

DOM 事件流

DOM2级事件规定事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。
在这里插入图片描述

事件处理程序

事件处理程序以“on” 开头，click 事件的事件处理程序就是“onclick”。

HTML 事件处理程序

通过 event 变量可以直接访问事件对象，在事件响应程序的内部，this 等于事件的目标对象。

<input type="button" value="click" onclick="console.log(event)">
<input type="button" value="click" onclick="console.log(this)">

在这里插入图片描述

DOM0级事件处理程序

JavaScript事件传统的处理方式是将一个函数复制给一个事件处理程序属性。通过DOM0级方法指定的方法处理程序被认为是元素的方法。

var btn = document.getElementById("myBtn");
btn.onclick = function () {
	alert(this.id); // "myBtn"
}

DOM2 级事件处理程序

DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener() 和 removeEventListener() 。所有DOM节点都包含这两个方法。该方法接受3个参数：要处理的事件名，事件处理程序和一个布尔值。布尔值表示是否在捕获阶段地哦啊用处理程序，false 则表示在冒泡阶段调用事件处理程序。
DOM2级方法的好处就是可以添加多个事件处理程序。执行顺序按照添加顺序来触发。
通过addEventListener() 添加的事件，只能通过 removeEventListener() 来移除。并要求移除时的参数与移入时相同，这也就意味着通过 addEventListener() 添加的匿名函数将无法移除。

IE事件处理程序

IE中有 attachEvent() 和 deleteEvent() 两种方法。接收两个参数：事件处理程序名称和事件处理函数。IE8及更早的版本只支持事件冒泡，所以该方法默认会把事件处理函数添加到冒泡阶段。
在IE 中使用 attachEvent() 与使用 DOM0 级方法的主要区别是事件处理程序的作用域不同。DOM0级方法会在所属元素的作用域内运行，this是触发方法的元素。而使用attachEvent() 方法事件处理程序会在全局作用域中运行，this等于 window。

如果使用 attachEvent() 多次添加事件处理程序，在调用的时候的执行顺序是添加顺序的相反顺序。

事件对象

触发DOM上某个事件时，会产生一个事件对象event。这个对象中包含着所有与事件有关的信息。包含导致事件的元素、事件的类型以及其他特定相关的信息。鼠标操作导致的事件对象中，会包含鼠标的位置信息；键盘触发的事件中，会包含于按下的键有关的信息。

DOM 中的事件对象

浏览器会将一个 event 对象传入到事件处理程序中。不管是DOM0级还是 DOM2 级方法。

var btn = document.getElementById("myBtn");
	btn.onclick = function(event){
	alert(event.type); //"click"
};
btn.addEventListener("click", function(event){
	alert(event.type); //"click"
}, false);

var btn = document.getElementById("myBtn");
document.body.onclick = function(event){
	alert(event.currentTarget === document.body); //true
	alert(this === document.body); //true
	alert(event.target === document.getElementById("myBtn")); //true
};

要组织特定时间的默认行为，可以使用 preventDefault() 方法。但是只有 cancelable 属性设置为 true 的事件，才可以使用。
stopPropagation() 方法用于立即停止事件在 DOM 层次中的传播，即取消进一步的事件捕获或冒泡。
eventPhase 属性可以用来确定当前时间未愈事件流的哪个阶段。

var btn = document.getElementById("myBtn");
	btn.onclick = function(event){
	alert(event.eventPhase); //2 处在目标对象上
};
document.body.addEventListener("click", function(event){
	alert(event.eventPhase); //1  捕获阶段
}, true);
document.body.onclick = function(event){
	alert(event.eventPhase); //3  冒泡阶段
};

IE中的事件对象

在IE中，如果使用 DOM0级方法添加事件，需要使用 window.event 才能访问到 event对象。使用 attachEvent() 方法则可以直接访问到。
IE中取消事件冒泡的方法为使用 cancelBubble 属性。

事件类型

DOM3级事件规定了以下几种类型：

UI（用户界面）事件：用户与页面上的元素交互时触发
焦点事件：获得或失去焦点
鼠标事件
滚轮事件
文本事件：在文档中输入文本时触发
键盘事件
合成事件
变动事件：底层DOM结构变化时触发
变动名称事件：元素或属性名变动时触发（已废弃）

UI事件

load：页面加载完成后再 window 上触发。图像加载完毕时在 img 元素上触发。
unload：页面完全卸载后再 window 上触发，最多是用来清除引用，避免内存泄漏
abort：用户停止下载过程时，如果嵌入的内容还没加载完，则在 <object> 上触发。
error：发生JavaScript错误时，在 window 上触发，无法加载图像时在 img 元素上触发。
select：用户选择文本框中的一个或多个字符时触发。
resize：窗口或框架的大小变化时在 window 或框架上触发。
scroll：用户滚动带滚动条的元素中的内容是，在该元素上触发。

焦点事件

blur：元素失去焦点时触发。该事件不会冒泡
focus：元素获得焦点时触发，不会冒泡
focusIn：元素获得焦点时触发。与 focus 事件等价，但是该事件支持冒泡
focusout：失去焦点时触发，blur的通用版本。

当页面中的焦点从一个元素移动到另一个元素，会依次触发下列事件：

focusout：失去焦点的元素上触发
focusin：在获得焦点的元素上触发
blue：在失去焦点的元素上触发
focus：在获得焦点的元素上触发

鼠标与滚轮事件

click：单机时触发，可以通过键盘触发。
dbclick：
mousedown：用户按下鼠标任意按键时触发，不能通过键盘触发
mouseenter：鼠标光标从元素外部首次移动到元素范围内时触发，不冒泡，移动到后代元素不触发
mouseleave：位于元素上方的光标移动到元素范围之外时触发，不冒泡，后代元素不触发
mousemove：鼠标光标在元素内部移动时触发
mouseout：当用户将光标从一个元素移入另一个元素时触发，又移入的元素可能位于前一个元素的外部，也可能是该元素的子元素。
mouseover：当鼠标指针位于一个元素外部，首次移入另一个元素边界内时触发。
mouseup：释放鼠标按钮时触发。

当一个元素上相继触发 mousedown 和 mouseup 事件，才会触发 click 事件。

视口中的位置：clientX，clientY
页面中的位置：pageX，pageY（在页面没有滚动的情况下，与clientX，clientY值相等）
屏幕中的坐标位置：screenX，screenY

键盘与文本事件

keydown：按下任意键触发，按住不放重复触发
keypress：按下键盘上的字符键时触发，按住不放会重复触发。
keyup：用户释放键盘上的键时触发。
textInput：在文本插入文本框之前会触发 textInput

用户按下字符键时，首先触发 keydown，然后是 keypress，最后是keyup。

HTML5事件

contextmenu 事件
beforeunload 事件
DOMContentLoaded 事件
readystatechange 事件，支持该事件的每一个对象都有一个 readyState属性，可能包含以下5个值：uninitialized（未初始化）、loading（正在加载）、loaded（加载完毕）、interactive（交互）、complete（完成）。需要注意的是并非多有对象都会经历上面的所有阶段，可以跳过某阶段。
pageshow，pagehide
hashchange事件，URL的参数列表发生变化时触发

触摸与手势事件

touchstart：手指触摸屏幕时触发
touchmove：手指在屏幕上滑动时触发
touchend：手指从屏幕上移开时触发
touchcancel：系统停止跟踪触摸时触发。

在屏幕上触摸元素时，以下事件会依次触发：

touchstart
mouseover
mousemove
mousedown
mouseup
touchend
click

内存和性能

添加到页面上的事件其实会占用内存，影响页面性能。

事件委托

利用事件冒泡，指定一个处理程序管理某一类型的事件。

移除事件处理程序

当从文档中移除带有处理程序的元素时，有可能仅仅是DOM操作，原来元素的事件处理程序极有可能无法被当做垃圾释放。这时就需要手动先移除事件处理程序。

btn.onclick = function(){
//先执行某些操作
btn.onclick = null; //移除事件处理程序
document.getElementById("myDiv").innerHTML = "Processing...";
};

如果事先知道有可能使用 innerHTML 替换掉页面的一部分，可以直接不把事件处理程序添加到该部分元素中，使用事件委托的方法代替。

在页面卸载的时候，也有可能会有事件处理程序滞留在内存中。解决办法就是通过 onunload 事件处理程序来移除所有事件处理程序。

模拟事件

可以在 document 对象上使用 creaeEvent() 方法创建event对象。

模拟鼠标事件
模拟键盘事件
模拟其他事件
自定义DOM事件

tplwang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 基础学习（下）

BOMBOM（浏览器对象模型）（browser object model）window 对象表示一个浏览器的实例，是BOM的和新对象。在浏览器中，window 既是 JavaScript 访问浏览器窗口的一个接口，又是 ECMAScript 规定的 Global 对象。全局作用域在全局作用域声明的变量、函数都会变成 window 对象的属性和方法。定义全局变量与 window 对...
复制链接

扫一扫