JS 事件监听、事件委托2018-07-10
//常规的事件绑定只执行最后绑定的事件
//使用事件监听绑定事件
//可以绑定多个事件
//语法element.addEventListener(event, function, useCapture)
document.getElementById('btn3').addEventListener('click',hello3);
document.getElementById('btn3').addEventListener('click',hello302);
document.getElementById('btn3').removeEventListener('click',hello302);
function hello3() {
console.log('addEventListener使用事件监听绑定事件1');
}
function hello302() {
console.log('addEventListener使用事件监听绑定事件2');
}
//封装事件监听
function addEvernHandler(target,type,fn ) {
if(target.addEventListener){
target.addEventListener(type,fn)
}else {
target.attachEvent("on"+type,fn)
}
}
//移除监听
function removeEvenHandler(target,type,fn) {
if(target.removeEventListener){
target.removeEventListener(type,fn)
}else{
target.detachEvent("on"+type,fn)
}
}
//调用
var btn4=document.getElementById('btn4');
addEvernHandler(btn4,'click',hello4);
removeEvenHandler(btn4,'click',hello402);
function hello4() {
console.log('封装监听');
}
function hello402() {
console.log('移除监听');
}
//事件委托
//事件委托就是利用冒泡的原理，把事件加到父元素或祖先元素上，触发执行效果
//提高JavaScript性能。事件委托可以显著的提高事件的处理速度，减少内存的占用
var btn5=document.getElementById('btn5');
document.onclick=function (event) {
event=event || window.event;
var target=event.target || event.srcElement;
if(target==btn5){
console.log(btn5.value)
}
}
document.getElementById('li1').onclick=function () {
console.log('li1');
}
document.getElementById('li2').onclick=function () {
console.log('li2');
}
document.getElementById('li3').onclick=function () {
console.log('li3');
}
document.getElementById('li4').onclick=function () {
console.log('li4');
}
//事件委托
var ul2=document.getElementById('ul2');
var item=ul2.getElementsByTagName("li");
for (var i=0;i
(function (i) {
item[i].onclick=function () {
console.log(item[i].innerHTML)
}
})(i)
}
// 传统的事件绑定无法对动态添加的元素而动态的添加事件
var node=document.createElement('li');
var textnode=document.createTextNode("5");
node.appendChild(textnode);
ul2.appendChild(node);
var list=document.getElementById("ul3");
document.addEventListener("click",function (event) {
var target=event.target;
if(target.nodeName=="LI"){
console.log(target.innerHTML);
}
});
var node2=document.createElement("li");
var textnode2=document.createTextNode("5");
node2.appendChild(textnode2);
list.appendChild(node2)
