我们把一个html元素的CSS属性设置为display:none，那么该元素会从页面上消失。但该元素消失后是有一个问题的，那就是该元素绑定的事件还存在么？
首先说结论，虽然该元素从页面上消失了，但其绑定的事件仍然存在。若想知道原理，可以接着往下看。
我们有两个按钮，分别是button1和button2，还有一个背景色是红色，class是demo的div。我们给这三个元素分别绑定了click事件。点击button1和button2分别使红色div消失和展示，点击红色div则会在控制台打印出"点击了.demo这个div"。简单起见，我们用jQuery绑定事件，用原生JS是相同的道理。
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<button class="button1">button1</button>
<button class="button2">button2</button>
<div class="demo" style="width:100px;height:100px;background-color: red;margin-top: 10px;"></div>
<script src="jquery.min.js"></script>
<script>
$(function () {
$('.demo').click(function () {
console.log('点击了.demo这个div');
})
$('.button1').click(function() {
console.log('点击了button1');
$('.demo').css('display', 'none');
});
$('.button2').click(function() {
console.log('点击了button2');
$('.demo').css('display', 'block');
});
})
</script>
</body>
</html>
我们先点击button1，使demo的display设置为none，让其消失。接着我们点击button2，使demo的display设置为block，让其展示。那么这个时候我们给demo绑定的click事件还存在么？
我们点击红色demo试一下，看看控制台是否打印出"点击了.demo这个div"。
可以看到，控制台成功打印出来"点击了.demo这个div"。
下面说一下原理，为什么元素消失了，其绑定的事件还存在。
display对于html元素，只是控制元素是否在页面展示。设置为display:none，该元素仍然存在于DOM结构中，只是在页面上不占据空间而已。我们也可以说display:none是让元素隐藏了。
若要让一个元素彻底从页面消失，并且其绑定的事件也不存在，那么我们需要将这元素销毁。销毁的方法是通过DOM事件removeXXX这一类的，让一个DOM从页面移除掉就可以了。
版权采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议 转载需注明原文作者、链接与版权协议
笔记与思考