rem和px转换／addEventListener() 方法的使

一、HTML <kbd> 标签

1. <kbd> 标签定义键盘文本，它用来表示文本是从键盘上键入的。
2. 浏览器通常用等宽字体来显示该标签中包含的文本。
3. <kbd> 标签经常用在于计算机相关的文档和手册中。例如：
    键入 <kbd>quit</kbd> 来退出程序，或者键入 <kbd>menu</kbd> 来返回主菜单。

二、使用 data-* 属性来嵌入自定义数据

① data-* 属性用于存储页面或应用程序的私有自定义数据。
② data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
③ 属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符
④ 属性值可以是任意字符串

语法:
<element data-*="somevalue">
例如：通过data-key将页面展示的内容和audio关联起来
<div data-key="65" class="key">
<kbd>A</kbd>
<span class="sound">clap</span>
</div>

<audio data-key="65" src="sounds/clap.wav"></audio>
<audio data-key="83" src="sounds/hihat.wav"></audio>
<audio data-key="68" src="sounds/kick.wav"></audio>

三、rem和px的转换

1. rem是指相对于根元素的字体大小的单位(html)
2. em是指相对于父元素的字体大小的单位
设置rem的方法：
方法一：
html {
  font-size: 10px;  // 代表1rem = 10px
}
方法二：动态获取
  var html = document.documentElement;
  var width = html.clientWidth;
  html.style.fontSize = width / 7.5 + 'px';  // 1rem=100px
注：我们在开发中，一般font-size还是用px，因为在大小屏上显示有出入，字体需要换行时，line-height也使用px

四、addEventListener() 方法，事件监听

addEventListener() 方法，事件监听
removeEventListener() 方法移除事件的监听

4.1 语法：

element.addEventListener(event, function, useCapture);
第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
注意:不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。

4.2 引用函数：

你可以使用函数名，来引用外部函数:
element.addEventListener("click", function(){ alert("Hello World!"); });
element.addEventListener("click", myFunction);
function myFunction() { alert ("Hello World!");}

4.3 向 Window 对象添加事件句柄

window.addEventListener("resize", function(){ document.getElementById("demo").innerHTML = sometext;});

4.4 传递参数

当传递参数值时，使用"匿名函数"调用带参数的函数：

var p1 = 5;
var p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
    myFunction(p1, p2);
});
function myFunction(a, b) {
    var result = a * b;
    document.getElementById("demo").innerHTML = result;
}

4.5 事件冒泡或事件捕获？

事件传递有两种方式：[冒泡]与[捕获]。
事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？
在[冒泡]中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。
在[捕获]中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。
addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：
addEventListener(event, function, useCapture);

默认值为 false, 即冒泡传递，当值为true 时, 事件使用捕获传递。
document.getElementById("myDiv").addEventListener("click", myFunction, true);

4.6 removeEventListener() 方法

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:
element.removeEventListener("mousemove", myFunction);

4.7 浏览器兼容处理

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // 所有主流浏览器，除了 IE 8 及更早版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // IE 8 及更早版本
    x.attachEvent("onclick", myFunction);
}

 IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是，
对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:
element.attachEvent(event, function);element.detachEvent(event, function);

五、HTML DOM querySelector() 方法

5.1 定义和用法

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。
如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。

5.2 语法

document.querySelector(CSS selectors)
参数是String，必填。指定一个或多个匹配元素的 CSS 选择器。可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。

对于多个选择器，使用逗号隔开，返回一个匹配的元素。

5.3 单个实例

获取文档中第一个 <p> 元素：
document.querySelector("p");

获取文档中 class="example" 的第一个元素:
document.querySelector(".example");

获取文档中 class="example" 的第一个 <p> 元素:
document.querySelector("p.example");

获取文档中有 "target" 属性的第一个 <a> 元素：
document.querySelector("a[target]");

5.4 多个实例

假定你选择了两个选择器: <h2> 和 <h3> 元素。
以下代码将为文档的第一个 <h2> 元素添加背景颜色：
<h2>A h2 element</h2>
<h3>A h3 element</h3>
document.querySelector("h2, h3").style.backgroundColor = "red";

但是，如果文档中 <h3> 元素位于 <h2> 元素之前，<h3> 元素将会被设置指定的背景颜色。
<h3>A h3 element</h3>
<h2>A h2 element</h2>
document.querySelector("h2, h3").style.backgroundColor = "red";