target 事件属性 问题

飞奔的益达
  • 20
<script type="text/javascript">
        document.getElementById('paper-flip').addEventListener("click",function(e){//监听paper-flip,并设置点击事件
          if(e.target.className=="btn-close"){//这里加上target的话,btn-close这个“x”便能点击返回,没有的话则点击无效。希望可以翻译一下这段函数。
            this.className = "paper-flip";
          } else {
            this.className = "paper-flip folded";
          }
        });
    </script>

"target 事件属性可返回事件的目标节点(触发该事件的节点)" 有点不太理解这段话,意思是返回点击事件之前吗?查了半天也想了半天,还是无法很好的理解,希望可以帮我翻译一下这个整段函数。感谢!

回复
阅读 1.8k
3 个回答
✓ 已被采纳

这时事件坚挺的常用写法,原理是利用时间的冒泡机制。
在事件对象中targert是事件的触发对象,对应到代码里面应该是.btn-close元素,而currentTarget是当前事件的相应对象,对应的是'#paper-flip'.
简单说就是在btn上面触发了事件,冒泡传播到paper上面才开始处理。这时候,通过类名确定触发的元素是btn,而不是paper的其他子元素。

div里有个span有个p,给div绑定了click事件,但是单击span和p都能触发div的click事件(事件冒泡存在的前提下),那么event.target就是你点击的元素span或者p。

就是你点了哪个,event.target就是那个。

你知道吗?

宣传栏