security❀javascript 3

元素

<a>元素用来设置链接。除了网页元素的通用接口（Node接口、Element接口、HTMLElement接口），它还继承了HTMLAnchorElement接口和HTMLHyperlinkElementUtils接口。

属性

URL 相关属性

<a>元素有一系列 URL 相关属性，可以用来操作链接地址。这些属性的含义，可以参见Location对象的实例属性。

• hash：片段识别符（以#开头）
• host：主机和端口（默认端口80和443会省略）
• hostname：主机名
• href：完整的 URL
• origin：协议、域名和端口
• password：主机名前的密码
• pathname：路径（以/开头）
• port：端口
• protocol：协议（包含尾部的冒号:）
• search：查询字符串（以?开头）
• username：主机名前的用户名

// HTML 代码如下
// <a id="test" href="http://user:passwd@example.com:8081/index.html?bar=1#foo">test</a>
var a = document.getElementById('test');
a.hash // "#foo"
a.host // "example.com:8081"
a.hostname // "example.com"
a.href // "http://user:passed@example.com:8081/index.html?bar=1#foo"
a.origin // "http://example.com:8081"
a.password // "passwd"
a.pathname // "/index.html"
a.port // "8081"
a.protocol // "http:"
a.search // "?bar=1"
a.username // "user"

除了origin属性是只读的，上面这些属性都是可读写的。

accessKey 属性

accessKey属性用来读写<a>元素的快捷键。

// HTML 代码如下
// <a id="test" href="http://example.com">test</a>
var a = document.getElementById('test');
a.accessKey = 'k';

上面代码设置<a>元素的快捷键为k，以后只要按下这个快捷键，浏览器就会跳转到example.com。

注意，不同的浏览器在不同的操作系统下，唤起快捷键的功能键组合是不一样的。比如，Chrome 浏览器在 Linux 系统下，需要按下Alt + k，才会跳转到example.com。

download 属性

download属性表示当前链接不是用来浏览，而是用来下载的。它的值是一个字符串，表示用户下载得到的文件名。

// HTML 代码如下
// <a id="test" href="foo.jpg">下载</a>
var a = document.getElementById('test');
a.download = 'bar.jpg';

上面代码中，<a>元素是一个图片链接，默认情况下，点击后图片会在当前窗口加载。设置了download属性以后，再点击这个链接，就会下载对话框，询问用户保存位置，而且下载的文件名为bar.jpg。

hreflang 属性

hreflang属性用来读写<a>元素的 HTML 属性hreflang，表示链接指向的资源的语言，比如hreflang="en"。

// HTML 代码如下
// <a id="test" href="https://example.com" hreflang="en">test</a>
var a = document.getElementById('test');
a.hreflang // "en"

referrerPolicy 属性

referrerPolicy属性用来读写<a>元素的 HTML 属性referrerPolicy，指定当用户点击链接时，如何发送 HTTP 头信息的referer字段。

HTTP 头信息的referer字段，表示当前请求是从哪里来的。它的格式可以由<a>元素的referrerPolicy属性指定，共有三个值可以选择。

• no-referrer：不发送referer字段。
• origin：referer字段的值是<a>元素的origin属性，即协议 + 主机名 + 端口。
• unsafe-url：referer字段的值是origin属性再加上路径，但不包含#片段。这种格式提供的信息最详细，可能存在信息泄漏的风险。

// HTML 代码如下
// <a id="test" href="https://example.com" referrerpolicy="no-referrer">test</a>
var a = document.getElementById('test');
a.referrerPolicy // "no-referrer"

rel 属性

rel属性用来读写<a>元素的 HTML 属性rel，表示链接与当前文档的关系。

// HTML 代码如下
// <a id="test" href="https://example.com" rel="license">license.html</a>
var a = document.getElementById('test');
a.rel // "license"

tabIndex 属性

tabIndex属性的值是一个整数，用来读写当前<a>元素在文档里面的 Tab 键遍历顺序。

// HTML 代码如下
// <a id="test" href="https://example.com">test</a>
var a = document.getElementById('test');
a.tabIndex // 0

target 属性

target属性用来读写<a>元素的 HTML 属性target。

// HTML 代码如下
// <a id="test" href="https://example.com" target="_blank">test</a>
var a = document.getElementById('test');
a.target // "_blank"

text 属性

text属性用来读写<a>元素的链接文本，等同于当前节点的textContent属性。

// HTML 代码如下
// <a id="test" href="https://example.com">test</a>
var a = document.getElementById('test');
a.text // "test"

type 属性

type属性用来读写<a>元素的 HTML 属性type，表示链接目标的 MIME 类型。

// HTML 代码如下
// <a id="test" type="video/mp4" href="example.mp4">video</a>
var a = document.getElementById('test');
a.type // "video/mp4"

