1.事件物件

事件物件：當一個事件發生的時候，跟這個事件有關的一些資訊，保存在一個物件中，這個物件就是事件物件(事件函式中才有事件物件)

• IE和谷歌：是全域的event物件

• 標準瀏覽器：是事件函式的第一個引數

• 兼容：var ev = ev || event;

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

box.onclick = function (ev) {
    // console.log(event); // IE和谷歌
    // console.log(ev); // 標準瀏覽器(IE8及以下不支持)

    var ev = ev || event; // 事件物件的兼容
    console.log(ev); // 它是一個物件，它下面就有很多的屬性或方法

    console.log(ev.type); // 事件型別

    // console.log(ev.target); // 事件源（觸發這個事件的物件）IE8及以下不支持
    // console.log(ev.srcElement); // 事件源 IE支持
    var target = ev.target || ev.srcElement; // 事件源兼容
    console.log(target);

    console.log(ev.clientX, ev.clientY); // 滑鼠相對于可視區的距離
    console.log(ev.pageX, ev.pageY); // 滑鼠到檔案的距離(IE8及以下沒有)

    console.log(ev.shiftKey); // 事件發生的時候，是否按下了shift鍵
    console.log(ev.altKey); // 事件發生的時候，是否按下了alt鍵
    console.log(ev.ctrlKey); // 事件發生的時候，是否按下了crtl鍵
}

2.事件系結與取消

1、事件系結

• 元素.addEventListener(不加on的事件名, 函式, 是否捕獲);

  • 第三個引數，如果為true，就是捕獲，如果為false，就是冒泡

• 元素.attachEvent(加on的事件名, 函式);

// addEventListener標準  和  attachEvent 非標準的區別:
1、標準的沒有on，而非標準的有on
2、標準可以設定捕獲或冒泡，而非標準的只有冒泡
3、標準的是正序執行，而非標準的是倒序執行
4、標準執行的函式中的this是觸發這個事件的元素，非標準執行函式中的this是window

// -------------------------
// 封裝一個方法，實作事件系結的兼容
// console.log(box.addEventListener); 標準瀏覽器回傳函式，而IE8及以下回傳undefined

// 引數：元素 事件型別 要執行的函式
function bind(ele, event, callback) {
    if (ele.addEventListener) {
        // 標準瀏覽器
        ele.addEventListener(event, callback, false);
    } else {
        // 非標準瀏覽器
        ele.attachEvent('on' + event, callback);
    }
}

2、取消系結

• 元素.removeEventListener(不加on的事件名, 函式, 是否捕獲);

• 元素.detachEvent(加on的事件名, 函式);

// 封裝一個方法，實作事件的取消系結
function unbind(ele, event, callback) {
    if (ele.removeEventListener) {
        // 標準瀏覽器
        ele.removeEventListener(event, callback, false);
    } else {
        // 非標準瀏覽器
        ele.detachEvent('on' + event, callback);
    }
}

3.事件委托

• 定義：也叫事件代理，就是利用事件冒泡，只指定一個事件處理程式，就可以管理某一型別的所有事件，

• 事件委托原理：子級的事件，我們加給父級，當子級發生事件時，會冒泡到父級，我們可以獲取到事件源，通過對事件源的判斷，我們就可以執行子級的事件，

• 事件委托的實作：
  
  

<input type="text"><button>添加</button>
<ul>
    <li>吃飯</li>
    <li class="abc">睡覺</li>
    <li>打豆豆</li>
</ul>

// 需求：點擊li，給每個li添加一個背景色
var ul = document.getElementsByTagName('ul')[0];
var li = ul.getElementsByTagName('li');

// 需求：給ul添加新的li
var btn = document.getElementsByTagName('button')[0];
var input = document.getElementsByTagName('input')[0];
btn.onclick = function () {
    var li = document.createElement('li');
    li.innerHTML = input.value;
    ul.appendChild(li);
}

// --------------------------------
// 普通方法，新添加的元素，沒有之前的事件
// for (var i = 0; i < li.length; i++) {
//     li[i].onclick = function () {
//         this.style.backgroundColor = 'red';
//     }
// }


