第十六節(jié)JavaScript 事件處理模型與事件對(duì)象

一.事件處理模型

當(dāng)一個(gè)dom節(jié)點(diǎn)觸發(fā)事件后丁存，該事件會(huì)按照HTML結(jié)構(gòu)在根節(jié)點(diǎn)和這個(gè)元素節(jié)點(diǎn)之間傳播，路徑上所有的節(jié)點(diǎn)都會(huì)收到該事件

1. 什么是事件處理模型

事件流就是當(dāng)你單擊了某個(gè)元素薛训，單擊事件不僅僅發(fā)生在這個(gè)元素上捏萍，你也單擊了它的父元素、父元素的父元素、……它的祖先元素唾戚，甚至單擊了整個(gè)頁(yè)面。

“事件流”描述的是頁(yè)面上各個(gè)元素接收事件的順序待诅。

我們?yōu)榱嗣枋鍪录膫鞑ロ樞蛱咎梗匾馊藶橐?guī)定了兩個(gè)階段：捕獲階段（從大到小）卑雁、冒泡階段（從小到大）募书。點(diǎn)擊頁(yè)面上的一個(gè)元素，事件在哪個(gè)階段觸發(fā)测蹲，這取決于添加事件監(jiān)聽(tīng)的方法莹捡。

2. DOM 0級(jí)事件綁定

我們之前學(xué)習(xí)的

oDiv.onclick = function(){
}

這種注冊(cè)監(jiān)聽(tīng)的寫(xiě)法，就是DOM0級(jí)的事件綁定方法扣甲。就是把onclick當(dāng)做屬性添加給了oDiv元素篮赢。

通過(guò)實(shí)驗(yàn)，我們發(fā)現(xiàn)琉挖，這種事件添加方法启泣，只能監(jiān)聽(tīng)冒泡過(guò)程。事件的捕獲階段示辈，沒(méi)有監(jiān)聽(tīng)成功爬早。

這里需要注意曾沈，在IE 9、Chrome里面，事件會(huì)冒泡到window對(duì)象女气，而IE 6、7解虱、8僅僅冒泡到document對(duì)象盆色。

另外，用這種方法綁定的監(jiān)聽(tīng)胰耗，this指的是觸發(fā)這個(gè)事件的元素限次，沒(méi)有任何的瀏覽器兼容問(wèn)題。

注意: DOM0級(jí)還有一種寫(xiě)法柴灯，直接將監(jiān)聽(tīng)寫(xiě)在標(biāo)簽里面卖漫，工作中基本不用：

<div id="box1" onclick="alert('我是box1');">
<div id="box2" onclick="alert('我是box2');">
<div id="box3" onclick="alert('我是box3');">

</div>
</div>
</div>

寫(xiě)在HTML標(biāo)簽里面代碼耦合性很強(qiáng)，三層沒(méi)有完全分離赠群，工作中不用的羊始。這種寫(xiě)法，也是監(jiān)聽(tīng)冒泡階段查描。

3.DOM 2級(jí)事件綁定

DOM 2事件綁定是通過(guò)新增的 addEventListener ()來(lái)監(jiān)聽(tīng)事件

oBox.addEventListener("click",function(){
    
},false);

第1個(gè)參數(shù)：事件名不用寫(xiě)on突委， click柏卤、mouseover 、mouseout

第2個(gè)參數(shù)：函數(shù)可以是匿名函數(shù)匀油，也可以是有名函數(shù)

第3個(gè)參數(shù)：布爾值缘缚，true表示監(jiān)聽(tīng)捕獲、false表示監(jiān)聽(tīng)冒泡階段

比如:

box1.addEventListener("click", function(){
    alert("box1被點(diǎn)擊敌蚜，捕獲階段");
}, true)

第三個(gè)參數(shù)是true桥滨，表示監(jiān)聽(tīng)box1的捕獲階段的單擊事件。

小題目

<div id="box1">
    <div id="box2">
        <div id="box3">

        </div>
    </div>
</div>

對(duì)應(yīng)的js

box2.addEventListener("click", function(){
    alert(1);
}, true);   //捕獲階段

box1.onclick = function(){
    alert(2);   //冒泡階段
}

box2.addEventListener("click",function(){
    alert(3);
},false);   //冒泡階段

彈出順序1弛车、3该园、2.

4. 低版本IE的事件綁定

IE6、7帅韧、8不支持addEventListener()方法里初，

oDiv.attachEvent("onclick",函數(shù))

沒(méi)有第三個(gè)參數(shù)，也就是說(shuō)忽舟，不能選擇監(jiān)聽(tīng)捕獲双妨、冒泡。只能監(jiān)聽(tīng)冒泡叮阅。

box1.attachEvent("onclick", function(){
    alert("box1");
});

第一個(gè)參數(shù)刁品，必須寫(xiě)on，和addEventListener()不一樣浩姥；

第二個(gè)參數(shù)挑随，就是事件處理函數(shù)

沒(méi)有第三個(gè)參數(shù)，只能監(jiān)聽(tīng)冒泡勒叠。所以和on***寫(xiě)法一樣兜挨。

事件流永遠(yuǎn)是先下后上，先捕獲后冒泡眯分。但是不同的添加監(jiān)聽(tīng)的方式拌汇，決定了能夠監(jiān)聽(tīng)那一部分。

總結(jié)

