介紹

操作元素

document.getElementById('intro').style.color = '#FF0000';

var myDocument = document;var myIntro = myDocument.getElementById('intro');var myIntroStyles = myIntro.style;  // 現(xiàn)在，我們可以設(shè)置顏色了:  myIntroStyles.color = '#FF0000';

myIntroStyles.padding = '2px 3px 0 3px';myIntroStyles.backgroundColor = '#FFF';myIntroStyles.marginTop = '20px';

myIntroStyles.padding-top = '10em';      // 產(chǎn)生語法錯誤：// 在JavaScript里橫線-是減法操作符// 而且也沒有這樣的屬性名稱

function changeStyle(elem, property, val) {    elem.style[property] = val; // 使用[]來訪問屬性}
// 使用上述的函數(shù)：var myIntro = document.getElementById('intro'); // 獲取intro文本對象changeStyle(myIntro, 'color', 'red');

var myIntro = document.getElementById('intro');    // 替換當(dāng)前的內(nèi)容myIntro.innerHTML = 'New content for the amazing paragraph!';    // 添加內(nèi)容到當(dāng)前的內(nèi)容里 myIntro.innerHTML += '... some more content...';

Node節(jié)點

var myIntro = document.getElementById('intro');    // 添加內(nèi)容var someText = 'This is the text I want to add';  var textNode = document.createTextNode(someText);  myIntro.appendChild(textNode);

var myIntro = document.getElementById('intro');    // 添加新連接到文本節(jié)點// 首先，創(chuàng)建新連接元素var myNewLink = document.createElement('a'); //   myNewLink.href = 'http://google.com'; //   myNewLink.appendChild(document.createTextNode('Visit Google')); // Visit Google    // 將內(nèi)容附件到文本節(jié)點myIntro.appendChild(myNewLink);

// 'Target'是DOM里已經(jīng)存在的元素// 'Bullet'是要插入的新元素  function insertAfter(target, bullet) {      target.nextSibling ?          target.parentNode.insertBefore(bullet, target.nextSibling)          : target.parentNode.appendChild(bullet);  }    // 使用了3目表達(dá)式:  // 格式：條件?條件為true時的表達(dá)式：條件為false時的表達(dá)式

Event事件

鼠標(biāo)事件

1. ?‘mousedown’ – 鼠標(biāo)設(shè)備按下一個元素的時候觸發(fā)mousedown事件。
2. ?‘mouseup’ – 鼠標(biāo)設(shè)備從按下的元素上彈起的時候觸發(fā)mouseup事件。
3. ?‘click’ – 鼠標(biāo)點擊元素的時候觸發(fā)click事件。
4. ?‘dblclick’ – 鼠標(biāo)雙擊元素的時候觸發(fā)dblclick事件。
5. ‘mouseover’ – 鼠標(biāo)移動到某元素上的時候觸發(fā)mouseover事件。
6. ?‘mouseout’ – 鼠標(biāo)從某元素離開的時候觸發(fā)mouseout事件。
7. ?‘mousemove’ – 鼠標(biāo)在某元素上移動但未離開的時候觸發(fā)mousemove事件。

鍵盤事件

1. ‘keypress’ – 按鍵按下的時候觸發(fā)該事件。
2. ‘keydown’ – 按鍵按下的時候觸發(fā)該事件，并且在keypress事件之前。
3. ‘keyup’ – 按鍵松開的時候觸發(fā)該事件，在keydown和keypress事件之后。

表單事件

1. ‘select’ – 文本字段（input, textarea等）的文本被選擇的時候觸發(fā)該事件。
2. ‘change’ – 控件失去input焦點的時候觸發(fā)該事件（或者值被改變的時候）。
3. ‘submit’ – 表單提交的時候觸發(fā)該事件。
4. ‘reset’ – 表單重置的時候觸發(fā)該事件。
5. ‘focus’ – 元素獲得焦點的時候觸發(fā)該事件，通常來自鼠標(biāo)設(shè)備或Tab導(dǎo)航。
6. ‘blur’ – 元素失去焦點的時候觸發(fā)該事件，通常來自鼠標(biāo)設(shè)備或Tab導(dǎo)航。

其它事件

1. ‘load’ – 頁面加載完畢（包括內(nèi)容、圖片、frame、object）的時候觸發(fā)該事件。
2. ‘resize’ – 頁面大小改變的時候觸發(fā)該事件（例如瀏覽器縮放）。
3. ‘scroll’ – 頁面滾動的時候觸發(fā)該事件。
4. ‘unload’ – 從頁面或frame刪除所有內(nèi)容的時候觸發(fā)該事件（例如離開一個頁面）。

事件處理

  <button id="my-button">Click me!button>  

// JavaScript:  var myElement = document.getElementById('my-button');
// 事件處理句柄:  function buttonClick() {    alert('You just clicked the button!');}
// 注冊事件myElement.onclick = buttonClick;

<button onclick="return buttonClick()">Click me!button>

// 格式：target.addEventListener( type, function, useCapture );//?例子:??var?myIntro?=?document.getElementById('intro');myIntro.addEventListener('click', introClick, false);

//?格式:?target.attachEvent?(?'on'?+?type,?function?);// 例子:  var myIntro = document.getElementById('intro');myIntro.attachEvent('onclick', introClick);

function introClick() {    alert('You clicked the paragraph!');}

function addEvent(elem, type, fn) {    if (elem.attachEvent) {        elem.attachEvent('on' + type, fn);        return;    }    if (elem.addEventListener) {        elem.addEventListener(type, fn, false);    }}

function removeEvent(elem, type, fn) {    if (elem.detachEvent) {        elem.detachEvent('on' + type, fn);        return;    }    if (elem.removeEventListener) {        elem.removeEventListener(type, fn, false);    }}

var myIntro = document.getElementById('intro');addEvent(myIntro, 'click', function () {    alert('YOU CLICKED ME!!!');});

// 注意：前提是我們已經(jīng)定于好了addEvent/removeEvent函數(shù)// (定義好了才能使用哦)var myIntro = document.getElementById('intro');addEvent(myIntro, 'click', oneClickOnly);
function oneClickOnly() {    alert('WOW!');    removeEvent(myIntro, 'click', oneClickOnly);}

addEvent(myIntro, 'click', function () {    alert('WOW!');    removeEvent(myIntro, 'click', arguments.callee);});

function myEventHandler() {    this.style.display = 'none';}
// 正常工作，this是代表該元素myIntro.onclick = myEventHandler;
// 正常工作，this是代表該元素myIntro.addEventListener('click', myEventHandler, false);
// 不正常，這時候的this是代表Window對象myIntro.attachEvent('onclick', myEventHandler);

Event對象

function myEventHandler(e) {
    // 注意參數(shù)e    // 該函數(shù)調(diào)用的時候e是event對象（W3C實現(xiàn)）
    // 兼容IE的代碼    e = e || window.event;
    // 現(xiàn)在e就可以兼容各種瀏覽器了
}
// 這里可以自由地綁定事件了

if (!e) {    e = window.event;} // 沒有else語句，因為e在其它瀏覽器已經(jīng)定義了

function myEventHandler(e) {    e = e || window.event;    // 防止默認(rèn)行為        if (e.preventDefault) {        e.preventDefault();    } else {        e.returnValue = false;    }}

事件冒泡

function myParagraphEventHandler(e) {
    e = e || window.event;
    // 停止向上冒泡    if (e.stopPropagation) {        // W3C實現(xiàn)          e.stopPropagation();    } else {        // IE實現(xiàn)          e.cancelBubble = true;    }
}
// 使用我們自定義的addEvent函數(shù)將myParagraphEventHandler綁定到click事件上：addEvent(document.getElementsByTagName('p')[0], 'click', myParagraphEventHandler);

var myTable = document.getElementById('my-table');
myTable.onclick = function () {
    // 處理瀏覽器兼容    e = e || window.event;    var targetNode = e.target || e.srcElement;
    // 測試如果點擊的是TR就觸發(fā)    if (targetNode.nodeName.toLowerCase() === 'tr') {        alert('You clicked a table row!');    }
}

總結(jié)