::before ::after 是CSS伪元素，使用::before ::after分别可以为指定的元素对象在最面和最后面插入一个元素，CSS 3为了区别伪类和伪元素，规定伪元素使用两个冒号，伪类使用一个冒号，但又兼容伪元素写一个冒号的写法，所以::before可以写作:before，::after可以写作:after.
通过CSS ::before ::after创建的元素，在javascript中无法被获取，所以document.querySelector('::before') document.querySelector(':before') document.querySelector('::after') document.querySelector(':after')拿不到指定::before/::after伪元素，所以想要直接给伪对象添加事件处理函数是不可能的。
但是我们可以通过给::before after伪元素的父元素添加事件处理函数，然后在事件处理函数中通过event.target判断触发事件的元素，老式IE浏览器可以使用event.srcElement获取触发事件的元素，需要注意的是，即使这样操作，仍然拿不到伪对象，如果伪元素触发事件和父元素除去伪元素和其他剩余元素外的部分触发事件可以看作等效的，这种思路才有用。比如，你在某个元素中通过::before伪元素插入了一个关闭按钮，点击这个按钮就可以关闭它的父元素，你只要判断一下event.target和这个父元素是否相同，如果触发事件的元素是其他的子元素，事件处理函数直接跳过不处理即可。
这其中还涉及到事件冒泡的处理，你需要使用event.stopPropagation()来阻止事件冒泡，老式IE需要使用event.cancelBubble(). 事件冒泡被阻止以后，如果子元素和父元素同时绑定了相同的事件，子元素触发事件以后父元素不会再触发。 |
|
