第25章事件代理课堂笔记

作者: kzc爱吃梨 | 来源:发表于2019-05-08 10:41 被阅读0次

第25章事件代理课堂笔记
37 高级：MVC
第二十天web前端面试题
概念
何为三段式故事结构
Block和代理协议
dom事件代理
ReactiveCocoa常见用法（转载保留）
【事件代理】动态数据列表里，如何监听每条数据的点击？
前端面试题套路

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <div class="box">box1</div>
    <div class="box">box2</div>
    <div class="box">box3</div>
    <div class="hello">hello</div>
  </div>
  <button id="add">add</button>
</body>
</html>

JavaScript

function $(selector){
  return document.querySelector(selector);
}
function $$(selector){
  return document.querySelectorAll(selector);
}

$$('.box').forEach(function(node){
  node.onclick = function(){
    console.log(this.innerText);
  }
})

// $$('.box').forEarch(function(node){
//   node.onclick = function(){
//     console.log(this.innerText);
//   }
// })
//onclick只能绑定单个事件，若要绑定多个事件，则需使用forEarch循环遍历每个元素都绑定一个事件。

$('.container').onclick = function(e){
  if(e.target.classList.contains('box')){
    console.log(e.target.innerText);
  }
}
//单点击按钮时候在container下再增加一个box。
var i = 4
$('#add').onclick = function(){
  var box = document.createElement('div');
  box.classList.add('box');
  box.innerText = 'box' + (i++);
  $('.container').appendChild(box);
};

将事件绑定在元素的父元素上，不用遍历上面的元素更加方便。事件冒泡总会冒泡到这个container上，对于后期新增的一些元素使用事件代理的效果更好些。

image.png