DOM 0級(jí)的方式弊决，只能監(jiān)聽(tīng)冒泡階段噪舀。不能有同名的事件，會(huì)覆蓋飘诗。
- this是觸發(fā)事件的這個(gè)元素与倡。
- 高版本瀏覽器會(huì)冒泡到window，
- 低版本瀏覽器冒泡到document昆稿。
DOM 2級(jí)的方法纺座，addEventListener()，
- 可以自由設(shè)置冒泡貌嫡、捕獲比驻。第三個(gè)參數(shù): true就是捕獲，false就是冒泡岛抄。
- 事件名不加on别惦，可以有同名事件，會(huì)順序執(zhí)行夫椭，不覆蓋掸掸。
- this是觸發(fā)事件的這個(gè)元素。
- 事件會(huì)冒泡到window蹭秋。
IE 6扰付、7、8是自己的方法仁讨，attachEvent()羽莺，
- 只能監(jiān)聽(tīng)冒泡階段。沒(méi)有第三個(gè)參數(shù)洞豁。
- 事件名寫(xiě)on盐固。可以有同名事件丈挟，會(huì)反著執(zhí)行（事件棧）刁卜。
- this很蛋疼，是window而不是觸發(fā)事件的這個(gè)元素曙咽。
- 事件僅僅冒泡到document蛔趴。

三. 事件對(duì)象

任何的事件處理函數(shù)，我們的瀏覽器例朱、JS引擎會(huì)默認(rèn)往里面?zhèn)饕粋€(gè)實(shí)參孝情，就是事件對(duì)象。

通常用形參event來(lái)接收：

        <style>
          .box{
          width: 100px;
          height: 100px;
          background-color: red;
          }
        </style>
      </head>
      <body>
        <h1></h1>
        <div class="box">
         我是盒子
          </div>
          <script>
            var oh1 =document.querySelector("h1")
          var obox =document.querySelector(".box") 
          obox.onclick = function (event) {//事件對(duì)象：在你觸發(fā)事件的時(shí)候洒嗤，js會(huì)給事件處理函數(shù)傳遞一個(gè)實(shí)參咧叭，這個(gè)實(shí)參是這個(gè)事件觸發(fā)的詳細(xì)信息組合的對(duì)象
            console.log(event);
            console.log(event.clientX + "," + event.clientY);//展示在控制臺(tái)
            oh1.innerHTML= event.clientX + "," + event.clientY;  //插入到頁(yè)面
          }
        </script>

瀏覽器在調(diào)用這個(gè)事件處理函數(shù)，調(diào)用的時(shí)候還傳進(jìn)去一個(gè)實(shí)際參數(shù)

這個(gè)參數(shù)是一個(gè)對(duì)象烁竭，表示這次點(diǎn)擊事件的所有細(xì)節(jié)菲茬。比如按的什么按鈕、點(diǎn)擊的位置等等派撕。

所有這次事件的細(xì)節(jié)婉弹，都被封裝到了這個(gè)event對(duì)象里面。

比如獲取鼠標(biāo)當(dāng)前位置

    document.onmousemove = function(event){
        h1.innerHTML = "當(dāng)前鼠標(biāo)坐標(biāo)為" + event.clientX + "," + event.clientY;
    }

event.clientX表示觸發(fā)事件的時(shí)候终吼，鼠標(biāo)的x位置（相對(duì)于視口）

不同的事件镀赌，就有不同的event值〖使颍可以想象到鍵盤(pán)事件商佛，沒(méi)有鼠標(biāo)的位置喉钢。

1. 通用事件對(duì)象屬性和方法

event.type 返回事件的類(lèi)型，沒(méi)有on良姆，比如”click”
console.log(event.type);//要放到事件函數(shù)內(nèi)部才生效
event.target 返回你點(diǎn)擊的最小的那個(gè)元素肠虽，即使這個(gè)元素身上沒(méi)有監(jiān)聽(tīng)，也是返回它觸發(fā)事件源頭
event.currentTarget 返回自己玛追，this一定和event.currentTarget是一個(gè)元素税课，當(dāng)前事件綁定在誰(shuí)身上
target與currentTarge 、this的用法


     <style>
        .box {
          width: 300px;
          height: 300px;
          background-color: pink;
        }
        #wrap{
          width: 100px;
          height:100px;
          background-color: skyblue;
        } 
      </style>
    </head>
    <body>
      <div class="box">
      <div id="wrap">
      </div>    
      </div>
      <script>
        var obox = document.querySelector(".box")
        obox.onclick = function (event) {
          console.log("box",event.target);//觸發(fā)事件的源頭
          console.log(event.target === this);
          console.log("box",event.currentTarget);//事件綁定的元素
        }
        wrap.onclick = function (event) {
          console.log("wrap",event.target);//觸發(fā)事件的源頭
          console.log(event.target === this);
          console.log("wrap",event.currentTarget);//事件綁定的元素
        }
    //總結(jié)：.target 表示觸發(fā)事件流的元素痊剖，觸發(fā)事件流的元素有可能不是自己韩玩，而是當(dāng)前元素嵌套的元素
    //currentTarget 始終是事件的綁定元素，也就是說(shuō)其值始終是this（因此.target 與this用的比較多）
     </script>

例子：點(diǎn)擊li改變背景陆馁，只改變li不改變ul

方法一：批量綁定事件找颓，需要綁幾個(gè)事件

  <style>
    #box {
      background-color: #f1f1f1;
    }

    #box li {
      display: inline-block;
      width: 100px;
      height: 100px;
      background-color: pink;
      margin-right: 20px;
    }
  </style>
