總結繫結事件的區別:   * addEventListener();   * attachEvent()   *   * 相同點: 都可以為元素繫結事件   * 不同點:   * 1.方法名不一樣   * 2.引數個數不一樣addEventListener三個引數,attachEvent兩個引數   * 3.addEventListener 谷歌,火狐,IE11支援,IE8不支援   *   attachEvent 谷歌火狐不支援,IE11不支援,IE8支援   * 4.this不同,addEventListener 中的this是當前繫結事件的物件   *   attachEvent中的this是window   * 5.addEventListener中事件的型別(事件的名字)沒有on   *  attachEvent中的事件的型別(事件的名字)有on

解綁事件:   /*   * 注意:用什麼方式繫結事件,就應該用對應的方式解綁事件   * 1.解綁事件   * 物件.on事件名字=事件處理函式--->繫結事件   * 物件.on事件名字=null;   * 2.解綁事件   * 物件.addEventListener("沒有on的事件型別",命名函式,false);---繫結事件   * 物件.removeEventListener("沒有on的事件型別",函式名字,false);   * 3.解綁事件   * 物件.attachEvent("on事件型別",命名函式);---繫結事件   * 物件.detachEvent("on事件型別",函式名字);

案例： 繫結和解綁相容的封裝

  //繫結事件的相容
  function addEventListener(element,type,fn) {
    if(element.addEventListener){
      element.addEventListener(type,fn,false);
    }else if(element.attachEvent){
      element.attachEvent("on"+type,fn);
    }else{
      element["on"+type]=fn;
    }
  }
  //解綁事件的相容
  //為任意的一個元素,解綁對應的事件
  function removeEventListener(element,type,fnName) {
    if(element.removeEventListener){
      element.removeEventListener(type,fnName,false);
    }else if(element.detachEvent){
      element.detachEvent("on"+type,fnName);
    }else{
      element["on"+type]=null;
    }
  }
 

     事件冒泡:多個元素巢狀,有層次關係,這些元素都註冊了相同的事件,如果裡面的元素的事件觸發了,

外面的元素的該事件自動的觸發了.

  //事件冒泡,阻止事件冒泡,   //如何阻止事件冒泡: window.event.cancelBubble=true; IE特有的,谷歌支援,火狐不支援

  // e.stopPropagation(); 谷歌和火狐支援,

<div id="dv1">
  <div id="dv2">
    <div id="dv3"></div>
  </div>
</div>
  my$("dv1").onclick=function () {
    console.log(this.id);
  };
  my$("dv2").onclick=function () {
    console.log(this.id);
    //window.event.cancelBubble=true;
  };
  //事件處理引數物件
  my$("dv3").onclick=function (e) {
    console.log(this.id);
    //阻止事件冒泡
    //e.stopPropagation();

    console.log(e);
  };

事件有三個階段:     /*      *可以理解為警察抓小偷，小偷藏在最裡邊的房間，警察的捕獲是由外向裡的。      * 1.事件捕獲階段  :從外向內      * 2.事件目標階段  :最開始選擇的那個      * 3.事件冒泡階段  : 從裡向外      *      * 為元素繫結事件      * addEventListener("沒有on的事件型別",事件處理函式,控制事件階段的)      * 事件觸發的過程中,可能會出現事件冒泡的效果,為了阻止事件冒泡--->      * window.event.cancelBubble=true;谷歌,IE8支援,火狐不支援      * window.event就是一個物件,是IE中的標準      * e.stopPropagation();阻止事件冒泡---->谷歌和火狐支援      * window.event和e都是事件引數物件,一個是IE的標準,一個是火狐的標準      * 事件引數e在IE8的瀏覽器中是不存在,此時用window.event來代替      * addEventListener中第三個引數是控制事件階段的      * 事件的階段有三個:      * 通過e.eventPhase這個屬性可以知道當前的事件是什麼階段你的      * 如果這個屬性的值是:      * 1---->捕獲階段      * 2---->目標階段      * 3---->冒泡      * 一般預設都是冒泡階段,很少用捕獲階段      * 冒泡階段:從裡向外      * 捕獲階段:從外向內

<div id="dv1">
  <div id="dv2">
    <div id="dv3"></div>
  </div>
</div>
<script src="common.js"></script>
<script>
  //事件冒泡:是從裡向外

  //同時註冊點選事件
  var objs = [my$("dv3"), my$("dv2"), my$("dv1")];
  //遍歷註冊事件
  objs.forEach(function (ele) {
    //為每個元素繫結事件
    ele.addEventListener("click", function (e) {
      console.log(this.id+"====>"+e.eventPhase);

    }, true);
         ↑ 注意這個值：true表示捕獲階段的查詢 | false表示冒泡階段的查詢

案例：為同一個元素繫結多個不同的事件,指向相同的事件處理函式

<input type="button" value="小蘇" id="btn"/>
<script src="common.js"></script>
<script>
  //為同一個元素繫結多個不同的事件,指向相同的事件處理函式
  my$("btn").onclick = f1;
  my$("btn").onmouseover = f1;
  my$("btn").onmouseout = f1;
  function f1(e) {
    switch (e.type) {
      case "click":
        alert("好帥哦");
        break;
      case "mouseover":
        this.style.backgroundColor = "red";
        break;
      case "mouseout":
        this.style.backgroundColor = "green";
        break;
    }
  }

案例：搜尋框的實現

<div id="box">
  <input type="text" id="txt" value="">
  <input type="button" value="搜尋" id="btn">

</div>

<script src="common.js"></script>
<script>


  var keyWords = ["qingqing", "qinqin", "qingqin", "qinqing", "abcd", "bcc", "def", "abc"];
  //獲取文字框註冊鍵盤擡起事件
  my$("txt").onkeyup = function () {


    //每一次的鍵盤擡起都判斷頁面中有沒有這個div
    if(my$("dv")){
      //刪除一次
      my$("box").removeChild(my$("dv"));
    }
    //獲取文字框輸入的內容
    var text = this.value;
    //臨時陣列--空陣列------->存放對應上的資料
    var tempArr = [];
    //把文字框輸入的內容和陣列中的每個資料對比
    for (var i = 0; i < keyWords.length; i++) {
      //是否是最開始出現的
      if (keyWords[i].indexOf(text) == 0) {
        tempArr.push(keyWords[i]);//追加
      }
    }
    //如果文字框是空的,臨時陣列是空的,不用建立div
    if (this.value.length == 0 || tempArr.length == 0) {
      //如果頁面中有這個div,刪除這個div
      if (my$("dv")) {
        my$("box").removeChild(my$("dv"));
      }
      return;
    }
    //建立div,把div加入id為box的div中
    var dvObj = document.createElement("div");
    my$("box").appendChild(dvObj);
    dvObj.id = "dv";
    dvObj.style.width = "350px";
    //dvObj.style.height="100px";//肯定是不需要的------
    dvObj.style.border = "1px solid green";
    //迴圈遍歷臨時陣列,建立對應的p標籤
    for (var i = 0; i < tempArr.length; i++) {
      //建立p標籤
      var pObj = document.createElement("p");
      //把p加到div中
      dvObj.appendChild(pObj);
      setInnerText(pObj, tempArr[i]);
      pObj.style.margin = 0;
      pObj.style.padding = 0;
      pObj.style.cursor = "pointer";
      pObj.style.marginTop = "5px";
      pObj.style.marginLeft = "5px";
      //滑鼠進入
      pObj.onmouseover = function () {
        this.style.backgroundColor = "yellow";
      };
      //滑鼠離開
      pObj.onmouseout = function () {
        this.style.backgroundColor = "";
      };
    }

JavaScript分三個部分:     * 1. ECMAScript標準---基本語法     * 2. DOM--->Document Object Model 文件物件模型,操作頁面元素的     * 3. BOM--->Browser Object Model 瀏覽器物件模型,操作瀏覽器的     *     * 瀏覽器中有個頂級物件:window----     * 頁面中頂級物件:document-----     * 頁面中所有的內容都是屬於瀏覽器的,頁面中的內容也都是window的

    var num=100;
    console.log(window.num);
     function f1() {
      console.log("小蘇我也從了");
    }
    window.f1();
    //因為頁面中的所有內容都是window的,window是可以省略的.
    window.document.write("哈哈");
    var name="您好";
    console.log(window.name);
    console.log(top);和下邊的效果相同
    console.log(window);  注：可以通過這種方式，來檢視物件的方法和屬性

系統的對話方塊

    //window.alert("您好啊");//以後不用,測試的時候使用     //window.prompt("請輸入帳號");     //var result=window.confirm("您確定退出嗎");

頁面載入

    //頁面載入的時候,按鈕還沒出現,頁面沒有載入完畢

    window.onload=function () {
      document.getElementById("btn").onclick=function () {
        alert("您好");
      };
    };

    onload=function () {
      document.getElementById("btn").onclick=function () {
        alert("您好");
      };
    };

    //擴充套件的事件---頁面關閉後才觸發的事件  注：谷歌瀏覽器不支援 IE8可以看到效果
    window.onunload=function () {}；

    //擴充套件事件---頁面關閉之前觸發的        注：區別在於彈框的時機
    window.onbeforeunload=function () {
      alert("哈哈");
    };

location物件     *console.log(window.location);通過這種方式檢視屬性方法

    //位址列上#及後面的內容
    console.log(window.location.hash);
    //主機名及埠號
    console.log(window.location.host);
    //主機名
    console.log(window.location.hostname);
    //檔案的路徑---相對路徑
    console.log(window.location.pathname);
    //埠號
    console.log(window.location.port);
    //協議
    console.log(window.location.protocol);
    //搜尋的內容
    console.log(window.location.search);
     onload=function () {
      document.getElementById("btn").onclick=function () {
        //設定跳轉的頁面的地址
       location.href="http://www.jd.com";屬性----------------->必須記住
       location.assign("http://www.jd.com");方法  和上邊那個同樣可以實現頁面的跳轉，一模一樣
       location.reload();//重新載入--重新整理
       location.replace("http://www.jd.com");沒有歷史記錄，瀏覽器上沒有那個回退的箭頭

history物件

      *根據history可以向前向後跳轉

<input type="button" value="跳過去" id="btn1"/>
<input type="button" value="前進" id="btn2"/>
<script src="common.js"></script>
<script>
  //跳轉的
  my$("btn1").onclick = function () {
    window.location.href = "15test.html";
  };
  //前進
  my$("btn2").onclick = function () {
    window.history.forward();
  };

navigator物件

    *問題：我的電腦是64位的為什麼查詢所得的是32位的

    *瀏覽器廠商自定義的，不同的瀏覽器可能有不同的區別，儘量不要通過這種方式來確定平臺的位數

    //通過userAgent可以判斷使用者瀏覽器的型別
    console.log(window.navigator.userAgent);Mozilla/5.0 (Windows NT 6.1; Win64;
    //通過platform可以判斷瀏覽器所在的系統平臺型別.
    console.log(window.navigator.platform);Win32

BOM中有兩個定時器---計時器

<input type="button" value="停止" id="btn"/>
<script>
  var timeId = setInterval(function () {
    alert("hello");//斷言
  }, 1000);
  document.getElementById("btn").onclick = function () {
    //點選按鈕,停止定時器
    //引數:要清理的定時的id的值
    window.clearInterval(timeId);
  };

案例：圖示的動態顯示

<input type="button" value="搖起來" id="btn1"/>
<input type="button" value="停止" id="btn2"/>
<div id="dv">
  <img src="images/heihei.jpg" alt=""/>
  <img src="images/lyml.jpg" alt=""/>
</div>
<script src="common.js"></script>
<script>
  //點選按鈕搖起來
  var timeId="";
  my$("btn1").onclick = function () {
    timeId= setInterval(function () {
      //隨機數
      var x = parseInt(Math.random() * 100 + 1);
      var y = parseInt(Math.random() * 100 + 1);
      //設定元素的left和top屬性值
      my$("dv").style.left = x + "px";
      my$("dv").style.top = y + "px";
    }, 10);
  };

  my$("btn2").onclick=function () {
    clearInterval(timeId);
  };

案例：小星星

<input type="button" value="亮起來" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
  my$("btn").onclick=function () {
    setInterval(function () {
      my$("dv").innerHTML="<span>★</span>";
      var x = parseInt(Math.random() * 600 + 1);
      var y = parseInt(Math.random() * 600 + 1);
      my$("dv").firstElementChild.style.left=x+"px";
      my$("dv").firstElementChild.style.top=y+"px";
    },5);

  };
</script>

案例：動態圖片的顯示

  function f1() {
    //獲取當前時間
    var dt = new Date();
    //獲取小時
    var hour = dt.getHours();
    //獲取秒
    var second = dt.getSeconds();

    hour = hour < 10 ? "0" + hour : hour;
    second = second < 10 ? "0" + second : second;

    my$("im").src="meimei/"+hour+"_"+second+".jpg";
  }
  f1();
  //頁面載入完畢後,過了1秒才執行函式的程式碼
  setInterval(f1,1000);