JS:日期对象、BOM 、DOM、事件绑定

一、日期对象 var h =new Date（）

日期对象声明

var h =new Date（）
       1.没有传入参数，默认当前系统时间
                       wed Oct 09 2019 09:06:49  GMT+0800 (中国标准时间)
                       GMT 格林尼治时间
         传入参数
                   1. ”2020-05-08“
                   2.  "2020/05/24"
                   按照顺序，分别传入参数  年  月  日  时 分  秒  毫秒
                   【注】国外月份是从0开始数 0～11 
date.getFullYear( ) 获取年
date.getMonth( ) 获取月份 (月份从0-11，所以获取时 月份要+1)
date.getDate( ) 获取日期
date.getDay( ) 获取星期 0-6 0==星期日
date.getHoures ( ) 获取小时
date.getMinutes( ) 获取分钟
date.getSeconds( )  获取秒

例子
 function showTime(){
                 var d =new Date() ;
                 var year = d.getFullYear();  //从Date对取以四位数返回年份
                 var month = d.getMonth()+1;  //从Date对象中返回月份(11) ;因为我们国内是12个月要加1
                 var date = d.getDate();   //从Date对象中返回一个目中的某一天(1-31)
                var week =d.getDay();  //从Dte对象返回一周中的某一天(0-6)   0是周日
                 week= numOfChinese(week);//数字转中文
                //  doubleNum 一位数转换两位
                 var hour = doubleNum(d.getHours());  //返回Date对象的小时(0~23)
                 var min =doubleNum(d.getMinutes());  //返回Date对象的分钟(0~59)
                 var sec =doubleNum(d.getSeconds()); // 返回Date对象的毫秒
var str = year + "年" + month +"月" + date +"日  星期" + week +" "+ hour + ":" +min + ":" +sec;
                 return str;
             }

//数字转中文

   function numOfChinese(num){
        var arr = ["日","一","二","三","四","五","六"];
                return arr[num];
             }
             //转变两位数
             function doubleNum(n){
                if(n<10){
                    return "0" + n;
                }else{
                    return n;
                }
             }
             document.write(showTime());

[注] 所有的参照时间点都是1970年
         Date.parse() 
           格式： Date.parse(日期对象)
           功能： 可以将日期对象转成毫秒数
、
          d.getTime() /  d.setTime()
           格式 ； 日期对象.getTime / setTime
            功能 ；将当前日期对象转成毫秒数
 var d = new Date();
             alert(d);//当前时间
             alert(d.getTime());  //1591165571655
             alert(Date.parse(d));  //1591165558000

计时器

//Gloabl中有两个计时器方法
//js在浏览器运行会把这两个全局方法交给window

    开启计时器
    setInterval();
    setTimeout();
    //清除计时器方法
    clearInerval();
    clearTimeout();

定时器

格式；
	var timer = setInterval(函数 ， 毫秒数)
   功能； 每隔对应的毫秒数，执行一次传入的函数。
       返回值；启动定时器的，系统分配的编号
                clearInterval(timer);  取消定时器

例子
var i = 0;			
 	var timer = setInterval(function(){
      if(i == 5){						
  	  clearInterval(timer);			
       }								
      document.write(i++ + "<br/>");	
                },1000);				
setTimeout():时间延迟：当时间延迟一个时间段后，程序会执行一次方法中的回调程序，后面不再执行了
        setTimeout(function(){
            console.log("执行了");
        },2000)

二、BOM模型

//BOM = "浏览器对象模型"，js与浏览器交互
        //BOM ==》 widow ==> 
                    //location 操作url（重要）
                    //history   历史记录(了解)
                    //navigator 浏览器信息(了解)；
                    //document 文档(重点)
                    //screen   电脑屏幕信息（了解）;

window对象的常见属性和方法：

三个弹出框（内置方法，特点：都会阻塞浏览器代码执行）：
alert( ); 弹出框
confirm( ); 确认框
prompt( ); 输入框
两个定时器：
setInterval( )
setTimeout( )
一个弹窗方法：
open(“路径”,"_blank",“弹出窗口外观”);外观：width height left top…
返回值：弹出的子窗口
特点：子窗口和父窗口可以互相操作
opener:根据子窗口查找父窗口
close( );关闭窗口
closed:判断某个窗口是否被关闭，关闭返回true,否则返回false
属性：所有的自定义全局变量都是window对象的属性
方法：所有的自定义全局函数都是window对象的方法
全局属性和方法都可以省略window. 直接使用即可
//window.history:历史记录对象
//history.go(1);//前进到下一个页面
//history.go(-1);//后退到上一个页面
//history.go(-0);//刷新当前页面

       //history.foward();//前进到下一个页面
        //history.back();//后退到上一个页面
       //history.length,保存了历史页面的个数

