js（九）——事件

事件

事件：觸發-響應機制

Event接口表示在DOM中發生的任何事件，一些是用戶生成的（例如鼠標或鍵盤事件），而其他由API生成。

事件三要素

事件源:觸發(被)事件的元素
事件類型:事件的觸發方式(例如鼠標點擊或鍵盤點擊)
事件處理程序:事件觸發後要執行的代碼(函數形式)

事件的基本使用

var box = document.getElementById('box');
box.onclick = function() {
  console.log('代碼會在box被點擊後執行');  
};

案例

點擊按鈕彈出提示框
點擊按鈕修改元素的樣式

屬性操作

非表單元素的屬性

href、title、id、src、className

var link = document.getElementById('link');
console.log(link.href);
console.log(link.title);

var pic = document.getElementById('pic');
console.log(pic.src);

案例：

點擊按鈕，切換img標籤裏的圖片

點擊按鈕顯示隱藏div

innerHTML和innerText

var box = document.getElementById('box');
box.innerHTML = '我是文本<p>我會生成爲標籤</p>';
console.log(box.innerHTML);
box.innerText = '我是文本<p>我不會生成爲標籤</p>';
console.log(box.innerText);

HTML轉義符

"       &quot;
‘       &apos;
&       &amp;
<       &lt;    //less than  小於
>       &gt;   // greater than  大於
空格     &nbsp;
©       &copy;

innerHTML和innerText的區別
innerText的兼容性處理

表單元素屬性

value 用於大部分表單元素的內容獲取(option除外)
type 可以獲取input標籤的類型(輸入框或複選框等)
disabled 禁用屬性 true/false
checked 複選框選中屬性 true/false
selected 下拉菜單選中屬性 true/false

案例

給文本框賦值，獲取文本框的值
點擊按鈕禁用文本框
搜索文本框
檢測用戶名是否是3-6位，密碼是否是6-8位，如果不滿足要求高亮顯示文本框
設置下拉框中的選中項
全選反選

自定義屬性操作

getAttribute() 獲取標籤行內屬性
setAttribute() 設置標籤行內屬性
removeAttribute() 移除標籤行內屬性
與element.屬性的區別: 上述三個方法用於獲取任意的行內屬性。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <style>
    ul{
      list-style-type: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
<ul id="uu">
  <li score="10">助教的數學成績</li>
  <li score="20">班主任的成績</li>
  <li score="30">小蘇的成績</li>
  <li score="40">小杰老師成績</li>
  <li score="50">喬峯成績</li>
</ul>
<script src="common.js"></script>
<script>

  //html標籤中有沒有什麼自帶的屬性可以存儲成績的----沒有
  //本身html標籤沒有這個屬性,自己(程序員)添加的,----自定義屬性---爲了存儲一些數據

  //在html標籤中添加的自定義屬性,如果想要獲取這個屬性的值,需要使用getAttribute("自定義屬性的名字")才能獲取這個屬性的值

  //獲取所有的li標籤
  var list=document.getElementsByTagName("li");
  for(var i=0;i<list.length;i++){
    list[i].οnclick=function () {
        //alert(this.score);//不能
      //可以
      alert(this.getAttribute("score"));
    };
  }
</script>
</body>
</html>

<script>

  //總結:設置自定義屬性:setAttribute("屬性的名字","屬性的值");
  //獲取自定義屬性的值:getAttribute("屬性的名字")

   //獲取所有的li標籤,然後爲每個標籤中動態的添加自定義屬性和值
  //點擊的時候獲取該標籤的自定義屬性的值

   //根據id獲取ul標籤,並且或者該標籤中所有的li
  var list=my$("uu").getElementsByTagName("li");
  //循環遍歷
  for(var i=0;i<list.length;i++){
    //先爲每個li添加自定義屬性
    //list[i].score=(i+1)*10;//此方式,自定義屬性在DOM對象上,不在標籤中
    list[i].setAttribute("score",(i+1)*10);
    //點擊每個li標籤,顯示對應的自定義屬性值
    list[i].οnclick=function(){
      alert(this.getAttribute("score"));
    };
  }



</script>

樣式操作

使用style方式設置的樣式顯示在標籤行內

var box = document.getElementById('box');
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'red';

注意

通過樣式屬性設置寬高、位置的屬性類型是字符串，需要加上px

類名操作

修改標籤的className屬性相當於直接修改標籤的類名

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

案例

開關燈
點擊按鈕變色
圖片切換二維碼案例
當前輸入的文本框高亮顯示
點擊按鈕改變div的大小和位置
列表隔行變色、高亮顯示
京東商品展示
tab選項卡切換

創建元素的三種方式

document.write()

document.write('新設置的內容<p>標籤也可以生成</p>');

innerHTML

var box = document.getElementById('box');
box.innerHTML = '新內容<p>新標籤</p>';

document.createElement()

var div = document.createElement('div');
document.body.appendChild(div);

性能問題

innerHTML方法由於會對字符串進行解析，需要避免在循環內多次使用。
可以藉助字符串或數組的方式進行替換，再設置給innerHTML
優化後與document.createElement性能相近

案例

動態創建列表，高亮顯示
根據數據動態創建表格
模擬百度搜索文本框

節點操作

var body = document.body;
var div = document.createElement('div');
body.appendChild(div);

var firstEle = body.children[0];
body.insertBefore(div,firstEle);

body.removeChild(firstEle);

var text = document.createElement('p');
body.replaceChild(text, div);

案例：

權限選擇

節點層級

重點講父子屬性，兄弟屬性畫圖講解

var box = document.getElementById('box');
console.log(box.parentNode);
console.log(box.childNodes);
console.log(box.children);
console.log(box.nextSibling);
console.log(box.previousSibling);
console.log(box.firstChild);
console.log(box.lastChild);

注意

childNodes和children的區別，childNodes獲取的是子節點，children獲取的是子元素

nextSibling和previousSibling獲取的是節點，獲取元素對應的屬性是nextElementSibling和previousElementSibling獲取的是元素

nextElementSibling和previousElementSibling有兼容性問題，IE9以後才支持
總結

節點操作，方法
    appendChild()
    insertBefore()
    removeChild()
    replaceChild()
節點層次，屬性
    cloneNode
    parentNode
    childNodes
    children
    nextSibling/previousSibling
    firstChild/lastChild
    nodeType    節點類型
    nodeName    節點名字
    nameValue    節點值

事件詳解

事件傳遞方式：

事件傳遞有兩種方式：冒泡與捕獲。

事件傳遞定義了元素事件觸發的順序。如果你將 <p> 元素插入到 <div> 元素中，用戶點擊 <p> 元素, 哪個元素的 "click" 事件先被觸發呢？

在冒泡中，內部元素的事件會先被觸發，然後再觸發外部元素，即： <p> 元素的點擊事件先觸發，然後會觸發 <div> 元素的點擊事件。

在捕獲中，外部元素的事件會先被觸發，然後纔會觸發內部元素的事件，即： <div> 元素的點擊事件先觸發，然後再觸發 <p> 元素的點擊事件。

註冊/移除事件的三種方式

var box = document.getElementById('box');
box.onclick = function () {
  console.log('點擊後執行');
};
box.onclick = null;

hander = function() {}
box.addEventListener('click', hander, false);    //第三個參數表示是否事件冒泡
box.removeEventListener('click', hander, false);    //移除參數一定要和綁定事件參數一致

box.attachEvent('onclick', eventCode);
box.detachEvent('onclick', eventCode);

function eventCode() {
  console.log('點擊後執行');
}

兼容代碼

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, fn) {
  if (element.removeEventListener) {
    element.removeEventListener(type, fn, false);
  } else if (element.detachEvent) {
    element.detachEvent('on' + type, fn);
  } else {
    element['on'+type] = null;
  }
}

