Почему обработчик событий не срабатывает при динамическом создании тега на JavaScript?

1. Обработчик событий не срабатывает при динамическом создании тега на JavaScript, потому что к моменту создания элемента DOM уже загружен и обработчики событий не привязаны к новому элементу. Чтобы обработчик событий сработал на динамически созданном элементе, его необходимо привязать после его создания через метод addEventListener() или использовать делегирование событий.

2. Необходимо записывать обработчик события для элемента li внутри функции обработчика события для элемента btn, чтобы иметь доступ к этому элементу и его событиям. В данном случае, при срабатывании события на элементе btn, функция обработчика получает доступ к элементу li через объект события, что может быть полезно для взаимодействия с этим элементом или его родителями.

Ведь мы создаем новый li при клике на btn, и он попадает в DOM
 Ну да, попадает. А чтобы что-то с ним делать, нужно навесить обработчик события. Совершенно непонятно, что вас в этом процессе удивляет. 
 Вы можете делегировать обработку события родительскому контейнеру ( <ol /> ) и тогда навешивать отдельные обработчики на создаваемые элементы не придётся.