DOM笔记

事件委托

利用事件冒泡机制，委托事件给父级元素，比监听每个子元素的事件性能好。

html

<div style="height: 100px;">
  <ul>
    <li>1</li>
    <li>2</li>
  </ul>
</div>

js

function foo(e) {
    if (e.target.nodeName.toLowerCase() === 'li') {
        e.target.style.background = '#000';
    }
}
document.querySelector('div').addEventListener('click', foo)

　　

 

 

监听div内容修改

1.DOM2级中的mutation(变动事件)里的 DOMSubtreeModified 可以监听div内容修改

document.querySelector('.element').addEventListener('DOMSubtreeModified', function(){
    alert(this);
});

　　

2.MutationObserver构造函数可以监听div内容修改

//兼容性
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
var node = document.getElementById('node');

//配置信息
var config = {
    subtree: true,        //监听目标节点包括后代节点
    childList: true,      //监听目标节点的子节点是否增加或者移除
    attributes: true,     //监听目标节点的attributes属性的增删改
    characterData: true   //如果监听的目标节点是文本节点，同时监听节点的文本内容
}

//回调函数
var func = function(re) {
    alert("success");
    console.log(re);
}

//生成实例
var server = new MutationObserver(func);

//调用配置信息和回调函数
server.observe(node, config);

 

事件监听会传入一个event对象。

1.当事件绑定在触发的元素上，触发元素时，event.currentTarget 和 event.target 和 this 都指向这个元素。
例：

var btn = document.getElementById("nowBtn");
btn.onclick = function(e) {
    console.log(e.currentTarget === this);   //true
    console.log(e.target === this);          //true
}

　　

如果绑定在当前元素的父级元素，触发元素时，event.currentTarget 和 this 都指向这个父级元素。 event.target 则指向触发的元素。
例：

document.body.onclick = function(e) {
    console.log(event.currentTarget === document.body);                     //true
    console.log(this === document.body);                                    //true
    console.log(event.target === document.getElementById("nowBtn"));        //true
}

　　

2.需要绑定多个事件时，可以利用event.type属性

var btn = document.getElementById('myBtn');
var handler = function(e) {
    switch(e.type) {
        case "click":
            console.log("click");
            break;
        case "mouseover": 
            event.target.style.backgroundColor = "#333";
            break;
        case "mouseout":
            event.target.style.backgroundColor = "#000";
            break;            
    }
}
btn.onclick = handler;
btn.addEventListener("mouseover",handler);
btn.onmouseover = handler;

 

3.event.preventDefault()可以阻止元素的默认行为。

如<a>元素默认行为是导航到href的URL，用事件处理就可以取消它(需要event.cancelable为true，默认为true)。

var link = document.getElementById('myLink');
link.onclick = function(e) {
    e.preventDefault();
};

4.event.stopPropagation()用来阻止捕获及冒泡。

var btn = document.getElementById('myBtn');
btn.onclick = function(e) {
    console.log("click");
    event.stopPropagation();    //执行完后阻止冒泡到body的click事件
};

document.body.onclick = function(e) {
    console.log('body click');
};

keyCode可以直接转换成大写字母和数字

回车等特殊键无法转换，符号转换错误。

var key;
document.getElementById('element').addEventListener('keydown', function(e){
    key = e.keyCode;
})
key = String.fromCharCode(key);

　　

HTML5事件

1.监听contextmenu事件用preventDefault()方法阻止冒泡后，可以阻止右键弹出的上下文菜单。这个事件是冒泡事件，监听document可以阻止所有元素的contextmenu事件。

 

2. haschange事件可以监听URL参数变化（主要用于Ajax），这个事件只能添加给window对象。此时的 event 会多出 oldURL 和 newURL，例：

window.addEventListener('haschange',function(e){
    console.log(e.oldURL);
    console.log(e.newURL);
})