4-js-BOM

#BOM

1. 事件触发机制

   1. 事件源：网页元素
   2. 事件
   3. 行为:函数

2. 事件

   1. onload

       window.onload = function () {...
      

   2. onunload

   3. onbeforeunload

       window.function () {
          console.log('here');
       };
      
       window.function (event) {
           console.log('go....')
       }
      

      注意不能用alert(‘sss’);

   4. onchange

      当文本框失去焦点后并且文本的内容发生变化时，触发该事件

       var text1=document.getElementById('txt01');
       text1.function () {
           alert(text1.value);
       }
      

   5. onclick

   6. onfocus

      5. focus()

   7. onblur

      6. blur()

   8. onmouseover

   9. onmouseout

       	<div class="divcss" id="div01"></div>
           <div class="divcss" id="div02"></div>
       
           <script>
               var div01=document.getElementById('div01');
               var div02=document.getElementById('div02');
               div02.function () {
                   div02.style.background='red';
       //            div01.style.background='yellow';
       //            document.body.style.background='grey'
               }
               div02.function () {
                   div02.style.background='blue';
       //            div01.style.background='black';
       //            document.body.style.background='white'
       
               }
           </script>
      

   10. onkeypress

   11. onkeydown

   12. onkeyup

         text1.function (event) {
           
       //                key表示按键的内容（区分大小写）
                       alert(event.key);
       //                keycode表示按钮的ascii码
                       alert(event.keyCode);
       //                回车的asci是13
                       if(event.keyCode==13){
                           text1.blur();
                       }
                   }
       

   13. onerror

   14. onscroll

       谷歌不识别document.documentElement.scrollTop，必须要加上document.body.scrollTop；

       即
       var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;

       window.onscroll = function () {
         var t = document.documentElement.scrollTop || document.body.scrollTop;
         if ( t >= 50 ) {
           console.log( t )
           document.getElementById( "div1" )
             .style.display = "inline";
         } else {
           document.getElementById( "div1" )
             .style.display = "none";
         }
       }
       

   补充

   对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

   window.innerHeight - 浏览器窗口的可见高度
   window.innerWidth - 浏览器窗口的可见宽度

   对于 Internet Explorer 8、7、6、5：
   document.documentElement.clientHeight
   document.documentElement.clientWidth
   或者
   document.body.clientHeight
   document.body.clientWidth

   兼容所有浏览器：

   var w=window.innerWidth
   || document.documentElement.clientWidth
   || document.body.clientWidth;

    window.onscroll = function(){
    var a = document.documentElement.scrollTop || document.body.scrollTop;//滚动条y轴上的距离
    var b = document.documentElement.clientHeight || document.body.clientHeight;//可视区域的高度
    var c = document.documentElement.scrollHeight || document.body.scrollHeight;//可视化的高度与溢出的距离（总高度）
   
    console.log('a=',a);
    console.log('b=',b);
    console.log('c=',c);
    }
   

3. 闭合函数

    //            闭合函数
        (function (s) {
            alert('welcome'+s)
        })('javascript');
   

4. 事件处理机制方式

   1. 行内绑定

   2. 动态绑定

   3. 事件监听

       //ie
        div02.addEventListener('mouseout',function (e) {
       	//     div02.style.background='yellow';
      
          e.target.style.background='yellow';
        });
      
       //ie浏览器兼容
       div02.attachEvent('mouseout',function (e) {
      
          });
      

5. BOM（Browser Object Model）即浏览器对象模型。

6. 短路原则

   1、逻辑与 && 的运算方式

    var a = 1 && 2;
   
    console.log(a); //返回的结果为 2
    如果逻辑与运算符左边的值布尔转换后为true，那么返回右边的值（不管右边的值是真还是假）。
   
    var a = false && 2;
   
    console.log(a); //返回的结果为 false
   

如果逻辑与运算符左边的值布尔转换后为false，那么返回左边的值，但是当逻辑与的左边为 null/NaN/undefined ，结果就会得到null/NaN/undefined。

2、逻辑或 || 的运算方式

如果逻辑或运算符左边的值布尔转换后为false，那么返回右边的值（不管右边的值是真还是假）。

如果逻辑或运算符左边的值布尔转换后为true，那么返回左边的值，如果两个操作数都是是null（NaN/undefined），返回null（NaN/undefined）

	var a = false || 2;

	console.log(a); //返回的结果为2

	var a = true || 2;

	console.log(a); //返回的结果为 true

	var b=a || 3;

7. 计时器

   1. setTimeout(func,time)/clearTimeout(t)

   2. setInterval()/clearInterval(inter)

       	 var inter;
           var txt;
           document.getElementById('btn_begin').function () {
               //记得要及时清除计时器
               inter && clearInterval(inter);
       			// 在bom当中元素查找是最大的开销
               txt=document.getElementById('content');
               inter=setInterval(function () {
                  txt.value+='1'
               },1000);
           };
       
           document.getElementById('btn_stop').function () {
               inter && clearInterval(inter);
           }
           document.getElementById('btn_clear').function () {
               inter && clearInterval(inter);
       
               txt && (txt.value='');
           }
      

   3. 案例-倒计时

       label for="content">距离截止：</label>
       <input type="text" id="content">
       <script type="text/javascript">
       //    <!--闭合函数-->
       
           (function keishi() {
               var con=document.getElementById('content');
               var end_time=new Date('2019-3-1');
       
               var inter=setInterval(function () {
                   var now_time=new Date();
                   var time=end_time-now_time;
                   var v=number_to_time(time);
                   con.value=v;
               },1000);
           })();
       
       
           function number_to_time(num) {
               var num_second=num/1000;
               var days=Math.floor(num_second/(60*60*24));
               days=days>9?days:'0'+days;
               var hours=Math.floor((num_second%(60*60*24))/(60*60));
               hours=hours>9?hours:'0'+hours;
               var minutes=Math.floor((num_second%(60*60))/60);
               minutes=minutes>9?minutes:'0'+minutes;
               var seconds=Math.floor(num_second%60);
               seconds=seconds>9?seconds:'0'+seconds;
               var result=days+" 天"+hours+' 时'+minutes+" 分"+seconds+" 秒";
               return result;
       
           }
       
       
       </script>
      

   4. 案例-轮播图

   5. js 单线程异步

      1. 异步

          function add(a,b) {
              var c;
              setTimeout(function () {  //e
                  c=a+b;
                  console.log('c=',c);
              },1);
         
              return c;
         
          }
         
          var res=add(1,2);  //d
         
          console.log(res);  //结果为undefined
         

      2. 回调是解决异步的一种方案

          console.log('begin');  //a
         
          function add(a,b,callback) {
              var c;
              setTimeout(function () {  //b
                  c=a+b;
                  console.log('do....')
                  callback(c);
              },1);
          
          }
          
          
          
          add(1,2,function (rec) {
              console.log('开始播放',rec);
          });
          console.log('end');  //c
         

   6. 匿名函数的作用域-----this