事件的三個階段

捕獲階段
當前目標階段
冒泡階段

事件對象.eventPhase屬性可以查看事件觸發時所處的階段

事件對象的屬性和方法

event.type 獲取事件類型
clientX/clientY 所有瀏覽器都支持，窗口位置
pageX/pageY IE8以前不支持，頁面位置
event.target || event.srcElement 用於獲取觸發事件的元素
event.preventDefault() 取消默認行爲

案例

跟着鼠標飛的天使
鼠標點哪圖片飛到哪裏
獲取鼠標在div內的座標

阻止事件傳播的方式

標準方式 event.stopPropagation();
IE低版本 event.cancelBubble = true; 標準中已廢棄

常用的事件

onmouseup 鼠標按鍵放開時觸發
onmousedown 鼠標按鍵按下觸發
onmousemove 鼠標移動觸發
onmouseover 鼠標懸浮在元素上觸發
onmouseout 鼠標移出元素觸發
------------------------------------------
onkeyup 鍵盤按鍵按下觸發（除printScreen鍵以外的所有鍵，可以捕獲組合鍵）
onkeydown 鍵盤按鍵擡起觸發（除printScreen鍵以外的所有鍵，可以捕獲組合鍵）
onkeypress 鍵盤按鍵按下觸發（只能捕獲字母，數字，ANSI字符。非字符不能觸發，並只能捕獲單個字符鍵）
----------------------------------------
onload 載入頁面觸發
onunload 離開頁面觸發
---------------------------------------
onfocus 獲取焦點觸發
onblur 失去焦點觸發
--------------------------------------
onsubmit 提交from表單觸發（返回true或false）
onreset 重置表單觸發
-------------------------------------
onchange 表單控件值改變觸發
onselect 文本框，文本域等控件文字被選中觸發
------------------------------------
onerror 腳本出現錯誤觸發（一般寫在body，frameset，img中）

特效

偏移量

offsetParent用於獲取定位的父級元素
offsetParent和parentNode的區別

var box = document.getElementById('box');
console.log(box.offsetParent);
console.log(box.offsetLeft);
console.log(box.offsetTop);
console.log(box.offsetWidth);
console.log(box.offsetHeight);

子元素不脫離文檔流：

offsetLeft：父級元素margin + 父級元素padding + 父級元素border + 子元素本身margin

offsetTop同理！

子元素不脫離文檔流：offsetLeft：與父級元素無關！

獲取元素寬和高使用offsetWidth和offsetHeight(含border)，不使用style.width（已被棄用）

客戶區大小

var box = document.getElementById('box');
console.log(box.clientLeft);
console.log(box.clientTop);
console.log(box.clientWidth);
console.log(box.clientHeight);

滾動偏移

var box = document.getElementById('box');
console.log(box.scrollLeft)
console.log(box.scrollTop)
console.log(box.scrollWidth)
console.log(box.scrollHeight)