方法

<a>元素的方法都是继承的，主要有以下三个。

• blur()：从当前元素移除键盘焦点，详见HTMLElement接口的介绍。
• focus()：当前元素得到键盘焦点，详见HTMLElement接口的介绍。
• toString()：返回当前<a>元素的 HTML 属性href。

元素

<form>元素代表了表单，继承了 HTMLFormElement 接口。

HTMLFormElement 的实例属性

• elements：返回一个类似数组的对象，成员是属于该表单的所有控件元素。该属性只读。
• length：返回一个整数，表示属于该表单的控件数量。该属性只读。
• name：字符串，表示该表单的名称。
• method：字符串，表示提交给服务器时所使用的 HTTP 方法。
• target：字符串，表示表单提交后，服务器返回的数据的展示位置。
• action：字符串，表示表单提交数据的 URL。
• enctype（或encoding）：字符串，表示表单提交数据的编码方法，可能的值有application/x-www-form-urlencoded、multipart/form-data和text/plain。
• acceptCharset：字符串，表示服务器所能接受的字符编码，多个编码格式之间使用逗号或空格分隔。
• autocomplete：字符串on或off，表示浏览器是否要对<input>控件提供自动补全。
• noValidate：布尔值，表示是否关闭表单的自动校验。

HTMLFormElement 的实例方法

• submit()：提交表单，但是不会触发submit事件和表单的自动校验。
• reset()：重置表单控件的值为默认值。
• checkValidity()：如果控件能够通过自动校验，返回true，否则返回false，同时触发invalid事件。

下面是一个创建表单并提交的例子。

var f = document.createElement('form');
document.body.appendChild(f);
f.action = '/cgi-bin/some.cgi';
f.method = 'POST';
f.submit();

元素

<option>元素表示下拉框（<select>，<optgroup>或<datalist>）里面的一个选项。它是 HTMLOptionElement 接口的实例。

属性

除了继承 HTMLElement 接口的属性和方法，HTMLOptionElement 接口具有下面的属性。

• disabled：布尔值，表示该项是否可选择。
• defaultSelected：布尔值，表示该项是否默认选中。一旦设为true，该项的值就是<select>的默认值。
• form：返回<option>所在的表单元素。如果不属于任何表单，则返回null。该属性只读。
• index：整数，表示该选项在整个下拉列表里面的位置。该属性只读。
• label：字符串，表示对该选项的说明。如果该属性未设置，则返回该选项的文本内容。
• selected：布尔值，表示该选项是否选中。
• text：字符串，该选项的文本内容。
• value：字符串，该选项的值。表单提交时，上传的就是选中项的这个属性。

Option() 构造函数

浏览器原生提供Option()构造函数，用来生成 HTMLOptionElement 实例。

new Option(text, value, defaultSelected, selected)

它接受四个参数，都是可选的。

• text：字符串，表示该选项的文本内容。如果省略，返回空字符串。
• value：字符串，表示该选项的值。如果省略，默认返回text属性的值。
• defaultSelected：布尔值，表示该项是否默认选中，默认为false。注意，即使设为true，也不代表该项的selected属性为true。
• selected：布尔值，表示该项是否选中，默认为false。

var newOption = new Option('hello', 'world', true);

newOption.text // "hello"
newOption.value // "world"
newOption.defaultSelected // true
newOption.selected // false

上面代码中，newOption的defaultSelected属性为true，但是它没有被选中（即selected属性为false）。

鼠标事件

鼠标事件的种类

鼠标事件主要有下面这些，所有事件都继承了MouseEvent接口（详见后文）。

（1）点击事件

鼠标点击相关的有四个事件。

• click：按下鼠标（通常是按下主按钮）时触发。
• dblclick：在同一个元素上双击鼠标时触发。
• mousedown：按下鼠标键时触发。
• mouseup：释放按下的鼠标键时触发。

click事件可以看成是两个事件组成的：用户在同一个位置先触发mousedown，再触发mouseup。因此，触发顺序是，mousedown首先触发，mouseup接着触发，click最后触发。

双击时，dblclick事件则会在mousedown、mouseup、click之后触发。

（2）移动事件

鼠标移动相关的有五个事件。

• mousemove：当鼠标在一个节点内部移动时触发。当鼠标持续移动时，该事件会连续触发。为了避免性能问题，建议对该事件的监听函数做一些限定，比如限定一段时间内只能运行一次。
• mouseenter：鼠标进入一个节点时触发，进入子节点不会触发这个事件（详见后文）。
• mouseover：鼠标进入一个节点时触发，进入子节点会再一次触发这个事件（详见后文）。
• mouseout：鼠标离开一个节点时触发，离开父节点也会触发这个事件（详见后文）。
• mouseleave：鼠标离开一个节点时触发，离开父节点不会触发这个事件（详见后文）。