了解即可
/ - navigator.userAgent 是获取的浏览器的整体信息
// - navigator.appName 获取的是浏览器的名称
// - navigator.appVersion 获取的是浏览器的版本号
// - navigator.platform 获取到的是当前计算机的操作系统

【4】document 文档对象

document.write( ):通过事件触发后，输出的内容会将页面原内容覆盖
查找页面对象的方法：
document.querySelector("css的选择器");新增方法，低版本IE不支持，根据选择器查找一个节点
document.querySelectorAll(css的选择器);根据选择器查找元素，返回一个节点集合
document.getElementById(id名称)
document.getElementsByTagName(节点名称)
document.getElementsByName(name名)：操作表单元素
document.getElemnetsByClassName(class名称)【ie8不支持】

例子
   var box = document.getElementById("box");
   var box = document.querySelector("#box ul li.content");//获取单个
   var boxs = document.querySelectorAll("#box ul li.content");//获取所有
   var box = document.querySelector("#box");
   var tags = document.getElementsByTagName("*");//*表示页面中的所有元素

三、DOM模型

[1]、DOM模型

document object model
对象：属性、事件、方法
节点：html : 是dom模型的根节点 
所有的html标签都叫 元素节点nodeType=1
所有标签的属性叫做 属性节点nodeType=2
所有的标签内容叫做 文本节点nodeType=3
				注释节点 nodeType = 8
一切都是节点
tagName 元素节名称
nodeName 节点名称  返回结果为大写字母；
nodeType 节点类型 1～16；
nodeValue ; 节点的文本内容 元素节点下的。
nodeValue为null

【2】节点关系

parentNode 获取父节点【找父级】最高到#document；
patentElement 获取父节点【找父级】最高到#htmL；
document.documentElement是元素节点中的根节点。
      #document是DOM中的根节点
childNodes 所有的子节点，是一个节点集合。（有空格会有文本节点），返回节点对象集合
children  不包含文本节点，不包含注释节点，ie8下包含注释节点
attributes 当前元素节点的所有属性节点
只要找到一个节点就可以通过这个节点查找一到任何一个想要的节点

父子

  parentNode 【获取父节点】最高到#document；
  parentElement  获取父节点【找父级】最高到#htmL
  childNodes  【所有子节点】包含文本节点
  children	所有子节点 ，不包含文本节点，不包含注释节点,ie8下包含注释
  firstChild	【 第一个子节点】
  firstElementChild 第一个子节点ie8不支持
  lastChild   【最后一个子节点】
  lastElemntChild  最后一个子节点，ie8不支持
  
兄弟/平级:
         previousSibling   【上一个节点】包含空节点
         nextSibling	【下一个节点】包含空节点

         previousElementSibling 上一个节点不包含空节点/ie8不支持
         nextElmentSibling 下一个节点不包含空节点/ie8不支持

【3】DOM中属性节点操作

attributes；所有的属性节点
例子：输出（box.attributes.length)元素上有多少节

