vue项目实战（个人博客）七------给v-html中渲染的文章（html代码段）中图片添加点击事件（事件委托）

由于在vue中v-html渲染的html代码段中添加的事件是无效的所以我们不能给html代码段中拼接点击事件实现功能

刚开始想用正则匹配出图片然后用图片浏览插件实现图片反大，最后还是换了别的方法

我们可以吧点击事件添加到他们的父标签上，通过事件冒泡判断标签是不是img从而添加点击事件

事件委托

事件委托，通俗地来讲，就是把一个元素响应事件（click、keydown…）的函数委托到另一个元素；

事件冒泡

捕获阶段：在事件冒泡的模型中，捕获阶段不会响应任何事件；
目标阶段：目标阶段就是指事件响应到触发事件的最底层元素上；
冒泡阶段：冒泡阶段就是事件的触发响应会从最底层目标一层层地向外到最外层（根节点），事件代理即是利用事件冒泡的机制把里层所需要响应的事件绑定到外层；### 事件

事件委托实现

我们来实现把 #list 下的 li 元素的事件代理委托到它的父层元素也就是 #list 上：

// 给父层元素绑定事件
document.getElementById('list').addEventListener('click', function (e) {
  // 兼容性处理
  var event = e || window.event;
  var target = event.target || event.srcElement;
  // 判断是否匹配目标元素
  if (target.nodeName.toLocaleLowerCase === 'li') {
    console.log('the content is: ', target.innerHTML);
  }
});

最终解决方法