mouseover事件和mouseenter事件，都是鼠标进入一个节点时触发。两者的区别是，mouseenter事件只触发一次，而只要鼠标在节点内部移动，mouseover事件会在子节点上触发多次。

/* HTML 代码如下
 <ul>
   <li>item 1</li>
   <li>item 2</li>
   <li>item 3</li>
 </ul>
*/

var ul = document.querySelector('ul');

// 进入 ul 节点以后，mouseenter 事件只会触发一次
// 以后只要鼠标在节点内移动，都不会再触发这个事件
// event.target 是 ul 节点
ul.addEventListener('mouseenter', function (event) {
   
  event.target.style.color = 'purple';
  setTimeout(function () {
   
    event.target.style.color = '';
  }, 500);
}, false);

// 进入 ul 节点以后，只要在子节点上移动，mouseover 事件会触发多次
// event.target 是 li 节点
ul.addEventListener('mouseover', function (event) {
   
  event.target.style.color = 'orange';
  setTimeout(function () {
   
    event.target.style.color = '';
  }, 500);
}, false);

上面代码中，在父节点内部进入子节点，不会触发mouseenter事件，但是会触发mouseover事件。

mouseout事件和mouseleave事件，都是鼠标离开一个节点时触发。两者的区别是，在父元素内部离开一个子元素时，mouseleave事件不会触发，而mouseout事件会触发。

/* HTML 代码如下
 <ul>
   <li>item 1</li>
   <li>item 2</li>
   <li>item 3</li>
 </ul>
*/

var ul = document.querySelector('ul');

// 先进入 ul 节点，然后在节点内部移动，不会触发 mouseleave 事件
// 只有离开 ul 节点时，触发一次 mouseleave
// event.target 是 ul 节点
ul.addEventListener('mouseleave', function (event) {
   
  event.target.style.color = 'purple';
  setTimeout(function () {
   
    event.target.style.color = '';
  }, 500);
}, false);

// 先进入 ul 节点，然后在节点内部移动，mouseout 事件会触发多次
// event.target 是 li 节点
ul.addEventListener('mouseout', function (event) {
   
  event.target.style.color = 'orange';
  setTimeout(function () {
   
    event.target.style.color = '';
  }, 500);
}, false);

上面代码中，在父节点内部离开子节点，不会触发mouseleave事件，但是会触发mouseout事件。

（3）其他事件

• contextmenu：按下鼠标右键时（上下文菜单出现前）触发，或者按下“上下文”菜单键时触发。
• wheel：滚动鼠标的滚轮时触发，该事件继承的是WheelEvent接口。

MouseEvent 接口

MouseEvent接口代表了鼠标相关的事件，单击（click）、双击（dblclick）、松开鼠标键（mouseup）、按下鼠标键（mousedown）等动作，所产生的事件对象都是MouseEvent实例。此外，滚轮事件和拖拉事件也是MouseEvent实例。

MouseEvent接口继承了Event接口，所以拥有Event的所有属性和方法，并且还提供鼠标独有的属性和方法。

浏览器原生提供一个MouseEvent()构造函数，用于新建一个MouseEvent实例。

var event = new MouseEvent(type, options);

MouseEvent()构造函数接受两个参数。第一个参数是字符串，表示事件名称；第二个参数是一个事件配置对象，该参数可选。除了Event接口的实例配置属性，该对象可以配置以下属性，所有属性都是可选的。

• screenX：数值，鼠标相对于屏幕的水平位置（单位像素），默认值为0，设置该属性不会移动鼠标。
• screenY：数值，鼠标相对于屏幕的垂直位置（单位像素），其他与screenX相同。
• clientX：数值，鼠标相对于程序窗口的水平位置（单位像素），默认值为0，设置该属性不会移动鼠标。
• clientY：数值，鼠标相对于程序窗口的垂直位置（单位像素），其他与clientX相同。
• ctrlKey：布尔值，是否同时按下了 Ctrl 键，默认值为false。
• shiftKey：布尔值，是否同时按下了 Shift 键，默认值为false。
• altKey：布尔值，是否同时按下 Alt 键，默认值为false。
• metaKey：布尔值，是否同时按下 Meta 键，默认值为false。
• button：数值，表示按下了哪一个鼠标按键，默认值为0，表示按下主键（通常是鼠标的左键）或者当前事件没有定义这个属性；1表示按下辅助键（通常是鼠标的中间键），2表示按下次要键（通常是鼠标的右键）。
• buttons：数值，表示按下了鼠标的哪些键，是一个三个比特位的二进制值，默认为0（没有按下任何键）。1（二进制001）表示按下主键（通常是左键），2（二进制010）表示按下次要键（通常是右键），4（二进制100）表示按下辅助键（通常是中间键ÿ