自定义行内属性操作

   obj.attributes;//可通过下标方式获取自定义属性名（nodeName），ie7不 能获取nodeValue，结果是null
   obj.getAttribute(“自定义属性名”);//获取属性节点（）的value值
   console.log(box.getAttribute(“id”))//id的名字
   obj.setAttribute(“自定义属性名","属性值");//都可设置
例子:
 box.setAttribute("index",2);
 console.log(box.getAttribute(“index”));//2

  removeAttribute("自定义属性名")；//可删除
  delete box.id;//delete可以删除一个对象 的属性

【2】DOM的方法（节点动态操作）

   document.createElement( );//创建元素节点 
   document.createTextNode( );//创建文本节点 ，用的不多
   parentNode.appendChild(newNode);//将一个新的节点添加到父节点的最后
   parentNode.insertBefor(新节点,目标节点);将节点插入目标节点的前面//目标节点是parentNode的一个子节点
   parentNode.replaceChild(新节点,目标节点);将目标节点换成新节点//目标节点是parentNode的一个子节点
   parentNode.removeChild(目标节点);//删除目标节点
       节点.remove();//删除节点
       
克隆节点；
   var newNode = box.firstElementChild.cloneNode(true);
            box.appendChild(newNode)
 【注】cloneNode（true）克隆。如果括号没有true，只能克隆空标
 
获取浏览器可视区:
		document.documentElement.clientwidth宽；
		document.documentElement.clientHeight高；

四、事件 ( 鼠标 ) ( 键盘 ) ( 事件流 )；

【1】事件对象（event）

  事件：对某个元素的某种操作 就是一个事件
  事件对象：当触发某个事件时，产生的对象，就是事件对象，event使用的前提，必须有事件操作
    var e = e || event ；

【2】鼠标事件（）

   var e = eve || event ; 兼容ie8
   e. pageX   当前坐标距离浏览器左边的距离 + 浏览器向左滚走的距离。ie8不支持
   e. pageY   当前坐标距离浏览器上边的距离 + 浏览器向上滚走的距离。ie8不支持

   e. clientX   当前坐标距离浏览器左边的距离 
   e. clientY   当前坐标距离浏览器上边的距离 

   e. offsetX   事件触发后，距离当前最近元素内部左边偏移量 
   e. offsetY   事件触发后，距离当前最近元素内部左边偏移量 

   e. screenX   当前坐标距离设备屏幕左边的距离 （了解
   e. screenY   当前坐标距离设备屏幕上边的距离 （了解即可

鼠标三个键；

//ie8:     高版本浏览器(现代浏览器)
//左：1     0					
//中：4    1						
//右：2    2					

兼容ie8获取事件对象的button属性

function getButton(eve){
   if(eve){//eve存在表示是现代浏览器
       return eve.button;
    }else{//ie8下运行的
          var but = window.event.button;
          switch(but){
               case 1:
                   return 0;
              case 4:
                   return 1;
              case 2:
                        return 2;
                }
            }
        }

【2】键盘事件（keyCode）

keyCode：获取 取键码属性

键盘每一个键都有对应的ASCII码；

 document.onkeydown = function(eve){
            var e = eve || event;
            console.log(e.keyCode);//
 在onkeydown或者onkeyuo中获取的是大写状态下的ASCII，与键盘本身的大小写输入状态无关
 在onkeypress中获取ASCII与键盘本身的大小写输入状态有关

案例:
        document.onkeydown = function(eve){		
            var e = eve || event;					
console.log(e.ctrlKey);//当键盘按下ctrl键时，返回true
console.log(e.shiftKey);//可以用来判断 是否按下了shift键
console.log(e.altKey);//可以用来判断 是否按下了alt键
 /*if(e.ctrlKey && e.altKey){//判断是否按下了ctrl和alt的组合键											
     alert("按下了");								
            }*/										
 var code = e.keyCode || e.which || e.charCode;		
            //是否是按下了ctrl和回车键				
            if(e.ctrlKey && code === 13){				
                alert("发送了");					
            }								
            									
        }												

【2】事件流

DOM事件三个阶段（重要）
当一个DOM事件被触发时，它不仅仅只是单纯地在本身对象上触发一次，而是会经历三个不同的阶段：

 1. 捕获阶段：先由文档的根节点document往事件触发对象，从外向内捕获事件对象；
 2. 目标阶段：到达目标事件位置（事发地），触发事件；
 3. 冒泡阶段：再从目标事件位置往文档的根节点方向回溯，从内向外冒泡事件对象。

事件流（事件传播）有两种模式：

1、事件冒泡：由子元素向父元素触发，程序默认是触发事件冒泡；
 形成条件：
	多个元素之间有父子关系；
	多个元素注册了同一事件；
阻止冒泡兼容写法：e.stopPropagation ?e.stopPropagation( )；	  
2、	cancelBubble = true
//e.stopPropagation();//方法在ie8下不支持

02、事件捕获：由父元素向子元素触发。

 事件捕获，只有在addEventListener中才可以 实现捕获的设置 
 设置了addEventListener的每三个参数为true,程序执行捕获 
       捕获：由父级向子级触发
 捕获与冒泡同时存在，程序会先执行捕获；

03、事件默认行为：例如 a标签有默认跳转的行为

 阻止事件的默认行为；e.preventDefault(  );//ie8不支持onmousemove
 兼容ie8阻止事件 的默认行为：!!e.preventDefault ? e.preventDefault(	) :

【3】事件监听【addEventListener( )】

事件监听的好处：

  1.可以为一个元素绑定多次同一个事件
  2.程序员可以使用事件监听方式 确定 触发的事件过程是冒泡还是捕获
  
  事件源.addEventListener("没有on的事件",function(){},true/false);默认false冒泡，true为捕获
  
  如果同一元素既有捕获监听，又有冒泡监听，优先执行捕获
  addEventListener(event,callBack,flag);//事件监听
 //event:事件 "click"
 //callBack：回调函数：事件处理程序
 flag:true/false:true表示执行事件捕获，false表示执行事件冒泡，默认是false

例子
var box = document.getElementById("box");
        //第一种写法
        /*box.addEventListener("click",fn)
        function fn(){
            //事件处理程序
        }*/
        //第二种写法
        box.addEventListener("click",function(){
            console.log("点击了1");
        })
        box.addEventListener("click",function(){
            console.log("点击了2");
        });
        //事件监听可以绑定多次同一事件

ie8下事件监听：
//ie8下使用 attachEvent(event,callBack);		
参数说明										
        //event:事件："onclick"				
        //callBack:事件处理程序					
        //没有第三个参数：不支持事件捕获			
        box.attachEvent("onclick",function(){	
            console.log("ok了");				
        });

 //兼容ie8实现事件的监听
//console.log(box.addEventListener);
//参数说明							
        //obj，监听事件的事件源对象		
        //event,要绑定的事件			
        //callBack:回调函数：事件处理程序
function addEvent(obj,event,callBack){				
            //简单实现										
            //obj.addEventListener(event,callBack);		
            /*obj.addEventListener(event,function(){	
                callBack();							
            });	
            //兼容处理
if(!!obj.addEventListener){					
      obj.addEventListener(event,callBack);	
}else{//ie下的事件监听							
      obj.attachEvent("on" + event,callBack)		
     }										
}												

移除监听事件

   but.addEventListener(“click",callBack);  ie8不支持
   but.attachEvent(“click",callBack)  ;   ie8下使用

【4】事件委托【 target 】

委托：让别人去做
事件委托：某个元素的事件执行让其子元素来完成
委托的好处：
   1、把某个事件加到父元素上，提高程序的执行效率
   2、动态创建的元素，可以在创建元素的函数体外部为其添加事件
   3、减少内存资源的消耗
委托的机制：利用事件冒泡
（不是所有的事件都能实现委托）

案例：
   利用事件委托为每一个li添加单击事件，事件处理程序 改变当前操作的li的前景颜色
获取事件源：
e.target || e.srcElement 高版本浏览器与ie兼容
   var ul = document.getElementsByTagName("ul")[0];
        //事件委托
        //让当前要触发的元素事件交给父级来绑定
        ul.onclick = function(eve){
            //如何实现
            var e = eve || event;
            //e.target:属性保存了所有的子元素节点,
            //console.log(e.target);//鼠标触发的是哪个子元素，target返回的就是哪个元素
            //只让li来执行事件处理程序
            /*if(e.target.nodeName === "LI"){//因为nodeName返回的是大写
                console.log(e.target.innerHTML)
            }*/
            /*if(e.target.nodeName.toLowerCase() === "li"){//将大写转换为小写再来比较
              console.log(e.target.innerHTML)
            }*/
            
            /*if(e.target.nodeName === "P"){
                console.log("触发的是P");
            }*/
            
   /*if(e.target.getAttribute("on") === "aaa"){
                console.log("触发的是aaa");
            }*/
                
        }

五、三大家族【offset、client、scroll、】

	offsetLeft  /  Top 获取的值范围：距最近一个有定位 的父级边缘的距离，不包含边框，包含内边距
	offsetWidth ： 获取元素自身的宽度  , 包含边框和内边距 
	clientWidth:不包含边框，但包含内边距’
	clientLeft / Top ：当前元素的边框宽/高；
    scroll Top / Left:浏览器向上或向左滚走的距离；

三者区别：
       scrollTop和scrollLeft可读可写
       offset和client只读

    //怪异模式：页面中没有doctype声明 

// 需要使用:document.body.scrollTop
//标准模式：页面中有doctype声明
// 需要使用:document.documentElement.scrollTop

兼容写法 :
var sTop = document.documentElement.scrollTop || document.body.scrollTop;