// ----------------------------
// 事件代理：事件加給父祖級，通過事件物件，獲取到事件源，對事件源進行判斷，符合要求，再做相應的處理
// 好處：
// 1、省略了回圈，提高了性能
// 2、新加的元素，也有之前的事件
ul.onclick = function (ev) {
    var ev = ev || event;//事件的兼容
    var target = ev.target || ev.srcElement; // 找到事件源
    // console.log(target); 
    // if (target.nodeName === 'LI') {
    //     target.style.backgroundColor = 'green';
    // }
    if (target.className === 'abc') {
        target.style.backgroundColor = 'green';
    }
}

4. 回傳檢測螢屏寬度(可視區域)

 1  function client() {
 2    if(window.innerWidth != null)  // ie9 +  最新瀏覽器
 3    {
 4       return {
 5          width: window.innerWidth,
 6          height: window.innerHeight
 7       }
 8    }
 9    else if(document.compatMode === "CSS1Compat")  // 標準瀏覽器
10    {
11       return {
12          width: document.documentElement.clientWidth,
13          height: document.documentElement.clientHeight
14       }
15    }
16    return {   // 怪異瀏覽器
17       width: document.body.clientWidth,
18       height: document.body.clientHeight
19    }
20 }

5. 阻止冒泡 

 w3c的方法是event.stopPropagation()        proPagation  傳播  傳遞

 IE則是使用event.cancelBubble = true       bubble   冒泡  泡泡      cancel 取消

 兼容的寫法：

JQuery 阻止時間冒泡   event.stopPropagation();//已經兼容

                          evevt.preventDefault();//阻止瀏覽器默認行為

function stopPropagation(ev) {
    if (ev.stopPropagation) {
        // 標準瀏覽器
        ev.stopPropagation();
    } else {
        // IE8及以下
        ev.cancelBubble = true;
    }
}

獲取你點擊的事件源e.target==this作用類似event.stopPropagation();阻止冒泡

1 10  $(".box").on("click",function(e){
2     if(e.target==this){
3         alert("父盒子被點擊");
4     }
5 
6 });

6.獲取用戶選擇的內容

window.getSelection()     標準瀏覽器

document.selection.createRange().text;      ie 獲得選擇的文字

兼容性的寫法：

1 if(window.getSelection)
2 {
3     txt = window.getSelection().toString();   // 轉換為字串
4 }
5 else
6 {
7     txt = document.selection.createRange().text;   // ie 的寫法
8 }

7. 得到css 樣式  

我們想要獲得css 的樣式， box.style.left    box.style.backgorundColor

但是它只能得到   行內的樣式，

但是我們作業最多用的是 內嵌式 或者 外鏈式 ，

怎么辦？

   核心： 我們怎么才能得到內嵌或者外鏈的樣式呢？  

 1.   obj.currentStyle   ie  opera  常用

外部（使用<link>）和內嵌（使用<style>）樣式表中的樣式（ie和opera）

2 .window.getComputedStyle("元素", "偽類")     w3c

兩個選項是必須的， 沒有偽類 用 null 替代

3 兼容寫法 ：

    我們這個元素里面的屬性很多， left  top  width  ===

 我們想要某個屬性， 就應該 回傳改屬性，所有繼續封裝 回傳當前樣式的 函式，

 1 1  var demo = document.getElementById("demo");
 2 2      function getStyle(obj,attr) {  //  誰的      哪個屬性
 3 3          if(obj.currentStyle)  // ie 等
 4 4          {
 5 5              return obj.currentStyle[attr];  
 6 6          }
 7 7          else
 8 8          {
 9 9              return window.getComputedStyle(obj,null)[attr];  // w3c 瀏覽器
10 10          }
11 11      }
12 12      console.log(getStyle(demo,"width"));

標籤：JavaScript

上一篇：layer彈框插件常用方法

下一篇：react+taro-JYwebApp模板集成方案專案搭建【1】