</head>
<body>
  <ul id="box">
    <li>首頁(yè)</li>
    <li>簡(jiǎn)介</li>
    <li>產(chǎn)品</li>
    <li>內(nèi)容</li>
  </ul>
  <script>
      var ali = document.querySelectorAll('#box li')
      var len =ali.length;
      for(var i=0;i<len;i++){
        ali[i].index = i
        ali[i].onclick = function () {  
          console.log(this.index);
          this.style.backgroundColor = 'red'
      }
    }

方法二：事件委托只需要綁一個(gè)事件，把每個(gè)事件委托給每個(gè)共同的父級(jí)

  <style>
    #box {
      background-color: #f1f1f1;
    }

    #box li {
      display: inline-block;
      width: 100px;
      height: 100px;
      background-color: pink;
      margin-right: 20px;
    }
  </style>
</head>
<body>
  <ul id="box">
    <li>首頁(yè)</li>
    <li>簡(jiǎn)介</li>
    <li>產(chǎn)品</li>
    <li>內(nèi)容</li>
  </ul>
  <script>
    box.onclick = function (ev) {
      ev = ev || ev.window;
      if (ev.target.nodeName === 'LI') {   //只有點(diǎn)擊節(jié)點(diǎn)LI才執(zhí)行操作改變顏色叮贩，過(guò)濾掉ul
        console.log(arguments);//點(diǎn)擊事件觸發(fā)時(shí)的詳細(xì)信息組合對(duì)象
        console.log(ev.target);//獲取點(diǎn)擊事件的節(jié)點(diǎn)
        console.log(ev.target.nodeName);//獲取點(diǎn)擊事件的節(jié)點(diǎn)名稱
        console.log(ev.target.innerText)  //獲取點(diǎn)擊事件的節(jié)點(diǎn)內(nèi)容
        ev.target.style.backgroundColor = 'skyblue';    //利用事件對(duì)象上的.target事件源叮雳，給觸發(fā)事件的源頭改變背景顏色，
      }

    }

方法三：事件委托采用事件節(jié)流只需要綁一個(gè)事件妇汗，把每個(gè)事件委托給每個(gè)共同的父級(jí)

  <style>
    #box {
      background-color: #f1f1f1;
    }

    #box li {
      display: inline-block;
      width: 100px;
      height: 100px;
      background-color: pink;
      margin-right: 20px;
    }
  </style>
</head>
<body>
  <ul id="box">
    <li>首頁(yè)</li>
    <li>簡(jiǎn)介</li>
    <li>產(chǎn)品</li>
    <li>內(nèi)容</li>
  </ul>
  <script>
    box.onclick = function (ev) {
      ev = ev || ev.window;
      if (ev.target.nodeName !== 'LI') {   //節(jié)流：只要不是li帘不，事件函數(shù)就終止
        return;
      }
      console.log(arguments);//點(diǎn)擊事件觸發(fā)時(shí)的詳細(xì)信息組合對(duì)象
      console.log(ev.target);//獲取點(diǎn)擊事件的節(jié)點(diǎn)
      console.log(ev.target.nodeName);//獲取點(diǎn)擊事件的節(jié)點(diǎn)名稱
      console.log(ev.target.innerText)  //獲取點(diǎn)擊事件的節(jié)點(diǎn)內(nèi)容
      ev.target.style.backgroundColor = 'skyblue';    //利用事件對(duì)象上的.target事件源，給觸發(fā)事件的源頭改變背景顏色杨箭，

    }
  </script>

4寞焙、event.button 區(qū)分左鍵,中間,右鍵 0,1,2

box.onmousedown = function (ev) {
      ev = ev || ev.window;
      console.log(ev.button);   // 左0 中1 右2
    }

5、阻止事件流

stopPropagation() 停止傳播事件流互婿，點(diǎn)誰(shuí)觸發(fā)誰(shuí)捣郊，不傳播了

  <style>
    #box {
      background-color: #f1f1f1;
      width: 300px;
      height: 300px;
      background-color: pink;
    }
    #box #wrap {
      display: inline-block;
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <div id="box">
    <div id="wrap">
    </div>
  </div>
  <script>
    box.onclick = function (ev) {
      ev = ev || ev.window;
      console.log('box', ev);
    }
    wrap.onclick = function (ev) {
      ev = ev || ev.window;
      console.log('wrap', ev);
      ev.stopPropagation();   //阻止事件流
    }
  </script>

阻止默認(rèn)事件
右鍵--菜單、百度圖片拖動(dòng)慈参、a標(biāo)簽跳轉(zhuǎn)呛牲、表單提交這些都是網(wǎng)頁(yè)的默認(rèn)事件
preventDefault() 阻止默認(rèn)事件

  <style>
    #box {
      background-color: #f1f1f1;
      width: 300px;
      height: 300px;
      background-color: pink;
    }
    #box #wrap {
      display: inline-block;
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <div id="box">
    <div id="wrap">
    </div>
  </div>
  <script>
    // box.oncontextmenu = function (ev) {  //點(diǎn)擊鼠標(biāo)右鍵觸發(fā),瀏覽器有默認(rèn)的右鍵行為
    //   ev = ev || event.window; 
    //   console.log(ev);
    //   ev.preventDefault();   //阻止了這個(gè)節(jié)點(diǎn)上的默認(rèn)的右鍵行為
    // }

不想讓用戶在網(wǎng)頁(yè)上使用右鍵，可以在window上綁定驮配。

    window.oncontextmenu = function (ev) {  
      ev = ev || event.window; 
      console.log(111);
      ev.preventDefault(); 
    }

打開(kāi)控制臺(tái)可以操作：瀏覽器右上三點(diǎn)---更多工具---開(kāi)發(fā)者工具

事件對(duì)象上儲(chǔ)存的常用信息

