HTML5新标签(三)

Posted on In 
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
26
27
28
29
30
<form action="">
  <!--placeholder: 输入框提示信息-->
  <!--autocomplete: 自动保存用户输入过的值，默认为on-->
  <!--pattern: 正则验证-->
  <input
    type="text"
    placeholder="请输入6-8个数字"
    pattern="\d{6,8}"
    name="user"
    autocomplete="off"
    id=""
  />
  <!--formaction: 定义提交地址-->
  <input type="submit" value="提交" formaction="http://www.baidu.com" />
</form>

<form action="">
  <!--autofocus: 自动焦点-->
  <!--required: 必填项-->
  <input type="text" name="username" id="" autofocus required />
  <input type="password" name="" id="" required />
</form>

<!--datalist选项列表，与input元素配合使用，定义input的可能值-->
<input type="text" list="varList" />
<datalist id="varList">
  <option value="javascript">javascript</option>
  <option value="html">html</option>
  <option value="css">css</option>
</datalist>

JS 延迟加载

1
2
3
4
5
6
7
8
9
<!--会在window.onload之前加载-->
<script src="a.js" defer="defer"></script>
<script src="a.js" defer="defer"></script>
<script src="a.js" defer="defer"></script>

<!--异步加载-->
<script src="a.js" async="async"></script>
<script src="b.js" async="async"></script>
<script src="c.js" async="async"></script>

contextmenu

捕获右键菜单事件：

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
<ul id="myMenu">
  <li>111</li>
  <li>222</li>
  <li>333</li>
</ul>
<script>
  var menu = document.querySelector("#myMenu")
  document.addEventListener(
    "contextmenu",
    (event) => {
      event.preventDefault()
      menu.style.left = event.clientX + "px"
      menu.style.top = event.clientY + "px"
      menu.style.visibility = "visible"
    },
    false
  )
  document.addEventListener(
    "click",
    (event) => {
      menu.style.visibility = "hidden"
    },
    false
  )
</script>

DOMContentLoaded

当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。另一个不同的事件 load 应该仅用于检测一个完全加载的页面。 在使用 DOMContentLoaded 更加合适的情况下使用 load 是一个令人难以置信的流行的错误，所以要谨慎。注意：DOMContentLoaded 事件必须等待其所属 script 之前的样式表加载解析完成才会触发。
load 是在所有资源加载完成后才触发。

readystatechange

当文档的 readyState 属性发生改变，readystatechange 事件会被触发。

1
2
3
4
5
6
7
8
9
document.readyState === "complete"
// true

// 替代 DOMContentLoaded
document.onreadystatechange = function () {
  if (document.readyState === "interactive") {
    initApplication()
  }
}

dragable

全局属性 draggable 是一个枚举类型的属性，用于标识元素是否允许使用 拖放操作 API 拖动。它的取值如下：

  • true，表示元素可以被拖动
  • false，表示元素不可以被拖动

如果该属性没有设值，则默认值 为 auto ，表示使用浏览器定义的默认行为。
这个属性是枚举类型，而不是 Boolean
默认情况下，只有已选中的文本、图片、链接可以拖动。对其它的元素来说，必须按拖动机制的顺序设置 ondragstart 事件才能正常工作:

1
2
3
4
5
6
<div
  draggable="true"
  ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')"
>
  This text <strong>may</strong> be dragged.
</div>

Drag Data

每一个 drag events 都有一个 dataTransfer 属性，用于保存 drag data，dataTransfer 是一个 DataTransfer 对象。
使用 setData(type, value)来设置值。
例子：

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<style>
  .container {
    display: flex;
    flex-direction: row;
  }

  #draggable {
    width: 100px;
    height: 100px;
    background: white;
    justify-content: center;
    line-height: 100px;
    display: flex;
  }

  .dragger-container {
    margin: 0 2px;
    width: 100px;
    height: 100px;
    background-color: gray;
    padding: 10px;
  }
</style>
<div class="container">
  <div class="dragger-container">
    <div id="draggable" draggable="true">Drag me</div>
  </div>
  <div class="dragger-container"></div>
  <div class="dragger-container"></div>
  <div class="dragger-container"></div>
</div>
<script>
  window.onload = function () {
    let dragged
    document.addEventListener(
      "dragstart",
      (event) => {
        dragged = event.target
      },
      false
    )
    document.addEventListener(
      "dragover",
      (event) => {
        event.preventDefault()
      },
      false
    )
    document.addEventListener(
      "drop",
      (event) => {
        event.preventDefault()
        if (event.target.className == "dragger-container") {
          dragged.parentNode.removeChild(dragged)
          event.target.appendChild(dragged)
        }
      },
      false
    )
  }
</script>

storage

  • sessionStorage: 关闭页面时会清空
  • localStorage: 关闭页面时不会清空

两者 API 一致。

requestAnimationFrame(callback)

表示在重绘前执行指定的回调函数，一个栗子：

1
2
3
4
5
<div
  id="root"
  style="width: 50px; height: 50px; background-color: red; position: relative;"
></div>
<script src="./test.js"></script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let root = document.querySelector("#root")
let flag = true
let left = 0

requestAnimFrame = (() =>
  requestAnimationFrame ||
  webkitRequestAnimationFrame ||
  mozRequestAnimationFrame ||
  ((callback) => {
    setTimeout(callback, 1000 / 60)
  }))()
;(function _animation() {
  left == 0 ? (flag = true) : left == 100 ? (flag = false) : ""
  flag ? (root.style.left = `${left++}px`) : (root.style.left = `${left--}px`)
  requestAnimFrame(_animation)
})()