```javascript <!-- 1. 表单元素type=hidden 未脱离文档流，无法触发绑定的事件， 所谓的脱离文档流就是指它所显示的位置和文档代码的顺序不一致--> <input type='hidden' /> <!-- 2. display:none; 或者 html的hidden属性 脱离文档流，无法触发绑定的事件--> <div style='display:none;'></div> <div hidden></div> <!-- 3. visibility: hidden; 未脱离文档流，无法触发绑定的事件 --> <div style='visibility:hidden;'></div> <!-- 4. 透明度opacity:0; 未脱离文档流，可以触发绑定的事件 --> <div style='opacity:0;'></div> <!-- 5. 绝对定位position:absolute; 未脱离文档流，可以触发绑定的事件 --> <div style='position:absolute;left:-9999px'></div> <!-- 设置宽高为0，设置透明度为0，设置z-index位置在-1000 --> ``` 2-1，display:none 与 visibility:hidden 的区别是什么？ - display : 隐藏对应的元素但不挤占该元素原来的空间。 - visibility: 隐藏对应的元素并且挤占该元素原来的空间。 即是，使用 CSS display:none 属性后，HTML 元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用 visibility:hidden 属性后，HTML 元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。 2-2，visibility属性collapse visibility的属性collapse，跟hidden是一样的。但如果这个元素是table相关的元素，例如table行，table group，table列，table column group，它的表现却跟display: none一样，也就是说，它们占用的空间也会释放。