clientX/clientY 鼠標(biāo)距離瀏覽器左上角的水平/豎直距離
pageX/pageY 鼠標(biāo)距離頁(yè)面左上角的水平/豎直距離
offsetX/offsetY 鼠標(biāo)距離觸發(fā)事件的元素左上角的水平/豎直距離
layerX/layerY 鼠標(biāo)距離最近定位父級(jí)元素左上角的水平/豎直距離
screenX/screenY 鼠標(biāo)距離計(jì)算機(jī)屏幕左上角的水平/豎直距離

IE6娘扩、7、8的兼容問(wèn)題

超級(jí)兼容大坑：在調(diào)用事件處理函數(shù)的時(shí)候壮锻，高級(jí)瀏覽器是傳給這個(gè)事件處理函數(shù)一個(gè)實(shí)際參數(shù)event對(duì)象琐旁。但是IE6、7猜绣、8是給window對(duì)象綁定一個(gè)當(dāng)前的event屬性灰殴。

IE中的鼠標(biāo)位置

document.onmousemove  = function(){
    h1.innerHTML = "當(dāng)前鼠標(biāo)坐標(biāo)為" + window.event.clientX + "," + window.event.clientY;
}

3.1 IE 事件對(duì)象兼容方法

//在頁(yè)面上鼠標(biāo)移動(dòng)的時(shí)候，觸發(fā)事件
document.onmousemove  = function(event){
    event = event || window.event;    //兼容寫(xiě)法
    h1.innerHTML = "當(dāng)前鼠標(biāo)坐標(biāo)為" + event.clientX + "," + event.clientY;
}

|| 就是或邏輯短路運(yùn)算符掰邢，如果event有定義牺陶，那么就event對(duì)象伟阔；否則就是window.event對(duì)象。

3.2 IE 事件對(duì)象中的不兼容的方法

阻止默認(rèn)事件
- 主流瀏覽器
  event.preventDefault();
- 在IE中是一個(gè)屬性：
  event.returnValue = false;
```
    document.oncontextmenu = function (ev) {  
      ev = ev || event.window; 
      // ev.returnValue = false;  //阻止默認(rèn)事件也可以這樣寫(xiě)掰伸，主流瀏覽器也支持
      return false;      
      console.log(111);
    }
```
- 這些的兼容性問(wèn)題皱炉，就用能力檢測(cè)來(lái)解決：
  //阻止默認(rèn)的滾動(dòng)事件，阻止的方法有瀏覽器兼容問(wèn)題：
  if(event.preventDefault){
  event.preventDefault();
  }else{
  event.returnValue = false;
  }

阻止事件冒泡
- 主流瀏覽器
  event.stopPropagation()
- 在IE中是一個(gè)屬性：
  event.cancelBubble=true;
- 這些的兼容性問(wèn)題碱工，就用能力檢測(cè)來(lái)解決：
  if(event.stopPropagation){
  event.stopPropagation()
  }else{
  event.cancelBubble=true;
  }

事件源兼容
- 主流瀏覽器
  event.target
- 在IE中是一個(gè)屬性：
  event.srcElement;
- 這些的兼容性問(wèn)題娃承，就用短路語(yǔ)法：
  var targetElem = event.target || event.srcElement; //事件源兼容寫(xiě)法

總結(jié)IE 6奏夫、7怕篷、8中不支持方法，我們要記住這三個(gè)：
event.preventDefault()不兼容酗昼！在IE 6廊谓、7、8中用event.returnValue=false; 代替 //阻止默認(rèn)事件
event.stopPropagation()不兼容麻削！在IE 6蒸痹、7、8中用event.cancelBubble=true;代替 //事件冒泡
event.target不兼容呛哟，在IE 6叠荠、7、8中用event.srcElement代替 //事件源
什么是事件委托

利用事件冒泡的原理把子級(jí)的事件委托給祖先元素

優(yōu)點(diǎn):

不需要循環(huán)綁定每個(gè)子元素扫责，可以節(jié)約瀏覽器性能
添加新的子元素時(shí)榛鼎，不需要再給新元素綁定事件

四.滾輪事件

滾輪事件及方向值

1.1 滾輪事件

滾輪事件就是鼠標(biāo)滾動(dòng)的時(shí)候觸發(fā)，

<style>
  body {
    height: 2000px;
  }
</style>
</head>
<body>
  <div id="box">wo shi box
  </div>
  <script>
    // 滾輪事件
    document.onmousewheel = function (ev) {     //DOM0級(jí)綁定
      ev = ev || window.event;
      console.log(ev);
      box.innerHTML += ev.wheelDelta + '<br/>'
      console.log(ev.wheelDelta);   //向下-120   向上 120
    }
  </script>

onmousewheel就是鼠標(biāo)滾動(dòng)事件鳖孤，mouse鼠標(biāo)者娱，wheel就是輪子。

1.2 滾輪方向值

event參數(shù)最最重要的事就event.wheelDelta屬性苏揣，表示滾動(dòng)的方向黄鳍。這是瀏覽器的規(guī)定：

鼠標(biāo)往上滾， 120

鼠標(biāo)往下滾平匈， -120

如果滾動(dòng)快速框沟，可能出現(xiàn)120的整數(shù)倍，正負(fù)性是一樣的增炭。

onmousewheel事件的觸發(fā)街望，是滾輪滾動(dòng)一“咯噔”觸發(fā)一次。

火狐瀏覽器不兼容

2.1 獲取的滾輪事件

火狐使用自己的專用事件DOMMouseScroll弟跑，并且這個(gè)事件只能通過(guò)標(biāo)準(zhǔn)的DOM2級(jí)的事件綁定方式添加灾前。

