BOM、事件基础、

BOM

location

history

screen

navigator

document

视口宽高
innerWidth,innerHeight不考虑滚动条
高会减掉控制面板高度
document.documentElement.clientWidth
document.documentElement.clientHeight
视口宽高==html的clientWidth和clientHeight
//会减去滚动条
视口宽高和控制面板宽高之和
outerWidth,outerHeight
screenLeft,screenTop
screenX,screenY
两个值是相同的，都是指当前窗口距离屏幕左上角的坐标位置

location

当页面没有第一次渲染完成前，他们三个都是跳转页面的作用，功能一样

location.href();会产生历史记录
地址,可以获取当前页面的地址，可以设置跳转页面的地址
location.assign() //也会产生历史记录，只能设置跳转页面的地址
location.replace//不会产生历史记录
location.hash   地址栏中#后面的内容
location.searh   地址栏?后面的内容
如果有hash,hash必须写在search的后面
?
可以赋值产生新的历史记录
location.hash="#a"
用来分解地址栏中的地址
?
lacation.hostname//域名
location.port //端口号
location.protocol//协议
location.pathname//路径

screen

console.log(screen.availWidth,screen.availHeight);
//去掉附件（任务栏）屏幕宽高
console.log(screen.width,screen.height);
//屏幕宽高

 

**navigator**
console.log(navigator.userAgent);
浏览器版本及内核

history

  history.go(1)
  history.back(); 后退  go(-1)
  history.forward();前进  go(1)
 //历史记录的数量
 console.log(history.length);
// 添加历史记录
 history.pushState({a:1},"data","#a")
// 如果改变历史记录时，触发这个事件，监听浏览器历史记录跳转
        window.onpopstate=function(){
            console.log(history);
        }
?
 //替换当前状态的数据
        history.replaceState({num:0},"0");

SSR 服务器端渲染 Server Side Render

CSR 客户端渲染 Client Side Render

 

事件基础 Event

事件主要有两个部分构成，一个是事件侦听，一个是事件触发

事件侦听又分为两个部分，一个是听到什么，一个是做什么

 

1.先侦听后派发

2.事件对象和时间目标对象 事件对象就是Event，事件目标对象EventTarget

3.事件的声音实际就是一个字符串，我们把这个字符串叫做type.事件类型

派发的事件类型必须和侦听的事件类型完全相同时才能触发

4.有时候某些事件是由系统自动派发，不许我们主动派发事件，这种叫做系统默认事件，我们主动抛发叫做自定义事件。onclick onpopstate oninput系统默认事件

//创建一个事件目标
var target=new EventTarget();
// 事件侦听对象
target.addEventListener("chifanle",chifanleHandler)
//创建一个事件,这个事件里面记录了chifanle这个声音
var evt=new Event("chifanle")
//事件派发（事件抛发)
target.dispatchEvent(evt);
?
事件侦听执行的函数中有且仅有一个参数，这个参数，就是被派发的事件对象
?

this

1.点击事件的this

2.对象方法中this，就是谁调用该方法，this就是谁，this就是当前这个对象

  1. 全局中的this直接打印是window

  2. 对象属性中使用this，因为对象没有创建完成，因为this就是执行对象外的this指向

    var a=2;
        console.log(this.a);
        var o={
            a:1,
            b:this.a,//当前对象没有创建完成，所以this指向当前对象外的this指向
            c:function(){
                console.log(this.b);
            }
        }
        o.c();

     

 

 

前端学习（第二阶段）

相关

标签