糟糕：元素上绑定的事件不再生效了！

今天在开发上，遇到了一个问题：

这次开发使用的是react，在组件里，有个file input元素，在组件componentDidMounted事件里,用addEventListener方法，给input元素绑定上了change事件。

在操作的时候，input元素的change事件，只执行了一次，第二次再加文件，就没有再次执行事件了。

问题的排查，先直接去看的事件方法，看看change里的那个方法是否发生了什么？第一次执行，一切都正常，第二次，change方法里，什么都没执行。排查得有点没有头绪。

后来进行搜索后，发现其他人有类似的问题，原因是input元素被替换调了，新的input元素没有绑定上事件，所以事件就不起作用了。

回到我遇到的问题上来，看代码

{ bo && <input type="file"> }

这个写法，由于bo值的变化，会使得input元素消失，又重新添加，每次新添加都是新元素。新的元素追加时，没有绑定事件，所以事件就没起作用了。

真正解决问题，应该追根溯源。

元素绑定事件，事件方法未执行，原因应该有以下几种情况：

• 事件未绑定到目标元素上
• 用户操作时，未操作到目标元素，例如点击时，由于元素遮挡等，实际上并未点击到目标元素上。
• 元素本身被新元素替换，要操作的元素，在操作的过程中，会被删除，然后再添加新的元素。 我所经历的就是这种情况。

排查问题，应该从根源上去排查问题，而不是盲目地一步步查找，在排查前，先思考，有哪些因素会引起这种问题，再从这些因素着手排查。