oDiv.addEventListener("DOMMouseScroll",function(event){
    oDiv.innerHTML = event.detail;  
},false);

2.2 火狐的滾輪方向值

火狐表示滾動(dòng)方向的事件的屬性叫做event.detail。

detail就是細(xì)節(jié)的意思孟辑。

注意:火狐滾輪方向值和其他的不一樣,并且反著的

滾動(dòng)方向往上哎甲，-3蔫敲；

滾動(dòng)方向往下，3

<style>
  body {
    height: 2000px;
  }
</style>
</head>
<body>
  <div id="box">
  </div>
  <script>
    // 火狐綁定滾輪事件DOM2級(jí)事件
    document.addEventListener("DOMMouseScroll", function (ev) {
      ev = ev || window.event;
      console.log(ev);
      box.innerHTML += ev.detail + '<br>';
    }, false);
  </script>

3.兼容性封裝

封裝處理滾輪詳情的函數(shù)

<style>
  body {
    height: 2000px;
  }
</style>
</head>

<body>
  <div id="box">
  </div>
  <script>
    // 滾輪事件
    document.onmousewheel = function (ev) {     //DOM0級(jí)綁定
      ev = ev || window.event;
      var wheelDelta = getWheelDetail(ev)
      console.log(wheelDelta);   //向下-120   向上 120
    }
    // 火狐綁定滾輪事件DOM2級(jí)事件
    document.addEventListener("DOMMouseScroll", function (ev) {
      ev = ev || window.event;
      var detail = getWheelDetail(ev)
      console.log(detail);
    }, false);
    //封裝處理滾輪詳情的函數(shù)
    function getWheelDetail(ev) {
      if (ev.wheelDelta) {  //非火狐 
        return ev.wheelDelta / 120;
      } else {              //火狐
        return ev.detail / (-3)
      }
    }
  </script>



<style>
  #box {
    overflow: hidden;
    width: 200px;
    height: 200px;
    border: 2px solid red;
    margin: 40px auto;
  }
</style>
</head>

<body>
  <div id="box">afdafasdfadsfas fjdsfsdlf水電費(fèi)第三方afdafasdfadsfas fjdsfsdlf水電費(fèi)第三方afdafasdfadsfas
    fjdsfsdlf水電費(fèi)第三方afdafasdfadsfas fjdsfsdlf水電費(fèi)第三方afdafasdfadsfas fjdsfsdlf水電費(fèi)第三方afdafasdfadsfas
    fjdsfsdlf水電費(fèi)第三方afdafasdfadsfas fjdsfsdlf水電費(fèi)第三方afdafasdfadsfas fjdsfsdlf水電費(fèi)第三方afdafasdfadsfas
    fjdsfsdlf水電費(fèi)第三方afdafasdfadsfas fjdsfsdlf水電費(fèi)第三方afdafasdfadsfas
    fjdsfsdlf水電費(fèi)第三方y(tǒng)一二三四五六一二三四五六一二三四五六一二三四五六一二三四五六一二三四五六一二三四五六一二三四五六一二三四五六一二三四五六一二三四五六一二三四五六一二三四五六一二三四五六一二三四五六一二三四五六一二三四五六一二三四五六
  </div>
  <script>
    // 滾輪事件
    var tt = 0   //定義信號(hào)量
    box.onmousewheel = function (ev) {     //DOM0級(jí)綁定
      ev = ev || window.event;
      var wheelDelta = getWheelDetail(ev)
      tt += wheelDelta * 10 / -1
      this.scrollTo(0, tt);
      console.log(wheelDelta);   //向下-120   向上 120
    }
    // 火狐綁定滾輪事件DOM2級(jí)事件
    box.addEventListener("DOMMouseScroll", function (ev) {
      ev = ev || window.event;
      var detail = getWheelDetail(ev)
      tt += detail * 10 / -1
      this.scrollTo(0, tt);
      console.log(detail);
    }, false);
    //封裝處理滾輪詳情的函數(shù)
    function getWheelDetail(ev) {
      if (ev.wheelDelta) {  //非火狐 
        return ev.wheelDelta / 120;
      } else {              //火狐
        return ev.detail / (-3)
      }
    }
  </script>

當(dāng)我們給Chrome或者IE添加一個(gè)DOMMouseScroll事件的時(shí)候炭玫，會(huì)靜默奈嘿，不會(huì)報(bào)錯(cuò)。

function mousewheelhandler(event){
    event = event || window.event;   //→ 解決IE6吞加、7裙犹、8和高級(jí)瀏覽器的不兼容
    
    //Chrome、IE用的是event.wheelDelta;
    if(event.wheelDelta){  //→ 解決火狐和其他瀏覽器的不兼容
        var direction = event.wheelDelta > 0 ? 1 : -1;
    }else if(event.detail){
        //火狐用的是event.detail;
        var direction = event.detail > 0 ? -1 : 1;
    }

    console.log( direction);
}

這個(gè)事件處理程序中衔憨，已經(jīng)屏蔽不兼容叶圃。

//給IE、Chrome添加事件
oDiv.onmousewheel = mousewheelhandler;
//給火狐添加事件
oDiv.addEventListener("DOMMouseScroll",mousewheelhandler,false);

例子:

/*
    ie/chrome : onmousewheel
      event.wheelDelta
        上：120
        下：-120

    firefox : DOMMouseScroll 必須用addEventListener
      event.detail
        上：-3
        下：3

    return false阻止的是  obj.on事件名稱=fn 所觸發(fā)的默認(rèn)行為
    addEventListener綁定的事件需要通過(guò)event下面的preventDefault();
*/

