JS 对象与事件模型

JS 对象与事件模型

window 对象

DOM：文档对象模型，Document Object Model BOM：浏览器对象模型，Browser Object Model

• window对象

  • alert(): 弹出警告框

  • confirm(): 弹出确认框

  • prompt(): 弹出输入框

  • open()：打开新窗口

  • onerror()：事件处理程序，会把捕获到的错误信息输出到控制台

    window.onerror = function (msg, url, lineNo, columnNo, error) {
      var string = msg.toLowerCase(); // 转换为小写
      var substring = "script error"; // 错误信息 network:... script error
      if (string.indexOf(substring) > -1) {
          alert("Script Error: See Browser Console for Detail");
      } else {
          var message = [
              "Message: " + msg,
              "URL: " + url,
              "Line: " + lineNo,
              "Column: " + columnNo,
              "Error object: " + JSON.stringify(error),
          ].join(" - ");
          new Image("url", message);
      }
    };
    

  • setTimeout(): 设置定时器

  • setInterval(): 设置定时器

• location对象：导航功能，地址栏信息。既是window对象属性，也是document对象属性

  • hash: 获取或设置地址栏的哈希值(#后值)
  • host：服务器名称+端口
  • hostname：服务器名称
  • href：完整的 URL
  • pathname： URL 的路径部分
  • port：端口号
  • protocol：协议(http:、https:)
  • search：查询字符串,以问号开头(?name=face&age=19)
  • assign(): 打开新的 URL，并且会在浏览器的历史记录中生成一条新的记录
  • replace(): 打开新的 URL，并且不会在浏览器的历史记录中生成新的记录
  • reload(): 重新加载当前页面

• navigation对象：浏览器系统信息

• screen对象：浏览器窗口信息

• history对象：浏览器历史记录

  • go(): 前进或后退指定的页面数，参数为正数时，表示前进；参数为负数时，表示后退
  • back(): 后退一页
  • forward(): 前进一页
  • length：历史记录的数量，可以用于检测当前页面是否用户历史记录的第一页

浏览器事件模型

事件订阅 订阅浏览器事件可以通过以下方式：

• HTML属性的时间句柄,如：<button onclick="alert('hello')">

• DOM事件的事件句柄，在 js 中为 DOM 添加 onclick 方法，通过addEventListener方法订阅事件

  var btn = document.querySelector("button");
  btn.addEventListener("click", function () {
      alert("hello");
  });
  

事件传播

• 捕获：从上到下，从 window 对象开始，逐级向下传播到目标元素
• 冒泡：从下到上，从目标元素开始，逐级向上传播到 window 对象
• stopPropagation()：阻止事件传播
• preventDefault()：阻止默认行为