Document DOM events

This closes https://github.com/select2/select2/pull/4115.

docs/_includes/options/events/jquery.html

@@ -7,7 +7,38 @@
     What events will Select2 trigger?
   </h3>
 
-  {% include options/not-written.html %}
+  <p>
+    Select2 will trigger a few different events when different actions are taken using the component, allowing you to add custom hooks and perform actions.
+  </p>
+
+  <dl class="s2-docs-panels">
+    <dt>change</dt>
+    <dd>Triggered whenever an option is selected or removed.</dd>
+
+    <dt>select2:close</dt>
+    <dd>Triggered whenever the dropdown is closed.</dd>
+
+    <dt>select2:closing</dt>
+    <dd>Triggered before the dropdown is closed. This event can be prevented.</dd>
+
+    <dt>select2:open</dt>
+    <dd>Triggered whenever the dropdown is opened.</dd>
+
+    <dt>select2:opening</dt>
+    <dd>Triggered before the dropdown is opened. This event can be prevented.</dd>
+
+    <dt>select2:select</dt>
+    <dd>Triggered whenever a result is selected.</dd>
+
+    <dt>select2:selecting</dt>
+    <dd>Triggered before a result is selected. This event can be prevented.</dd>
+
+    <dt>select2:unselect</dt>
+    <dd>Triggered whenever a selection is removed.</dd>
+
+    <dt>select2:unselecting</dt>
+    <dd>Triggered before a selection is removed. This event can be prevented.</dd>
+  </dl>
 
   <h3>
     How can I attach listeners for these events?

docs/_sass/_dl-panels.scss

@@ -0,0 +1,24 @@
+.s2-docs-panels {
+    dt, dd {
+        border: 1px solid $panel-default-border;
+    }
+
+    dt {
+        background-color: $panel-default-heading-bg;
+        border-top-left-radius: $panel-border-radius;
+        border-top-right-radius: $panel-border-radius;
+        padding: 5px 7.5px;
+    }
+
+    dd {
+        background-color: $panel-bg;
+        border-bottom-left-radius: $panel-border-radius;
+        border-bottom-right-radius: $panel-border-radius;
+        margin-bottom: 0.75em;
+        padding: 7.5px;
+    }
+
+    dt + dd {
+        border-top: none;
+    }
+}

docs/css/s2-docs.scss

@@ -1,6 +1,8 @@
 ---
 ---
 
+@import "vendor/bootstrap/variables";
+
 @import "result-repository";
 @import "sidenav";
 @import "hamburger";
@@ -19,3 +21,4 @@
 @import "prettify";
 @import "syntax-highlighting";
 @import "typography";
+@import "dl-panels";