Почему бы не использовать обработчики javascript для элемента body? - PullRequest
Новая
       33

Почему бы не использовать обработчики javascript для элемента body?

6 голосов
/ 28 апреля 2010

Как ответ на вопрос «Как автоматически установить фокус на текстовое поле при загрузке веб-страницы?» , Espo предлагает использовать 

<body onLoad="document.getElementById('<id>').focus();">

Бен Шейрман отвечает (без дальнейшего объяснения):

Любая книга по JavaScript не скажет вам поместить обработчики на элемент тела вот так

Почему это считается плохой практикой? В ответе Espos проиллюстрирована проблема «переопределения». Это единственная причина, или есть другие проблемы? Проблемы совместимости?

Ответы [ 8 ]

7 голосов
/ 28 апреля 2010

Использование onLoad становится все менее распространенным, поскольку обратные вызовы не могут быть сложены с помощью этого метода, то есть новые определения onload переопределяют старые.

В современных средах, таких как jQuery и его .load(), обратные вызовы могут быть сложены, и при использовании разных сценариев, плагинов и т. Д. На одной странице не возникает конфликтов.

Кроме того, этообщепринятая хорошая практика держать разметку отдельно от кода, поэтому даже если кто-то захочет использовать onload (что вполне нормально, если вы контролируете всю среду и знаете, что делаете), он прикрепляет это событие ксторона сценариев либо в head, либо в отдельном файле javaScript: 

window.onload = function() { document.getElementById...... }
4 голосов
/ 28 апреля 2010

Нет ничего плохого в использовании атрибута onload в элементе <body>, при условии:

  • у вас есть полный контроль над страницей
  • никакой другой сценарий, который вы используете на странице в настоящее время или который мог бы иметь в будущем, не будет пытаться установить обработчик onload для элемента body или window объекта
  • вы знаете свой ум и рады, что в вашей наценке есть небольшой кусочек сценария.

Стоит также отметить, что <body onload="..."> является частью формального стандарта (HTML 4), а window.onload - нет, хотя он реализован во всех основных браузерах много лет назад.

3 голосов
/ 28 апреля 2010

Несмотря на то, что атрибуты встроенного обработчика событий на данный момент являются ошибочными, событие onload является плохим местом для установки автофокуса, поскольку оно срабатывает только при загрузке всей страницы, включая изображения.

Это означает, что пользователю придется ждать дольше, пока не произойдет автофокусировка, и, если загрузка страницы занимает много времени, они, возможно, уже сфокусировались в другом месте на странице браузера (или в Chrome, например в адресной строке), чтобы найти их фокус украденным на полпути через печать. Это очень раздражает.

Автофокус - потенциально враждебная функция, которую следует использовать экономно и вежливо. Частично это уменьшает задержку перед фокусировкой, и самый простой способ сделать это - блок скрипта непосредственно после самого элемента. 

<input id="x">
<script type="text/javascript">
    document.getElementById('x').focus();
</script>
0 голосов
/ 27 февраля 2016

Другой способ взглянуть на это - использовать addEventListener вместо использования его в качестве HTML-кода. Попробуйте JS: 

<body onLoad="document.getElementById('<id>').focus();">

    <body>

    <script>

     document.body.addEventListener('load', funcLoad);

     function funcLoad(){

     document.getElementById('<id>').focus();

    }

    </script>
</body>

Попробуйте, это может работать лучше, чем другие решения.

0 голосов
/ 28 апреля 2010

Я не вижу никакой другой причины, кроме возможного более позднего переопределения, которое приведет к тому, что ваш код никогда не будет выполнен. Кроме того, навязчивый javascript больше не очень важен.

Вместо этого вы должны назначить функцию прослушивания события. Вы можете сделать это так: 

function onloadFocus() {
    document.getElementById('<id>').focus();
}

if (window.addEventListener) {      
    window.addEventListener('load', function(e) {onloadFocus();}, false);} 
else if (window.attachEvent) {
    window.attachEvent('onload', function(e) {onloadFocus();}); 
}

... или полагайтесь на инфраструктуру javascript, например jquery, которая предоставит вам такую ​​же функциональность.

0 голосов
/ 28 апреля 2010

В качестве более не связанного с javascript ответа ответ, уровень представления вашего приложения может быть в форме шаблонов или даже вложенных шаблонов (dreamweaver или Master Pages и т. Д.), Где наличие определенного кода в теге body может не требоваться или конфликтовать с другим кодом, необходимым, когда шаблон «унаследован»

0 голосов
/ 28 апреля 2010

Ну, '<id>' - это неверное значение id, если вы спросите меня. Я бы не стал использовать такие символы, как этот.

И для хорошей практики лучше использовать window.onload IMO и поместить его в тег <head>. ИЛИ еще лучше, вы можете переместить его в файл .js и кэшировать его для скорости.

0 голосов
/ 28 апреля 2010

Полагаю, это касается и других файлов javascript. Если некоторые из ваших javascript-файлов содержат обработчик для загрузки тела, и если на вашей странице указан встроенный обработчик загрузки тела, обработчик внутри сценария не будет выполнен.

...