var oBox = document.getElementById('box');

oBox.onmousewheel = fn;

if(oBox.addEventListener){
    oBox.addEventListener('DOMMouseScroll',fn,false);
}

function fn (e){
    e = e || window.event;
    // console.log(1)
    // console.log(e.wheelDelta)
    // console.log(e.detail)
    var direction
    if(e.wheelDelta){  //→ 解決火狐和其他瀏覽器的不兼容
        direction = e.wheelDelta > 0 ? 1 : -1;
    }else if(e.detail){
        //火狐用的是event.detail;
        direction = e.detail > 0 ? -1 : 1;
    }
    this.style.height = this.offsetHeight - (direction * 10) + 'px';
    if (e.preventDefault) {
        e.preventDefault();
    }
    return false;
}

五. 鍵盤(pán)事件

onkeydown 任意鍵按下會(huì)觸發(fā)践图，按下不抬起會(huì)一直觸發(fā)

鍵盤(pán)按下一般跟輸入數(shù)據(jù)掺冠，表單有關(guān)。當(dāng)鍵盤(pán)按下時(shí)觸發(fā)的事件

onkeyup 鍵盤(pán)抬起

當(dāng)鍵盤(pán)抬起時(shí)觸發(fā)的事件码党，不會(huì)連續(xù)觸發(fā)

onkeypress 鍵盤(pán)按下

鍵盤(pán)按下觸發(fā),和onkeydown相似,onkeypress只有輸入鍵按下觸發(fā),onkeydown是鍵盤(pán)上所有按鍵都會(huì)觸發(fā)

  <input id='ipt' type="text">
  <script>
    ipt.onkeydown = function () {
      console.log(111);
    }
    ipt.onkeyup = function () {
      console.log(222);
    }
    ipt.onkeypress = function(){
      console.log(333);
    }
  </script>

常用功能鍵

ctrlKey shiftKey altKey 對(duì)應(yīng)的keyCode為17,16,19

如果功能鍵被按下了就是true,沒(méi)按下就是false

box.onkeydown= function(e){
    console.log(e.altKey);  //返回布爾值
}


 <input id='ipt' type="text">
  <script>
    ipt.onkeydown = function (ev) {
      //控制臺(tái)顯示是鍵盤(pán)事件 ctrlKey  shiftKey  altKey都是false  如果按下為true
      console.log(ev);
      console.log(ev.altKey);
    }
  </script>

keyCode是鍵碼值 ctrlKey德崭， shiftKey ，altKey揖盘， Enter對(duì)應(yīng)的鍵碼值為17眉厨，16，19兽狭，13憾股，左上右下鍵對(duì)應(yīng)的keyCode 為37,38,39,40

  <input id='ipt' type="text">
  <script>
    ipt.onkeydown = function (ev) {
      //控制臺(tái)顯示是鍵盤(pán)事件 ctrlKey  shiftKey  altKey都是false  如果按下為true
      console.log(ev.keyCode);
    }
  </script>

5 例子

5.1 留言板功能

方法一通過(guò)鍵碼值判斷輸入的是否是回車(chē)鍵

  <ol id="list"></ol>
  <input id='ipt' type="text">
  <script>
      ipt.onkeyup = function (ev) {   //鼠標(biāo)抬起觸發(fā)
      console.log(ev);
      // console.log(this.value); //拿的輸入的值
      if(ev.keyCode ===13){    //回車(chē)
        list.innerHTML += '<li>'+this.value+'</li>';
        this.value = ''        //清空輸入框
      }
    }

方法二通過(guò)鍵碼判斷輸入的是否是回車(chē)鍵

  <ol id="list"></ol>
  <input id='ipt' type="text">
  <script>
    ipt.onkeyup = function (ev) {   
      console.log(ev);
      if(ev.key === 'Enter'){    
        list.innerHTML += '<li>'+this.value+'</li>';
        this.value = ''        
      }
    }

方法三同時(shí)按住ctrl和回車(chē)留言成功

  <ol id="list"></ol>
  <input id='ipt' type="text">
  <script>
    ipt.onkeyup = function (ev) {   //
      console.log(ev);
      if (ev.key === 'Enter' && ev.ctrlKey) {
        list.innerHTML += '<li>' + this.value + '</li>';
        this.value = ''
      }
    }
  </script>

方法四

  <ol id="oUl">
  </ol>
  <input id='ipt' type="text">
  <script>
    ipt.onkeyup = function (e) {
      e = e || window.event;
      if (this.value != '') {
        console.log(e.keyCode)
        if (e.keyCode == 13 && e.ctrlKey) {
          var oLi = document.createElement('li');
          oLi.innerHTML = this.value;
          if (oUl.children[0]) {
            oUl.insertBefore(oLi, oUl.children[0])
          } else {
            oUl.appendChild(oLi)
          }
          this.value ='';
        }
      }
    }
  </script>

5.2 方向鍵移動(dòng)

很low的寫(xiě)法

