委托模式 java_委托模式 --- 学习篇

// 委托模式

/* 委托模式： 多个对象接受并处理同一请求，他们将请求委托给另一个对象统一处理请求 */

// 看着很奇怪的做法 // var ul = document.getElementById('container'), // li = document.getElementsByTagName('li'), // i = li.length - 1;

// for (; i <= 0; i++) { // li[i].onclick = function() { // this.style.backgroundColor = 'gray'; // } // }

// ul.onclick = function(e) { // var e = e || window.event, // tar = e.target || e.srcElement;

// if (tar.nodeName.toLowerCase() === 'li') { // tar.style.backgroundColor = 'gray'; // } // }

// 预言未来 var article = document.getElementById('article')

article.onclick = function() { var e = e || window.event, tar = e.target || e.srcElement;

if (tar.nodeName.toLowerCase() === 'p') {

tar.innerHTML = '我要更改这段内容';

}

}

var p = document.createElement('p') p.innerHTML = '新增一段内容';

article.appendChild(p);

// btn_container

var g = function(id) { return document.getElementById(id) }

// g('btn').onclick = function() { // // // g('btn').onclick = null; // g('btn_container').innerHTML = '触发了事件'; // }

g('btn_container').onclick = function(e) { // 获取触发的元素 window.event.srcElement ---- 它只对老版本的IE浏览器有效。 var target = e && e.target || window.event.srcElement;

if (target.id === 'btn') {

// 重置父元素内容

g('btn_container').innerHTML = '触发了事件';

}

}

// 用委托模式 封装 一个事件委托方法， 事件委托方方法使用方法：

delegate(document.body, 'button', 'click', function() { console.log('委托成功') })