<style>
    #box {
      position: fixed;
      left: 0;
      top: 0;
      width: 100px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div id="box"></div>
  <script>
    var boxStyle = getComputedStyle(box)
    document.onkeyup = function (ev) {   // 如果改成document.onkeydown會(huì)一直觸發(fā)
      console.log(ev.keyCode);
      switch (ev.keyCode) {
        case 37:  //左        
          var left = parseInt(boxStyle.left);   //截取出來(lái)數(shù)值
          box.style.left = left - 5 + 'px'
          console.log(left);
          break;
        case 38://上
          var tt = parseInt(boxStyle.top);   //js中top是關(guān)鍵字
          box.style.top = tt - 5 + 'px'
          console.log(tt);
          break;
        case 39://右
          var left = parseInt(boxStyle.left);   //截取出來(lái)數(shù)值
          box.style.left = left + 5 + 'px'
          console.log(left);
          break;
        case 40:   //下      
          var tt = parseInt(boxStyle.top);
          box.style.top = tt + 5 + 'px'
          console.log(tt);
          break;
      }
    }
  </script>

定義信號(hào)量的寫(xiě)法，為了少操作DOM

  <style>
    #box {
      position: fixed;
      left: 0;
      top: 0;
      width: 100px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div id="box"></div>
  <script>
    var left =0,tt=0;
    document.onkeyup = function (ev) {   // 如果改成document.onkeydown會(huì)一直觸發(fā)
      console.log(ev.keyCode);
      switch (ev.keyCode) {
        case 37:  //左        
          left = left -5;
          box.style.left = left + 'px';
          break;
        case 38://上
          tt =tt-5;
          box.style.top = tt + 'px';
          break;
        case 39://右
          left = left +5;
          box.style.left = left + 'px';
          break;
        case 40:   //下      
         tt =tt + 5;
         box.style.top =tt + 'px';
      }
    }
  </script>



var oBox = document.getElementById('box');

document.onkeydown = function(e){
    e = e || window.event;

    switch(e.keyCode){
        case 37:
            oBox.style.left = oBox.offsetLeft - 10 + 'px';
            break;
        case 38:
            oBox.style.top = oBox.offsetTop - 10 + 'px';
            break;
        case 39:
            oBox.style.left = oBox.offsetLeft + 10 + 'px';
            break;
        case 40:
            oBox.style.top = oBox.offsetTop + 10 + 'px';
            break;
    }
}

五.捕獲錯(cuò)誤

try{……}catch(ex){}

try表示嘗試椭符，里面的語(yǔ)句可能有錯(cuò)誤荔燎，catch(ex)參數(shù)ex就是try語(yǔ)句段里面出現(xiàn)的錯(cuò)誤。在catch里面進(jìn)行了一個(gè)捕獲销钝，可以把錯(cuò)誤控制在這個(gè)catch語(yǔ)句塊里有咨，而不向?yàn)g覽器拋出。

try{
    console.log("123");
    var a = b;  //這行語(yǔ)句有錯(cuò)誤蒸健，b沒(méi)有被定義
    console.log("哈哈");
}catch(err){

}
console.log("456");

程序的執(zhí)行邏輯是這樣的：運(yùn)行try語(yǔ)句塊里面的語(yǔ)句座享，如果遇見(jiàn)了錯(cuò)誤的語(yǔ)句，不向?yàn)g覽器拋出錯(cuò)誤似忧。而是執(zhí)行catch語(yǔ)句段里的語(yǔ)句渣叛。try語(yǔ)句里面沒(méi)有執(zhí)行完的語(yǔ)句，不執(zhí)行了盯捌。catch語(yǔ)句塊執(zhí)行完畢之后淳衙，執(zhí)行后面的語(yǔ)句。

六.什么是BOM

Broswer Object Model

BOM和DOM類(lèi)似也是一個(gè)編程接口,這個(gè)編程接口讓JavaScript有能力與瀏覽器對(duì)話和DOM不同的是,DOM的核心是document,而B(niǎo)OM的核心是window。在全局環(huán)境中的變量&&函數(shù)聲明自動(dòng)成為window的屬性和值

1.window 對(duì)象的方法

window有雙重角色, 其一是JavaScript訪問(wèn)瀏覽器窗口的一個(gè)接口, 其二就是ECMAScript的Global對(duì)象

1.1 window作為ECMAScript的Global對(duì)象

var age = 18;
window.sex = '男'

// 此時(shí)age, sex都是window的屬性
console.log(window.age)
console.log(window.sex)

1.1 window作為JavaScript訪問(wèn)瀏覽器窗口

alert() 彈出一個(gè)窗口箫攀，無(wú)返回值
confirm() 彈出一個(gè)窗口的同時(shí)肠牲，增加了兩個(gè)選擇按鈕，返回值為布爾值
prompt() 在confirm的基礎(chǔ)上靴跛，增加了輸入框供用戶輸入內(nèi)容缀雳，返回值為用戶輸入的內(nèi)容
open(‘新頁(yè)面’,’打開(kāi)方式’) ==>open(''//www.baidu.com'',''_blank'')

  <div id="box">打開(kāi)新頁(yè)面</div>
  <script>
    box.onclick = function(){
      window.open('http://www.baidu.com','_news')  //  第二個(gè)參數(shù)表示在什么位置打開(kāi)  _black   _self
    }

close() 關(guān)閉窗口
screenLeft, screenTop (IE, Safari, Opera, Chrome), 分別表示窗口相對(duì)于屏幕左邊和上邊的位置
screenX, screenY (Firefox) 和 screenLeft , screenTop作用一樣
innerWidth, innerHeight, outerWidth, outerHeight, 瀏覽器窗口的大小注意, 獲取瀏覽器瀏覽器窗口大小在低版本IE瀏覽器中使用clientWidth, clidenHeight, 但是, 不同的模式下,這個(gè)屬性值是放在body, 或documentElement不同的元素上的

獲取窗口大小兼容

var pageWidth = window.innerWidth, 
  pageHeight = window.innerHeight;
  
if (typeof pageWidth != "number"){
     if (document.compatMode == "CSS1Compat"){ 
        pageWidth = document.documentElement.clientWidth; 
        pageHeight = document.documentElement.clientHeight; 
    } else { 
        pageWidth = document.body.clientWidth; 
        pageHeight = document.body.clientHeight; 
    } 
}

2. location =>瀏覽器地址欄信息

location是最有?的BOM對(duì)象之?，它提供了與當(dāng)前窗?中加載的?檔有關(guān)的信息梢睛，還提供了?些導(dǎo)航功能注意location既是window的屬性也是document的屬性,引用的是同一個(gè)對(duì)象

location的好處能夠?qū)⒁粋€(gè)完整的URL解析為獨(dú)立的片段 location常用的屬性

location.href 地址欄中完整的url

location.protocol 地址欄的協(xié)議

location.hostname 地址欄的主機(jī)名

location.port 地址欄的端口號(hào)

location.host 地址欄的主機(jī)名+端口號(hào)

location.pathname 地址欄的路徑

location.search 地址欄?后面的字符串

location.hash 地址欄#后面的字符串

location.reload() 重新加載,可能是緩存, 如果參數(shù)為true, 表示從服務(wù)器重新加載

3.history =>某窗口的歷史頁(yè)面

 console.log(window.history);

history對(duì)象保存著?戶上?的歷史記錄肥印，從窗?被打開(kāi)的那?刻算起。

history.length 歷史頁(yè)面?zhèn)€數(shù) history.back() 跳轉(zhuǎn)到前一個(gè)頁(yè)面 history.forward() 跳轉(zhuǎn)到后一個(gè)頁(yè)面 history.go(參數(shù)) 跳轉(zhuǎn)到第幾個(gè)頁(yè)面參數(shù)為數(shù)字可正可負(fù)

4. navigator =>瀏覽器的信息

navigator 瀏覽器信息對(duì)象

navigator.userAgent 瀏覽器的版本號(hào)

最后編輯于：2021.12.03 17:13:36

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末绝葡，一起剝皮案震驚了整個(gè)濱河市深碱，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌挤牛，老刑警劉巖莹痢，帶你破解...
沈念sama閱讀 212,884評(píng)論 6贊 492
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件种蘸，死亡現(xiàn)場(chǎng)離奇詭異墓赴，居然都是意外死亡，警方通過(guò)查閱死者的電腦和手機(jī)航瞭，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 90,755評(píng)論 3贊 385
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門(mén)诫硕，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人刊侯，你說(shuō)我怎么就攤上這事章办。” “怎么了滨彻？”我有些...
開(kāi)封第一講書(shū)人閱讀 158,369評(píng)論 0贊 348
道士緝兇錄：失蹤的賣(mài)姜人
文/不壞的土叔我叫張陵藕届，是天一觀的道長(zhǎng)。經(jīng)常有香客問(wèn)我亭饵，道長(zhǎng)休偶，這世上最難降的妖魔是什么？我笑而不...
開(kāi)封第一講書(shū)人閱讀 56,799評(píng)論 1贊 285
?港島之戀（遺憾婚禮）
正文為了忘掉前任辜羊，我火速辦了婚禮踏兜，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘八秃。我一直安慰自己碱妆，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 65,910評(píng)論 6贊 386
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布昔驱。她就那樣靜靜地躺著疹尾，像睡著了一般。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上纳本，一...
開(kāi)封第一講書(shū)人閱讀 50,096評(píng)論 1贊 291
城市分裂傳說(shuō)
那天睡雇，我揣著相機(jī)與錄音，去河邊找鬼饮醇。笑死它抱，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的朴艰。我是一名探鬼主播观蓄，決...
沈念sama閱讀 39,159評(píng)論 3贊 411
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼祠墅！你這毒婦竟也來(lái)了侮穿？” 一聲冷哼從身側(cè)響起，我...
開(kāi)封第一講書(shū)人閱讀 37,917評(píng)論 0贊 268
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤毁嗦，失蹤者是張志新（化名）和其女友劉穎亲茅，沒(méi)想到半個(gè)月后，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體狗准，經(jīng)...
沈念sama閱讀 44,360評(píng)論 1贊 303
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡克锣，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 36,673評(píng)論 2贊 327
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了腔长。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片袭祟。...
茶點(diǎn)故事閱讀 38,814評(píng)論 1贊 341
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖捞附，靈堂內(nèi)的尸體忽然破棺而出巾乳，到底是詐尸還是另有隱情，我是刑警寧澤鸟召，帶...
沈念sama閱讀 34,509評(píng)論 4贊 334
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布胆绊，位于F島的核電站，受9級(jí)特大地震影響欧募，放射性物質(zhì)發(fā)生泄漏压状。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 40,156評(píng)論 3贊 317
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一槽片、第九天我趴在偏房一處隱蔽的房頂上張望何缓。院中可真熱鬧，春花似錦还栓、人聲如沸碌廓。這莊子的主人今日做“春日...
開(kāi)封第一講書(shū)人閱讀 30,882評(píng)論 0贊 21
一樁弒父案剩盒，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)谷婆。三九已至，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間纪挎，已是汗流浹背期贫。一陣腳步聲響...
開(kāi)封第一講書(shū)人閱讀 32,123評(píng)論 1贊 267
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留异袄，地道東北人通砍。一個(gè)月前我還...
沈念sama閱讀 46,641評(píng)論 2贊 362
代替公主和親
正文我出身青樓，卻偏偏與公主長(zhǎng)得像烤蜕，于是被迫代替她去往敵國(guó)和親封孙。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 43,728評(píng)論 2贊 351