Π Π°Π·Π½ΠΎΠ΅

Css Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ: Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ эффСкт наТатия ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π° CSS

31.10.1987

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

Web-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° β€’ HTML ΠΈ CSS

Кнопка β€” элСмСнт интСрфСйса, ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΠΈΠΉ собой ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ, Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ ΠΊ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡŽ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ дСйствия. Кнопки ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π² HTML-Ρ„ΠΎΡ€ΠΌΠ°Ρ…, Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²Ρ‹Ρ… ΠΎΠΊΠ½Π°Ρ…, мСню ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… частях Π²Π΅Π±-страниц. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡƒΡ‚Π΅ΠΌ добавлСния классов btn ΠΈ btn-default ΠΊ элСмСнту <a> ΠΈΠ»ΠΈ <button>.

Кнопки

<!-- Ρ‚Π΅ΠΌΠ° default -->
<button type="button">ВСкст ΠΊΠ½ΠΎΠΏΠΊΠΈ</button>
<!-- Ρ‚Π΅ΠΌΠ° primary -->
<button type="button">ВСкст ΠΊΠ½ΠΎΠΏΠΊΠΈ</button>
<!-- Ρ‚Π΅ΠΌΠ° success -->
<button type="button">ВСкст ΠΊΠ½ΠΎΠΏΠΊΠΈ</button>
<!-- Ρ‚Π΅ΠΌΠ° info -->
<button type="button">ВСкст ΠΊΠ½ΠΎΠΏΠΊΠΈ</button>
<!-- Ρ‚Π΅ΠΌΠ° warning -->
<button type="button">ВСкст ΠΊΠ½ΠΎΠΏΠΊΠΈ</button>
<!-- Ρ‚Π΅ΠΌΠ° danger -->
<button type="button">ВСкст ΠΊΠ½ΠΎΠΏΠΊΠΈ</button>
<!-- Ρ‚Π΅ΠΌΠ° link -->
<button type="button">ВСкст ΠΊΠ½ΠΎΠΏΠΊΠΈ</button>

ИзмСнСниС Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ:

<!-- Π‘ΠΎΠ»ΡŒΡˆΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° -->
<button type="button">ВСкст ΠΊΠ½ΠΎΠΏΠΊΠΈ</button>
<!-- МалСнькая кнопка -->
<button type="button">ВСкст ΠΊΠ½ΠΎΠΏΠΊΠΈ</button>
<!-- ΠžΡ‡Π΅Π½ΡŒ малСнькая ΠΊΠ½ΠΎΠΏΠΊΠ° -->
<button type="button">ВСкст ΠΊΠ½ΠΎΠΏΠΊΠΈ</button>

Кнопка, Π·Π°Π½ΠΈΠΌΠ°ΡŽΡ‰Π°Ρ всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта:

<button type="button">ВСкст ΠΊΠ½ΠΎΠΏΠΊΠΈ</button>

Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ:

<!-- ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ способ -->
<div>
    <button type="button">ВСкст ΠΊΠ½ΠΎΠΏΠΊΠΈ</button>
</div>
<!-- Π’Ρ‚ΠΎΡ€ΠΎΠΉ способ -->
<button type="button">ВСкст ΠΊΠ½ΠΎΠΏΠΊΠΈ</button>

Π“Ρ€ΡƒΠΏΠΏΡ‹ ΠΊΠ½ΠΎΠΏΠΎΠΊ

ОбъСдинСниС Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… ΠΊΠ½ΠΎΠΏΠΎΠΊ Π² Π³Ρ€ΡƒΠΏΠΏΡƒ:

<div role="group">
    <button>ΠŸΠ΅Ρ€Π²Π°Ρ</button>
    <button>Вторая</button>
    <button>Π’Ρ€Π΅Ρ‚ΡŒΡ</button>
</div>

ΠœΠ½ΠΎΠΆΠ΅ΡΡ‚Π²Π΅Π½Π½Ρ‹Π΅ Π³Ρ€ΡƒΠΏΠΏΡ‹ ΠΊΠ½ΠΎΠΏΠΎΠΊ:

<div role="toolbar">
    <div role="group">
        <button>ΠŸΠ΅Ρ€Π²Π°Ρ</button>
        <button>Вторая</button>
        <button>Π’Ρ€Π΅Ρ‚ΡŒΡ</button>
    </div>
    <div role="group">
        <button>ЧСтвСртая</button>
        <button>ΠŸΡΡ‚Π°Ρ</button>
    </div>
    <div role="group">
        <button>ШСстая</button>
    </div>
</div>

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Π°Ρ Π³Ρ€ΡƒΠΏΠΏΠ° ΠΊΠ½ΠΎΠΏΠΎΠΊ:

<div role="group">
    <button>ΠŸΠ΅Ρ€Π²Π°Ρ</button>
    <button>Вторая</button>
    <button>Π’Ρ€Π΅Ρ‚ΡŒΡ</button>
</div>

Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠΉ список Π²Π½ΡƒΡ‚Ρ€ΠΈ Π³Ρ€ΡƒΠΏΠΏΡ‹ ΠΊΠ½ΠΎΠΏΠΎΠΊ:

<div role="group" aria-label="ПослСдниС новости">
    <button type="button">1</button>
    <button type="button">2</button>
    <button type="button">3</button>
    <div role="group">
        <button type="button"
                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ <span></span>
        </button>
        <ul>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li role="separator"></li>
            <li><a href="#">ПослСдняя</a></li>
        </ul>
    </div>
</div>

Кнопка Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню

<div>
    <button type="button"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        ДСйствиС <span></span>
    </button>
    <ul>
        <li><a href="#">ΠŸΠ΅Ρ€Π²Π°Ρ ссылка</a></li>
        <li><a href="#">Вторая ссылка</a></li>
        <li><a href="#">Π’Ρ€Π΅Ρ‚ΡŒΡ ссылка</a></li>
        <li role="separator"></li>
        <li><a href="#">ЧСтвСртая ссылка</a></li>
    </ul>
</div>

Кнопка Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню с Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»Π΅ΠΌ:

<div>
    <button type="button">ДСйствиС</button>
    <button type="button"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span></span>
        <span>Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠΉ список</span>
    </button>
    <ul>
        <li><a href="#">ΠŸΠ΅Ρ€Π²Π°Ρ ссылка</a></li>
        <li><a href="#">Вторая ссылка</a></li>
        <li><a href="#">Π’Ρ€Π΅Ρ‚ΡŒΡ ссылка</a></li>
        <li role="separator"></li>
        <li><a href="#">ЧСтвСртая ссылка</a></li>
    </ul>
</div>

Π Π°Π·Π½Ρ‹Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΊΠ½ΠΎΠΏΠΎΠΊ:

<!-- Π‘ΠΎΠ»ΡŒΡˆΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню -->
<div>
    <button type="button"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Π‘ΠΎΠ»ΡŒΡˆΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° <span></span>
    </button>
    <ul>
        . ....
    </ul>
</div>
<!-- МалСнькая ΠΊΠ½ΠΎΠΏΠΊΠ° Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню -->
<div>
    <button type="button"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        МалСнькая кнопка <span></span>
    </button>
    <ul>
        .....
    </ul>
</div>
<!-- ΠžΡ‡Π΅Π½ΡŒ малСнькая ΠΊΠ½ΠΎΠΏΠΊΠ° Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню -->
<div>
    <button type="button"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        ΠžΡ‡Π΅Π½ΡŒ малСнькая ΠΊΠ½ΠΎΠΏΠΊΠ° <span></span>
    </button>
    <ul>
        .....
    </ul>
</div>

ΠŸΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ

Кнопка-ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΡŒ

Для создания ΠΊΠ½ΠΎΠΏΠΊΠΈ-ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»Ρ, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊ Π½Π΅ΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ data-toggle="button". ПослС этого ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΎΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒΡΡ ΠΈΠ· ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ³ΠΎ состояния Π² Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ΅ ΠΈ Π½Π°ΠΎΠ±ΠΎΡ€ΠΎΡ‚.

<button type="button" data-toggle="button" aria-pressed="false">
    Кнопка-ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΡŒ
</button>
<a href="#" data-toggle="button" aria-pressed="false" role="button">
    Кнопка-ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΡŒ
</a>

Если ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΈΠ·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½Π° Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π² Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΌ состоянии, Ρ‚ΠΎ ΠΊ Π½Π΅ΠΉ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ класс active ΠΈ aria-pressed="true".

Кнопки checkbox и radio

Π‘Ρ‚ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΈ ΠΊ Π΄Ρ€ΡƒΠ³ΠΈΠΌ элСмСнтам, Ρ‚Π°ΠΊΠΈΠΌ ΠΊΠ°ΠΊ label, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ checkbox ΠΈΠ»ΠΈ radio-ΠΊΠ½ΠΎΠΏΠΊΠΈ.

<div data-toggle="buttons">
    <label> <!-- ΠΎΡ‚ΠΌΠ΅Ρ‡Π΅Π½Π½Ρ‹ΠΉ checkbox -->
        <input type="checkbox" name="options[]" value="first" checked> ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚
    </label>
    <label>
        <input type="checkbox" name="options[]" value="second"> Π’Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚
    </label>
    <label>
        <input type="checkbox" name="options[]" value="third"> Π’Ρ€Π΅Ρ‚ΠΈΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚
    </label>
</div>
<div data-toggle="buttons">
    <label>
        <input type="radio" name="option" value="first"> ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚
    </label>
    <label>
        <input type="radio" name="option" value="second"> Π’Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚
    </label>
    <label> <!-- отмСчСнная radio-ΠΊΠ½ΠΎΠΏΠΊΠ° -->
        <input type="radio" name="option" value="third" checked> Π’Ρ€Π΅Ρ‚ΠΈΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚
    </label>
</div>

Поиск: CSS β€’ HTML β€’ Web-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° β€’ Навигация β€’ Кнопка β€’ Π“Ρ€ΡƒΠΏΠΏΠ° β€’ Button β€’ ВСрстка β€’ Bootstrap β€’ Π€Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ

ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ области ΠΊΠ»ΠΈΠΊΠ°

Π£ Π²Π°Ρ Π±Ρ‹Π²Π°Π»ΠΎ Ρ‚Π°ΠΊΠΎΠ΅, Ρ‡Ρ‚ΠΎ элСмСнт Π½Π° ΡΡ‚Ρ€Π°Π½ΠΈΡ†Π΅ Π½Π΅ Ρ€Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Π» Π½Π° ΠΊΠ»ΠΈΠΊ, ΠΏΠΎΠΊΠ° Π²Ρ‹ Π½Π΅ Π½Π°ΠΆΠΌΡ‘Ρ‚Π΅ Π½Π° ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½ΡƒΡŽ Π΅Π³ΠΎ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ?

Π­Ρ‚ΠΎ происходило ΠΏΠΎΡ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ Π½Π΅ Π²Π΅ΡΡŒ элСмСнт Π±Ρ‹Π» ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡŒΠ½Ρ‹ΠΌ. Π§Ρ‚ΠΎΠ±Ρ‹ стало понятнСС, посмотритС Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π½ΠΈΠΆΠ΅ β€” Π½Π° Π½Π΅ΠΉ Π²ΠΈΠ΄Π½ΠΎ, ΠΊΠ°ΠΊΠΎΠΉ Π΄ΠΎΠ»ΠΆΠ½Π° ΠΈ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ ΠΊΠ»ΠΈΠΊΠ°:

Π’ ΡΡ‚ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅, ΠΌΡ‹ Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€ΠΈΠΌ нСсколько распространённых ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ с UX, Π° Π² ΠΊΠΎΠ½Ρ†Π΅ ΠΏΠΎΠΊΠ°ΠΆΠ΅ΠΌ наглядный ΠΏΡ€ΠΈΠΌΠ΅Ρ€ с Π½Π°ΡˆΠ΅Π³ΠΎ сайта.

UX-Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ

Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ WCAG

Богласно WCAG 2.1 (руководство ΠΏΠΎ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡Π΅Π½ΠΈΡŽ доступности web-ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°), ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ для Ρ‚Π°Ρ‡-элСмСнта Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ 44Γ—44 CSS пиксСля. Π Π°Π·ΠΌΠ΅Ρ€ Π½Π΅ Ρ„иксирован, Π½ΠΎ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π²Π·ΡΡ‚ΡŒ Π·Π° ΠΎΡΠ½ΠΎΠ²Ρƒ.

Π—Π°ΠΊΠΎΠ½ Ѐиттса

Π­Ρ‚ΠΎ Π·Π°ΠΊΠΎΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ описываСт ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ физиологичСских Ρ€Π΅Π°ΠΊΡ†ΠΈΠΉ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ся ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ UX. Если Π½Π΅ Π²Π΄Π°Π²Π°Ρ‚ΡŒΡΡ Π² ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎΡΡ‚ΠΈ, Π΅Π³ΠΎ смысл Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π½Π° Π±ΠΎΠ»ΡŒΡˆΠΎΠΉ элСмСнт, располоТСнный рядом с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ элСмСнтами, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°ΠΆΠΌΡ‘Ρ‚ быстрСС, Ρ‡Π΅ΠΌ Π½Π° ΠΌΠ°Π»Π΅Π½ΡŒΠΊΠΈΠΉ ΠΈ ΠΎΡ‚Π΄Π°Π»Ρ‘Π½Π½Ρ‹ΠΉ.

На Ρ€ΠΈΡΡƒΠ½ΠΊΠ΅ Π½ΠΈΠΆΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ‹ Π΄Π²Π° Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° располоТСния ΠΊΠ½ΠΎΠΏΠΊΠΈ. Π‘ Π»Π΅Π²ΠΎΠΉ стороны ΠΊΠ½ΠΎΠΏΠΊΠ° мСньшС ΠΈ Π΄Π°Π»ΡŒΡˆΠ΅ ΠΎΡ‚ ΠΏΠΎΠ»Ρ Π²Π²ΠΎΠ΄Π°, Ρ‡Π΅ΠΌ справа, β€” ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ понадобится большС Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ для взаимодСйствия с Π½Π΅ΠΉ. Π‘ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΆΠ΅ стороны ΠΊΠ½ΠΎΠΏΠΊΠ° большая ΠΈ Π½Π°Ρ…одится Π±Π»ΠΈΠ·ΠΊΠΎ ΠΊ ΠΏΠΎΠ»ΡŽ Π²Π²ΠΎΠ΄Π°, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ быстро ΡΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ.

Π”Π°Π»Π΅Π΅ рассмотрим Ρ€Π΅Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Ρ‚Π°ΠΊΠΆΠ΅ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°ΡŽΡ‚ΡΡ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ WCAG 2.5.5 ΠΈ Π·Π°ΠΊΠΎΠ½ Ѐиттса.

Кнопки

ΠŸΡ€ΠΈ нСобходимости ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ элСмСнт <button>. Рассмотрим этот случай Π½Π° ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΉ систСмС ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-Π±Π°Π½ΠΊΠΈΠ½Π³Π°:

<div>Next</div>

Π’ΠΎΡ‚ Ρ‚Π°ΠΊ выглядит эта ΠΊΠ½ΠΎΠΏΠΊΠ°:

ΠŸΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΎΠ½ всё Π΅Ρ‰Ρ‘ выглядит, ΠΊΠ°ΠΊ ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ, ΠΈ это Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎ. Но Ссли Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ тСкст, Ρ‚ΠΎ появляСтся тСкстовый курсор. Π’Π°ΠΊΠΎΠ³ΠΎ Π½Π΅ случится, Ссли ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹Π΅ элСмСнты.

Благодаря HTML-элСмСнту <button>, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ смоТСт:

  • Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹;
  • Π½Π°ΠΆΠΈΠΌΠ°Ρ‚ΡŒ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΡ‹ΡˆΠΈ, ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ ΠΈΠ»ΠΈ касания.

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π±Π΅Π· JavaScript.

Кнопкам Π½ΡƒΠΆΠ½Ρ‹ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ отступы, ΠΈ Π²ΠΎΡ‚ ΠΏΠΎΡ‡Π΅ΠΌΡƒ:

  • тСксту Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ «тСсно»;
  • Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΏΡ€ΠΎΡ‰Π΅ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ (Π—Π°ΠΊΠΎΠ½ Ѐиттса).

Бсылки

Π­Ρ‚Π° ошибка встрСчаСтся Π² ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ довольно часто. Если ΠΏΠ΅Ρ€Π΅Π΄ Π²Π°ΠΌΠΈ мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, padding Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ Ρƒ элСмСнта <a>, Π° Π½Π΅ <li>.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><nav href="#">Products</nav></li>
    <li><a href="#">Store</a></li>
    <li><a href="#">Team</a></li>
  </ul>
</nav>
.nav-item {
  padding: 12px 16px;
}

Π‘ Ρ‚Π°ΠΊΠΈΠΌ ΠΊΠΎΠ΄ΠΎΠΌ ΠΊΠ»ΠΈΠΊΠ½ΡƒΡ‚ΡŒ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° Ρ‚Скст:

Π§Ρ‚ΠΎΠ±Ρ‹ этого ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ padding ΠΊ ΡΠ°ΠΌΠΎΠΉ ссылкС. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΈ Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ отступ Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ это встроСнныС элСмСнты. Для этого ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ block, inline-element ΠΈΠ»ΠΈ flex.

.nav-item a {
  display: block;
  padding: 12px 16px;
}

Π’Π΅ΠΏΠ΅Ρ€ΡŒ вся ΠΎΠ±Π»Π°ΡΡ‚ΡŒ ссылки станСт доступна для ΠΊΠ»ΠΈΠΊΠ°:

Π“Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€-мСню

Π£ Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€-мСню Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ достаточно большая ΠΎΠ±Π»Π°ΡΡ‚ΡŒ для ΠΊΠ»ΠΈΠΊΠ°, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΠΎΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π½Π° ΡΠ΅Π½ΡΠΎΡ€Π½Ρ‹Ρ… устройствах.

ΠŸΡ€Π΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊ выглядит ΠΎΠ±Π»Π°ΡΡ‚ΡŒ наТатия:

ΠŸΠΎΠΏΠ°ΡΡ‚ΡŒ ΠΏΠ°Π»ΡŒΡ†Π΅ΠΌ Π² Ρ‚Π°ΠΊΠΎΠΉ малСнький ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ слоТно. Но Π΅ΡΠ»ΠΈ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ эту ΠΎΠ±Π»Π°ΡΡ‚ΡŒ, Ρ‚ΠΎ Π²ΡΡ‘ станСт Π³ΠΎΡ€Π°Π·Π΄ΠΎ ΠΏΡ€ΠΎΡ‰Π΅:

ΠœΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ Π² этом Π΄Π΅ΠΌΠΎ.

ЧСкбоксы ΠΈ Ρ€Π°Π΄ΠΈΠΎ-ΠΊΠ½ΠΎΠΏΠΊΠΈ

ΠŸΡ€ΠΈ Π½Π°Π»ΠΈΡ‡ΠΈΠΈ чСкбокса ΠΈΠ»ΠΈ Ρ€Π°Π΄ΠΈΠΎ-ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΎΠΆΠΈΠ΄Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΎΠ½ ΡΠΌΠΎΠΆΠ΅Ρ‚ Π½Π°ΠΆΠ°Ρ‚ΡŒ Π½Π° Π½Π΅Π³ΠΎ ΠΈΠ»ΠΈ связанный с Π½ΠΈΠΌ тСкст.

На ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚Π΅ Π½ΠΈΠΆΠ΅ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ ΠΊΠ»ΠΈΠΊΠ° привязана Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΡŽ поэтому Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ Π½Π° Ρ‚Скст Π½ΠΈ ΠΊ Ρ‡Π΅ΠΌΡƒ Π½Π΅ ΠΏΡ€ΠΈΠ²Π΅Π΄Ρ‘Ρ‚:

Π­Ρ‚Ρƒ ΡΠΈΡ‚ΡƒΠ°Ρ†ΠΈΡŽ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ, Ссли Π² HTML ΡΠ²ΡΠ·Π°Ρ‚ΡŒ label ΠΈ input, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ for:

<input type="checkbox">
<label for="option1">Option 1</label>

Или ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ input Π²Π½ΡƒΡ‚Ρ€ΡŒ label:

<label for="option1">
    Option 1
    <input type="checkbox">
</label>

ПослС Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ padding для <label>, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ ΠΊΠ»ΠΈΠΊΠ° стала большС:

Π‘Π°ΠΉΠ΄Π±Π°Ρ€

Часто Π½Π° страницах с катСгориями кликабСльная ΠΎΠ±Π»Π°ΡΡ‚ΡŒ ссылок Π½Π΅ распространяСтся Π½Π° всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ элСмСнта списка. Π­Ρ‚ΠΎ происходит ΠΏΠΎΡ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ ΠΊΠ»ΠΈΠΊΠ° находится Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° тСкстовом элСмСнтС:

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ эту ΡΠΈΡ‚ΡƒΠ°Ρ†ΠΈΡŽ, Π½ΡƒΠΆΠ½ΠΎ:

  1. Π£Π΄Π°Π»ΠΈΡ‚ΡŒ отступ ΠΈΠ· элСмСнта <li> ΠΈ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π² элСмСнт <a>, ΠΊΠ°ΠΊ Π² ΠΏΡƒΠ½ΠΊΡ‚Π΅ «Бсылки».
  2. Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ display: block.
.nav-item a {
    /*Other styles*/
    padding: 12px 16px;
    display: block;
}

ПослС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π±ΡƒΠ΄ΡƒΡ‚ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½Ρ‹ эти дСйствия, ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠΌ:

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹

Π’ Π½Π΅Π΄Π°Π²Π½Π΅ΠΌ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΈ Π’Π²ΠΈΡ‚Ρ‚Π΅Ρ€Π° появилась ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° с Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ, связанная с Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ кликабСльной области. Π‘Π½Π°Ρ‡Π°Π»Π° ΠΎΠ½Π° Π±Ρ‹Π»Π° ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π° Ρ‚ΠΎΠ»ΡŒΠΊΠΎ тСкстом, ΠΊΠ°ΠΊ Π½Π° ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚Π΅ Π½ΠΈΠΆΠ΅, Π½ΠΎ ΠΏΠΎΡΠ»Π΅ получСния ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠΉ связи Π΅Ρ‘ ΠΈΡΠΏΡ€Π°Π²ΠΈΠ»ΠΈ:

Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Ρ€Π°Π·Π΄Π΅Π»Π°

Π’ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… случаях Π΅ΡΡ‚ΡŒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«ΠŸΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Π΅Ρ‰Ρ‘Β» ΠΈΠ»ΠΈ стрСлку Π½Π° ΠΊΡ€Π°ΡŽ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Ρ€Π°Π·Π΄Π΅Π»Π°. Π’ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π½ΠΈΠΆΠ΅ стрСлку помСстили Π² ΠΈΡΠΊΡƒΡΡΡ‚Π²Π΅Π½Π½Ρ‹ΠΉ ΠΊΡ€ΡƒΠ³, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΅Ρ‘.

Как ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» Π²ΠΎΠΊΡ€ΡƒΠ³ стрСлки ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ сдСлан Π² CSS, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства padding ΠΈΠ»ΠΈ width ΠΈ height.

ИспользованиС псСвдоэлСмСнтов для увСличСния области ΠΊΠ»ΠΈΠΊΠ°

НС Π²ΡΠ΅Π³Π΄Π° Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡŒΠ½ΡƒΡŽ Π·ΠΎΠ½Ρƒ большС просто Π·Π° ΡΡ‡Ρ‘Ρ‚ измСнСния ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΈ Π²Ρ‹ΡΠΎΡ‚Ρ‹ элСмСнта ΠΈΠ»ΠΈ отступа. Π’ ΡΡ‚ΠΎΠΌ случаС Π½Π° ΠΏΠΎΠΌΠΎΡ‰ΡŒ приходят псСвдоэлСмСнты.

Как это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚?

ИдСя Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ псСвдоэлСмСнты ΠΏΡ€ΠΈΠ½Π°Π΄Π»Π΅ΠΆΠ°Ρ‚ своСму Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŽ, поэтому, ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ ΡΠΎΠ·Π΄Π°Ρ‘ΠΌ Ρ‚Π°ΠΊΠΎΠΉ элСмСнт с ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ ΠΈ Π²Ρ‹ΡΠΎΡ‚ΠΎΠΉ, ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ вСсти сСбя ΠΊΠ°ΠΊ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ ΠΊΠ»ΠΈΠΊΠ°/касания/навСдСния своСго родитСля.

НиТС псСвдоэлСмСнт :after Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ΅ мСню:

.menu-2:after {
  content: "";
  position: absolute;
  left: 55px;
  top: 0;
  width: 50px;
  height: 50px;
  background: #e83474;
  /*Other styles*/
}

ΠšΠ²Π°Π΄Ρ€Π°Ρ‚ 55px ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ располоТСн справа ΠΎΡ‚ ΡΠ»Π΅ΠΌΠ΅Π½Ρ‚Π° для наглядности.

Π‘ΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ Π³ΠΈΡ„ΠΊΡƒ Π½ΠΈΠΆΠ΅ ΠΈΠ»ΠΈ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ Π΄Π΅ΠΌΠΎ Π½Π° Codepen.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ с Π½Π°ΡˆΠ΅Π³ΠΎ сайта

НСдавно ΠΌΡ‹ ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΠ»ΠΈ Π½Π° Π½Π°ΡˆΠ΅ΠΌ сайтС ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ: ΠΏΡ€ΠΈ ΠΏΠΎΠΏΡ‹Ρ‚ΠΊΠ΅ Π½Π°ΠΆΠ°Ρ‚ΡŒ Π½Π° Π»Π°ΠΉΠΊ с Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π° Π½Π° Π³Π»Π°Π²Π½ΠΎΠΉ страницС происходит ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ Π½Π° ΡΡ‚Π°Ρ‚ΡŒΡŽ. Π Π°Π·ΠΎΠ±Ρ€Π°Π²ΡˆΠΈΡΡŒ Π² Π²ΠΎΠΏΡ€ΠΎΡΠ΅, оказалось, Ρ‡Ρ‚ΠΎ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌΡ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ элСмСнта для ΠΊΠ»ΠΈΠΊΠ° Π½Π° touchscreen 48Γ—48 dp. Π˜Π½Π°Ρ‡Π΅ ΠΏΠΎ Π½Π΅ΠΌΡƒ слоТно ΠΏΠΎΠΏΠ°ΡΡ‚ΡŒ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ….

Π§Ρ‚ΠΎΠ±Ρ‹ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ эту ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ, Π½ΡƒΠΆΠ½ΠΎ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ ΠΏΠ»ΠΎΡ‰Π°Π΄ΡŒ ΠΊΠ»ΠΈΠΊΠ° Π·Π° ΡΡ‡Ρ‘Ρ‚ ΠΏΠ°Π΄Π΄ΠΈΠ½Π³ΠΎΠ², Π½ΠΎ ΠΏΡ€ΠΈ этом ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ΅ располоТСниС элСмСнтов. Π’.Π΅. Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΠ°Π΄Π΄ΠΈΠ½Π³ ΠΈ ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΌΠ°Ρ€Π³ΠΈΠ½, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€. Или ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ внСшниС отступы.

БСйчас Π²ΠΎΡ‚ Ρ‚Π°ΠΊ:

НуТно Π²ΠΎΡ‚ Ρ‚Π°ΠΊ:

Как Π²ΠΈΠ΄Π½ΠΎ, ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΎΡΡ‚Π°Π»Π°ΡΡŒ Π½Π° своём мСстС, Π½ΠΎ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ ΠΊΠ»ΠΈΠΊΠ°/Ρ‚Π°ΠΏΠ° стала большС. ΠŸΡ€ΠΈ этом Π²Π°ΠΆΠ½ΠΎ ΡΠ»Π΅Π΄ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ области Π½Π΅ ΠΏΠ΅Ρ€Π΅ΡΠ΅ΠΊΠ°Π»ΠΈΡΡŒ.

Один ΠΈΠ· Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² для Π»Π°ΠΉΠΊΠΎΠ² (Π½Π΅ ΡΠ°ΠΌΡ‹ΠΉ красивый, Π½ΠΎ Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ)

.post-votes {
 margin: 0 5px;
}
 
.svelte-15n67pa {
 padding: 9px;
 margin: -9px;
} /* ΠΊΠ½ΠΎΠΏΠΊΠΈ Π²Π²Π΅Ρ€Ρ…/Π²Π½ΠΈΠ· */

Π•Ρ‰Ρ‘ ΠΊΡ€ΡƒΡ‡Π΅ Π²ΠΎΡ‚ Ρ‚Π°ΠΊ:

Код для ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ (для Π»Π΅Π²ΠΎΠΉ Π·Π΅Ρ€ΠΊΠ°Π»ΡŒΠ½ΠΎ):

padding: 14px 14px 14px 7px; 
margin: -14px -14px -14px -7px;

Адаптированный ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄ ΡΡ‚Π°Ρ‚ΡŒΠΈ Β«Enhancing The Clickable Area SizeΒ»

Javascript ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° наТатия ΠΊΠ½ΠΎΠΏΠΊΠΈ β€’ Вэб-ΡˆΠΏΠ°Ρ€Π³Π°Π»ΠΊΠ° для ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚ ΠΏΡ€Π΅Π΄ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚Π΅Π»Π΅ΠΉ!

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

  • 1 НовыС способы
  • 2 Атрибут onclick
  • 3 ΠžΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ событий
    • 3. 1 ИспользованиС Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° HTML
    • 3.2 ИспользованиС свойства DOM-ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°
  • 4 Доступ ΠΊ элСмСнту Ρ‡Π΅Ρ€Π΅Π· this
  • 5 ЧастыС ошибки
  • 6 addEventListener
  • 7 ΠžΠ±ΡŠΠ΅ΠΊΡ‚ события
  • 8 ΠžΠ±ΡŠΠ΅ΠΊΡ‚-ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ: handleEvent
  • 9 Π˜Ρ‚ΠΎΠ³ΠΎ
  • 10 ΠžΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ событий
    • 10.1 Бобытия ΠΈ ΡƒΠ·Π»Ρ‹ DOM
    • 10.2 ΠžΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ событий
    • 10.3 РаспространСниС
    • 10.4 ДСйствия ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ
    • 10.5 Бобытия клавиш
    • 10.6 Клики ΠΌΡ‹ΡˆΠΈ
    • 10.7 Π”Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ ΠΌΡ‹ΡˆΠΈ
    • 10.8 Бобытия ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ
    • 10.9 Бобытия фокуса Π²Π²ΠΎΠ΄Π°
    • 10.10 Π‘ΠΎΠ±Ρ‹Ρ‚ΠΈΠ΅ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ
    • 10.11 Π”Ρ€ΠΎΠ±Π»Π΅Π½ΠΈΠ΅
    • 10.12 Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅
    • 10.13 Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ ΠΊ ΠΏΡ€ΠΎΡ‡Ρ‚Π΅Π½ΠΈΡŽ

Рассмотрим ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΊΠ°ΠΊ Π½ΡƒΠΆΠ½ΠΎ ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ наТатия ΠΊΠ½ΠΎΠΏΠΊΠΈ Π² Ρ„ΠΎΡ€ΠΌΠ΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ JavaScript.

Π‘ΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΠΏΡ€ΠΎΡΡ‚Π΅ΠΉΡˆΡƒΡŽ Ρ„ΠΎΡ€ΠΌΡƒ.

На Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ ΠΊΠ½ΠΎΠΏΠΊΠ° Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ Π΄Π΅Π»Π°Π΅Ρ‚. ΠŸΠΎΠ»ΡƒΡ‡ΠΈΠΌ доступ ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ΅.

Π”Π°Π»Π΅Π΅ слСдуСт ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒΡΡ ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ.

ΠžΡΡ‚Π°Π»ΠΎΡΡŒ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΡΠΎΠ·Π΄Π°Π½Π½ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ ΠΊ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠΉ

ΠŸΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ появляСтся сообщСниС.

Π˜Π΄Ρ‘ΠΌ дальшС. ΠœΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ тСкст, Π²Π²Π΅Π΄Ρ‘Π½Π½Ρ‹ΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ Π² тСкстовом ΠΏΠΎΠ»Π΅. Когда ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π²Π²ΠΎΠ΄ΠΈΡ‚ тСкст, Ρ‚ΠΎ Ρƒ элСмСнта input type=Β»textΒ» Π² свойствС value появляСтся Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΈ содСрТит тСкст ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ сначала ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ доступ ΠΊ элСмСнту страницы ΠΏΠΎ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρƒ, Π° Π·Π°Ρ‚Π΅ΠΌ Π΅Π³ΠΎ свойство.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ выводится сообщСниС, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ содСрТится имя ΠΊΠΎΡ‚Π°. НС ΠΏΠΎΠΌΠ΅ΡˆΠ°Π΅Ρ‚ нСбольшая ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠ°, Ρ‡Ρ‚ΠΎ тСкст Π±Ρ‹Π» Π²Π²Π΅Π΄Ρ‘Π½.

Π’Ρ€Π΅Ρ‚ΠΈΠΉ шаг β€” Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΈΠΌΠ΅Π½Π° ΠΊΠΎΡ‚ΠΎΠ² Π½Π° самой страницС. ΠœΡ‹ ΡƒΠΆΠ΅ ΠΏΡ€ΠΈΠ³ΠΎΡ‚ΠΎΠ²ΠΈΠ»ΠΈ список ul, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ Ρ‚ΠΎΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ доступ ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠ΅ элСмСнты. Для получСния доступа ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Π·Π½Π°ΠΊΠΎΠΌΡ‹ΠΉ ΠΌΠ΅Ρ‚ΠΎΠ΄ getElementById(). Для динамичСского создания Π½ΠΎΠ²ΠΎΠ³ΠΎ элСмСнта ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΌΠ΅Ρ‚ΠΎΠ΄ document.createElement(). ПослС создания ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ элСмСнт, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, прописав тСкст. Для тСкста элСмСнта списка Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΡƒΡŽ, которая содСрТит имя ΠΊΠΎΡ‚Π°. Π‘ΠΎΠ·Π΄Π°Π² Π½ΠΎΠ²Ρ‹ΠΉ элСмСнт, Π΅Π³ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠΌΡƒ элСмСнту Ρ‡Π΅Ρ€Π΅Π· appendChild().

НовыС способы

Π’ послСднСС врСмя стали ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΊΠΎΠ΄. НапримСр, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ const вмСсто var, вмСсто onclick β€” addEventListener.

Π’Π°ΠΊΠΆΠ΅ вмСсто getElementById() ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ querySelector(). А Π² addEventListener ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΎΠΉ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ Π²Ρ‹Π·ΠΎΠ²Π° Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ.

Атрибут onclick

Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Ρƒ ΠΊΠ½ΠΎΠΏΠΊΠΈ onclick.

Π‘ΠΎΠ±Ρ‹Ρ‚ΠΈΠ΅ – это сигнал ΠΎΡ‚ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΠΏΡ€ΠΎΠΈΠ·ΠΎΡˆΠ»ΠΎ. ВсС DOM-ΡƒΠ·Π»Ρ‹ ΠΏΠΎΠ΄Π°ΡŽΡ‚ Ρ‚Π°ΠΊΠΈΠ΅ сигналы (хотя события Π±Ρ‹Π²Π°ΡŽΡ‚ ΠΈ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² DOM).

Π’ΠΎΡ‚ список самых часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… DOM-событий, ΠΏΠΎΠΊΠ° просто для ознакомлСния:

Бобытия ΠΌΡ‹ΡˆΠΈ:

  • click – происходит, ΠΊΠΎΠ³Π΄Π° ΠΊΠ»ΠΈΠΊΠ½ΡƒΠ»ΠΈ Π½Π° элСмСнт Π»Π΅Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ (Π½Π° устройствах с сСнсорными экранами ΠΎΠ½ΠΎ происходит ΠΏΡ€ΠΈ касании).
  • contextmenu – происходит, ΠΊΠΎΠ³Π΄Π° ΠΊΠ»ΠΈΠΊΠ½ΡƒΠ»ΠΈ Π½Π° элСмСнт ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ.
  • mouseover / mouseout – ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ΡˆΡŒ наводится Π½Π° / ΠΏΠΎΠΊΠΈΠ΄Π°Π΅Ρ‚ элСмСнт.
  • mousedown / mouseup – ΠΊΠΎΠ³Π΄Π° Π½Π°ΠΆΠ°Π»ΠΈ / ΠΎΡ‚ΠΆΠ°Π»ΠΈ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΌΡ‹ΡˆΠΈ Π½Π° элСмСнтС.
  • mousemove – ΠΏΡ€ΠΈ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠΈ ΠΌΡ‹ΡˆΠΈ.

Бобытия Π½Π° элСмСнтах управлСния:

  • submit – ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΠ» Ρ„ΠΎΡ€ΠΌΡƒ .
  • focus – ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ фокусируСтся Π½Π° элСмСнтС, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ‚ Π½Π° .

ΠšΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Π½Ρ‹Π΅ события:

  • keydown ΠΈ keyup – ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ‚ / отпускаСт ΠΊΠ»Π°Π²ΠΈΡˆΡƒ.

Бобытия Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°:

  • DOMContentLoaded – ΠΊΠΎΠ³Π΄Π° HTML Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½ ΠΈ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Π°Π½, DOM Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ построСн ΠΈ доступСн.

CSS events:

  • transitionend – ΠΊΠΎΠ³Π΄Π° CSS-анимация Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½Π°.

БущСствуСт мноТСство Π΄Ρ€ΡƒΠ³ΠΈΡ… событий. ΠœΡ‹ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ Ρ€Π°Π·Π±Π΅Ρ€Ρ‘ΠΌ ΠΈΡ… Π² ΠΏΠΎΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… Π³Π»Π°Π²Π°Ρ….

ΠžΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ событий

Π‘ΠΎΠ±Ρ‹Ρ‚ΠΈΡŽ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Π·Π½Π°Ρ‡ΠΈΡ‚ΡŒ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ, которая сработаСт, ΠΊΠ°ΠΊ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ событиС ΠΏΡ€ΠΎΠΈΠ·ΠΎΡˆΠ»ΠΎ.

ИмСнно благодаря ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ JavaScript-ΠΊΠΎΠ΄ ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° дСйствия ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ.

Π•ΡΡ‚ΡŒ нСсколько способов Π½Π°Π·Π½Π°Ρ‡ΠΈΡ‚ΡŒ ΡΠΎΠ±Ρ‹Ρ‚ΠΈΡŽ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ. БСйчас ΠΌΡ‹ ΠΈΡ… рассмотрим, начиная с самого простого.

ИспользованиС Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° HTML

ΠžΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π½Π°Π·Π½Π°Ρ‡Π΅Π½ прямо Π² Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ΅, Π² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ называСтся on .

НапримСр, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°Π·Π½Π°Ρ‡ΠΈΡ‚ΡŒ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ события click Π½Π° элСмСнтС input , ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ onclick , Π²ΠΎΡ‚ Ρ‚Π°ΠΊ:

ΠŸΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ ΠΌΡ‹ΡˆΠΊΠΎΠΉ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅ выполнится ΠΊΠΎΠ΄, ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹ΠΉ Π² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π΅ onclick .

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, для содСрТимого Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° onclick ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ ΠΎΠ΄ΠΈΠ½Π°Ρ€Π½Ρ‹Π΅ ΠΊΠ°Π²Ρ‹Ρ‡ΠΊΠΈ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ сам Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ находится Π² Π΄Π²ΠΎΠΉΠ½Ρ‹Ρ…. Если ΠΌΡ‹ Π·Π°Π±ΡƒΠ΄Π΅ΠΌ ΠΎΠ± этом ΠΈ поставим Π΄Π²ΠΎΠΉΠ½Ρ‹Π΅ ΠΊΠ°Π²Ρ‹Ρ‡ΠΊΠΈ Π²Π½ΡƒΡ‚Ρ€ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°, Π²ΠΎΡ‚ Ρ‚Π°ΠΊ:Click!Β»)Β» , ΠΊΠΎΠ΄ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ.

Атрибут HTML-Ρ‚Π΅Π³Π° – Π½Π΅ самоС ΡƒΠ΄ΠΎΠ±Π½ΠΎΠ΅ мСсто для написания большого количСства ΠΊΠΎΠ΄Π°, поэтому Π»ΡƒΡ‡ΡˆΠ΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΡƒΡŽ JavaScript-Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ ΠΈ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ Π΅Ρ‘ Ρ‚Π°ΠΌ.

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΠΎ ΠΊΠ»ΠΈΠΊΡƒ запускаСт Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ countRabbits() :

Как ΠΌΡ‹ ΠΏΠΎΠΌΠ½ΠΈΠΌ, Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ HTML-Ρ‚Π΅Π³Π° Π½Π΅ чувствитСлСн ΠΊ рСгистру, поэтому ONCLICK Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ onClick ΠΈ onCLICK … Но, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ ΠΏΠΈΡˆΡƒΡ‚ Π² Π½ΠΈΠΆΠ½Π΅ΠΌ рСгистрС: onclick .

ИспользованиС свойства DOM-ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°

МоТно Π½Π°Π·Π½Π°Ρ‡Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ свойство DOM-элСмСнта on .

К ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, elem.onclick :

Если ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Π·Π°Π΄Π°Π½ Ρ‡Π΅Ρ€Π΅Π· Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚, Ρ‚ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚ HTML-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ, создаёт Π½ΠΎΠ²ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ ΠΈΠ· содСрТимого Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° ΠΈ записываСт Π² свойство.

Π­Ρ‚ΠΎΡ‚ способ, ΠΏΠΎ сути, Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π΅Π½ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌΡƒ.

ΠžΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ всСгда хранится Π² свойствС DOM-ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°, Π° Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ – лишь ΠΎΠ΄ΠΈΠ½ ΠΈΠ· способов Π΅Π³ΠΎ ΠΈΠ½ΠΈΡ†ΠΈΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ.

Π­Ρ‚ΠΈ Π΄Π²Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° ΠΊΠΎΠ΄Π° Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ:

Π’Π°ΠΊ ΠΊΠ°ΠΊ Ρƒ элСмСнта DOM ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½ΠΎ свойство с ΠΈΠΌΠ΅Π½Π΅ΠΌ onclick , Ρ‚ΠΎ Π½Π°Π·Π½Π°Ρ‡ΠΈΡ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° Ρ‚Π°ΠΊ нСльзя.

Π’ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π½ΠΈΠΆΠ΅ Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ‡Π΅Ρ€Π΅Π· JavaScript ΠΏΠ΅Ρ€Π΅Π·Π°ΠΏΠΈΡˆΠ΅Ρ‚ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ ΠΈΠ· Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°:

ΠšΡΡ‚Π°Ρ‚ΠΈ, ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Π·Π½Π°Ρ‡ΠΈΡ‚ΡŒ ΠΈ ΡƒΠΆΠ΅ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ:

Π£Π±Ρ€Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ elem.onclick = null .

Доступ ΠΊ элСмСнту Ρ‡Π΅Ρ€Π΅Π· this

Π’Π½ΡƒΡ‚Ρ€ΠΈ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° события this ссылаСтся Π½Π° Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΠΉ элСмСнт, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Π½Π° Ρ‚ΠΎΡ‚, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ, ΠΊΠ°ΠΊ говорят, «висит» (Ρ‚. Π΅. Π½Π°Π·Π½Π°Ρ‡Π΅Π½) ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ.

Π’ ΠΊΠΎΠ΄Π΅ Π½ΠΈΠΆΠ΅ button Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ своё содСрТимоС, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ this.innerHTML :

ЧастыС ошибки

Если Π²Ρ‹ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с событиями, ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΠΌΠΎΠΌΠ΅Π½Ρ‚Ρ‹.

Ѐункция Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ присвоСна ΠΊΠ°ΠΊ sayThanks , Π° Π½Π΅ sayThanks() .

Если Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ скобки, Ρ‚ΠΎ sayThanks() – это ΡƒΠΆΠ΅ Π²Ρ‹Π·ΠΎΠ² Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ (Ρ€Π°Π²Π½Ρ‹ΠΉ undefined , Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ функция Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚) Π±ΡƒΠ΄Π΅Ρ‚ присвоСн onclick . Π’Π°ΠΊ Ρ‡Ρ‚ΠΎ это Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ.

…А Π²ΠΎΡ‚ Π² Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ΅, Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ свойства, скобки Π½ΡƒΠΆΠ½Ρ‹:

Π­Ρ‚ΠΎ Ρ€Π°Π·Π»ΠΈΡ‡ΠΈΠ΅ просто ΠΎΠ±ΡŠΡΡΠ½ΠΈΡ‚ΡŒ. ΠŸΡ€ΠΈ создании ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ ΠΈΠ· Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°, ΠΎΠ½ автоматичСски создаёт Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ с Ρ‚Π΅Π»ΠΎΠΌ ΠΈΠ· значСния Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°: sayThanks() .

Π’Π°ΠΊ Ρ‡Ρ‚ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚ Ρ‚Π°ΠΊΠΎΠ΅ свойство:

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, Π° Π½Π΅ строки.

НазначСниС ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° строкой elem.onclick = Β«alert(1)Β» Ρ‚Π°ΠΊΠΆΠ΅ сработаСт. Π­Ρ‚ΠΎ сдСлано ΠΈΠ· сообраТСний совмСстимости, Π½ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ Π½Π΅ рСкомСндуСтся.

НС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ setAttribute для ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ².

Π’Π°ΠΊΠΎΠΉ Π²Ρ‹Π·ΠΎΠ² Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚:

РСгистр DOM-свойства ΠΈΠΌΠ΅Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅.

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ elem.onclick , Π° Π½Π΅ elem.ONCLICK , ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ DOM-свойства Ρ‡ΡƒΠ²ΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ ΠΊ рСгистру.

addEventListener

Π€ΡƒΠ½Π΄Π°ΠΌΠ΅Π½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ нСдостаток описанных Π²Ρ‹ΡˆΠ΅ способов назначСния ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° –- Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΏΠΎΠ²Π΅ΡΠΈΡ‚ΡŒ нСсколько ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² Π½Π° ΠΎΠ΄Π½ΠΎ событиС.

НапримСр, ΠΎΠ΄Π½Π° Ρ‡Π°ΡΡ‚ΡŒ ΠΊΠΎΠ΄Π° Ρ…ΠΎΡ‡Π΅Ρ‚ ΠΏΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ Π΄Π΅Π»Π°Ρ‚ΡŒ Π΅Ρ‘ подсвСчСнной, Π° другая – Π²Ρ‹Π΄Π°Π²Π°Ρ‚ΡŒ сообщСниС.

ΠœΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ Π½Π°Π·Π½Π°Ρ‡ΠΈΡ‚ΡŒ Π΄Π²Π° ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° для этого. Но Π½ΠΎΠ²ΠΎΠ΅ DOM-свойство ΠΏΠ΅Ρ€Π΅Π·Π°ΠΏΠΈΡˆΠ΅Ρ‚ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅Π΅:

Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ стандартов достаточно Π΄Π°Π²Π½ΠΎ это поняли ΠΈ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠΈΠ»ΠΈ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ способ назначСния ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ² addEventListener ΠΈ removeEventListener . Они свободны ΠΎΡ‚ ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ нСдостатка.

Бинтаксис добавлСния ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°:

Для удалСния ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° слСдуСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ removeEventListener :

Для удалСния Π½ΡƒΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚Ρƒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ-ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ которая Π±Ρ‹Π»Π° Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π°.

Π’ΠΎΡ‚ Ρ‚Π°ΠΊ Π½Π΅ сработаСт:

ΠžΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΠ΄Π°Π»Ρ‘Π½, Ρ‚.ΠΊ. Π² removeEventListener ΠΏΠ΅Ρ€Π΅Π΄Π°Π½Π° Π½Π΅ Ρ‚Π° ΠΆΠ΅ функция, Π° другая, с ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΌ ΠΊΠΎΠ΄ΠΎΠΌ, Π½ΠΎ это Π½Π΅ Π²Π°ΠΆΠ½ΠΎ.

Π’ΠΎΡ‚ Ρ‚Π°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ:

ΠžΠ±Ρ€Π°Ρ‚ΠΈΠΌ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ – Ссли Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Π½Π΅ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Π³Π΄Π΅-Π»ΠΈΠ±ΠΎ, ΠΌΡ‹ Π½Π΅ смоТСм Π΅Ρ‘ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ. НСт ΠΌΠ΅Ρ‚ΠΎΠ΄Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΈΠ· элСмСнта ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ событий, Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π½Ρ‹Π΅ Ρ‡Π΅Ρ€Π΅Π· addEventListener .

ΠœΠ΅Ρ‚ΠΎΠ΄ addEventListener позволяСт Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ нСсколько ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² Π½Π° ΠΎΠ΄Π½ΠΎ событиС ΠΎΠ΄Π½ΠΎΠ³ΠΎ элСмСнта, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

Как Π²ΠΈΠ΄Π½ΠΎ ΠΈΠ· ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° Π²Ρ‹ΡˆΠ΅, ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ Π½Π°Π·Π½Π°Ρ‡Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΈ Ρ‡Π΅Ρ€Π΅Π· DOM-свойство ΠΈ Ρ‡Π΅Ρ€Π΅Π· addEventListener . Однако, Π²ΠΎ ΠΈΠ·Π±Π΅ΠΆΠ°Π½ΠΈΠ΅ ΠΏΡƒΡ‚Π°Π½ΠΈΡ†Ρ‹, рСкомСндуСтся Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ способ.

Π‘ΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ события, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ нСльзя Π½Π°Π·Π½Π°Ρ‡ΠΈΡ‚ΡŒ Ρ‡Π΅Ρ€Π΅Π· DOM-свойство, Π½ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Ρ‡Π΅Ρ€Π΅Π· addEventListener .

НапримСр, Ρ‚Π°ΠΊΠΎΠ²ΠΎ событиС transitionend , Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ ΠΎΠΊΠΎΠ½Ρ‡Π°Π½ΠΈΠ΅ CSS-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ это, запустив ΠΊΠΎΠ΄ Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π½ΠΈΠΆΠ΅. Π’ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ², сработаСт лишь Π²Ρ‚ΠΎΡ€ΠΎΠΉ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ, Π½ΠΎ Π½Π΅ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ.

ΠžΠ±ΡŠΠ΅ΠΊΡ‚ события

Π§Ρ‚ΠΎΠ±Ρ‹ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ событиС, ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ Π΄Π΅Ρ‚Π°Π»ΠΈ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΎΠΈΠ·ΠΎΡˆΠ»ΠΎ. НС просто Β«ΠΊΠ»ΠΈΠΊΒ» ΠΈΠ»ΠΈ Β«Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ клавиши», Π° Ρ‚Π°ΠΊΠΆΠ΅ – ΠΊΠ°ΠΊΠΈΠ΅ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ указатСля ΠΌΡ‹ΡˆΠΈ, какая клавиша Π½Π°ΠΆΠ°Ρ‚Π° ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅.

Когда происходит событиС, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ создаёт ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ события, записываСт Π² Π½Π΅Π³ΠΎ Π΄Π΅Ρ‚Π°Π»ΠΈ ΠΈ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‘Ρ‚ Π΅Π³ΠΎ Π² качСствС Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚Π° Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ-ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΡƒ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π½ΠΈΠΆΠ΅ дСмонстрируСт ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½ΠΈΠ΅ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚ ΠΌΡ‹ΡˆΠΈ ΠΈΠ· ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° события:

НСкоторыС свойства ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° event :

event.type Π’ΠΈΠΏ события, Π² Π΄Π°Π½Π½ΠΎΠΌ случаС Β«clickΒ» . event.currentTarget Π­Π»Π΅ΠΌΠ΅Π½Ρ‚, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ сработал ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ – ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ Ρƒ this , Π½ΠΎ Ссли ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ являСтся Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠ΅ΠΉ-стрСлкой ΠΈΠ»ΠΈ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ bind привязан Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ Π² качСствС this , Ρ‚ΠΎ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ элСмСнт ΠΈΠ· event.currentTarget . event.clientX / event.clientY ΠšΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ курсора Π² ΠΌΠΎΠΌΠ΅Π½Ρ‚ ΠΊΠ»ΠΈΠΊΠ° ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΠΊΠ½Π°, для событий ΠΌΡ‹ΡˆΠΈ.

Π•ΡΡ‚ΡŒ Ρ‚Π°ΠΊΠΆΠ΅ ΠΈ ряд Π΄Ρ€ΡƒΠ³ΠΈΡ… свойств, Π² зависимости ΠΎΡ‚ Ρ‚ΠΈΠΏΠ° событий, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ Ρ€Π°Π·Π±Π΅Ρ€Ρ‘ΠΌ Π² Π΄Π°Π»ΡŒΠ½Π΅ΠΉΡˆΠΈΡ… Π³Π»Π°Π²Π°Ρ….

ΠŸΡ€ΠΈ Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΈ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° Π² HTML, Ρ‚ΠΎΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ event , Π²ΠΎΡ‚ Ρ‚Π°ΠΊ:

Π­Ρ‚ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ ΠΊΠΎΠ³Π΄Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΈΠ· Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° создаёт Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ-ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ, Ρ‚ΠΎ ΠΎΠ½Π° выглядит Ρ‚Π°ΠΊ: function(event) < alert(event.type) >. Π’ΠΎ Π΅ΡΡ‚ΡŒ, Π΅Ρ‘ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚ называСтся Β«eventΒ» , Π° Ρ‚Π΅Π»ΠΎ взято ΠΈΠ· Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°.

ΠžΠ±ΡŠΠ΅ΠΊΡ‚-ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ: handleEvent

ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π½Π°Π·Π½Π°Ρ‡ΠΈΡ‚ΡŒ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠΌ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ, Π½ΠΎ ΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ addEventListener . Π’ этом случаС, ΠΊΠΎΠ³Π΄Π° происходит событиС, вызываСтся ΠΌΠ΅Ρ‚ΠΎΠ΄ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° handleEvent .

Как Π²ΠΈΠ΄ΠΈΠΌ, Ссли addEventListener ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ Π² качСствС ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°, ΠΎΠ½ Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ object.handleEvent(event) , ΠΊΠΎΠ³Π΄Π° происходит событиС.

ΠœΡ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ класс для этого:

Π—Π΄Π΅ΡΡŒ ΠΎΠ΄ΠΈΠ½ ΠΈ Ρ‚ΠΎΡ‚ ΠΆΠ΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ ΠΎΠ±Π° события. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ явно Π½Π°Π·Π½Π°Ρ‡ΠΈΡ‚ΡŒ ΠΎΠ±Π° ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° Ρ‡Π΅Ρ€Π΅Π· addEventListener . Π’ΠΎΠ³Π΄Π° ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ menu Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ΡŒ события mousedown ΠΈ mouseup , Π½ΠΎ Π½Π΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ (Π½Π΅ Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π½Ρ‹Π΅) Ρ‚ΠΈΠΏΡ‹ событий.

ΠœΠ΅Ρ‚ΠΎΠ΄ handleEvent Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ всю Ρ€Π°Π±ΠΎΡ‚Ρƒ сам. Он ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π·Ρ‹Π²Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π·Π°Ρ‚ΠΎΡ‡Π΅Π½Ρ‹ ΠΏΠΎΠ΄ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹Ρ… Ρ‚ΠΈΠΏΠΎΠ² событий, Π²ΠΎΡ‚ Ρ‚Π°ΠΊ:

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° событий Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π° ΠΏΠΎ ΠΌΠ΅Ρ‚ΠΎΠ΄Π°ΠΌ, Ρ‡Ρ‚ΠΎ ΡƒΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ ΠΊΠΎΠ΄Π°.

Π˜Ρ‚ΠΎΠ³ΠΎ

Π•ΡΡ‚ΡŒ Ρ‚Ρ€ΠΈ способа назначСния ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² событий:

  1. Атрибут HTML: .
  2. DOM-свойство: elem.onclick = function .
  3. Π‘ΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹: elem.addEventListener(event, handler[, phase]) для добавлСния, removeEventListener для удалСния.

HTML-Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Ρ€Π΅Π΄ΠΊΠΎ ΠΏΠΎΡ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ JavaScript Π² HTML-Ρ‚Π΅Π³Π΅ выглядит Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ странно. К Ρ‚ΠΎΠΌΡƒ ΠΆΠ΅ ΠΌΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° Ρ‚Π°ΠΌ Π½Π΅ напишСшь.

DOM-свойства Π²ΠΏΠΎΠ»Π½Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, Π½ΠΎ ΠΌΡ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅ΠΌ Π½Π°Π·Π½Π°Ρ‡ΠΈΡ‚ΡŒ большС ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° Π½Π° ΠΎΠ΄ΠΈΠ½ Ρ‚ΠΈΠΏ события. Π’ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ… случаях с этим ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠ΅ΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΌΠΈΡ€ΠΈΡ‚ΡŒΡΡ.

ПослСдний способ самый Π³ΠΈΠ±ΠΊΠΈΠΉ, ΠΎΠ΄Π½Π°ΠΊΠΎ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΈΡΠ°Ρ‚ΡŒ большС всСго ΠΊΠΎΠ΄Π°. Π•ΡΡ‚ΡŒ нСсколько Ρ‚ΠΈΠΏΠΎΠ² событий, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡Π΅Ρ€Π΅Π· Π½Π΅Π³ΠΎ, ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ transtionend ΠΈ DOMContentLoaded . Π’Π°ΠΊΠΆΠ΅ addEventListener ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ Π² качСствС ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² событий. Π’ этом случаС вызываСтся ΠΌΠ΅Ρ‚ΠΎΠ΄ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° handleEvent .

НС Π²Π°ΠΆΠ½ΠΎ, ΠΊΠ°ΠΊ Π²Ρ‹ Π½Π°Π·Π½Π°Ρ‡Π°Π΅Ρ‚Π΅ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ – ΠΎΠ½ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ события ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚ΠΎΠΌ. Π­Ρ‚ΠΎΡ‚ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ содСрТит подробности ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΎΠΈΠ·ΠΎΡˆΠ»ΠΎ.

ΠœΡ‹ ΠΈΠ·ΡƒΡ‡ΠΈΠΌ большС ΠΎ событиях ΠΈ ΠΈΡ… Ρ‚ΠΈΠΏΠ°Ρ… Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… Π³Π»Π°Π²Π°Ρ….

НСкоторыС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ с ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ JavaScript event Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ с Π²Π²ΠΎΠ΄ΠΈΠΌΡ‹ΠΌΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ Π΄Π°Π½Π½Ρ‹ΠΌΠΈ. ΠœΠΎΠΌΠ΅Π½Ρ‚ возникновСния ΠΈ порядок Ρ‚Π°ΠΊΠΈΡ… взаимодСйствий Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ прСдсказаны Π·Π°Ρ€Π°Π½Π΅Π΅.

ΠžΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ событий

Π Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ клавиши ΠΌΠΎΠΆΠ½ΠΎ, постоянно считывая Π΅Π΅ состояниС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΉΠΌΠ°Ρ‚ΡŒ ΠΌΠΎΠΌΠ΅Π½Ρ‚ наТатия клавиши, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΎΠ½Π° снова Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΏΡƒΡ‰Π΅Π½Π°.

ИмСнно Ρ‚Π°ΠΊ обрабатывался Π²Π²ΠΎΠ΄ Π΄Π°Π½Π½Ρ‹Ρ… Π½Π° ΠΏΡ€ΠΈΠΌΠΈΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΌΠ°ΡˆΠΈΠ½Π°Ρ…. Π‘ΠΎΠ»Π΅Π΅ прогрСссивным являСтся ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ наТатия клавиши ΠΈ Π΅Π³ΠΎ постановка Π² ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ. Π—Π°Ρ‚Π΅ΠΌ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° ΠΌΠΎΠΆΠ΅Ρ‚ пСриодичСски ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡΡ‚ΡŒ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ Π½ΠΎΠ²Ρ‹Ρ… событий ΠΈ Ρ€Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΌ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚. Π’ Ρ‚Π°ΠΊΠΎΠΌ случаС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° Π΄ΠΎΠ»ΠΆΠ½Π° Π½Π΅ Π·Π°Π±Ρ‹Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ ΠΈ Π΄Π΅Π»Π°Ρ‚ΡŒ это часто.

Π’ ΠΏΠ΅Ρ€ΠΈΠΎΠ΄ ΠΎΡ‚ наТатия клавиши ΠΈ Π΄ΠΎ обнаруТСния ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΎΠΉ этого события, ΠΎΠ½Π° фактичСски Π½Π΅ ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ Π½Π° запросы. Π’Π°ΠΊΠΎΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ называСтся ΠΏΠΎΠ»Π»ΠΈΠ½Π³ΠΎΠΌ ( опросом ).

Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ программистов ΡΡ‚Π°Ρ€Π°ΡŽΡ‚ΡΡ ΠΈΠ·Π±Π΅Π³Π°Ρ‚ΡŒ Π΅Π³ΠΎ, Ссли это Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ.

Π‘Π°ΠΌΡ‹ΠΌ Π»ΡƒΡ‡ΡˆΠΈΠΌ способом считаСтся рСализация систСмы, которая Π΄Π°Π΅Ρ‚ ΠΊΠΎΠ΄Ρƒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Ρ€Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° события, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ происходят. Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ Ρ€Π΅Π°Π»ΠΈΠ·ΡƒΡŽΡ‚ Π΅Π΅, прСдоставляя Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² для ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹Ρ… JavaScript event :

Ѐункция addEventListener рСгистрируСтся Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π΅Π΅ Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚ вызываСтся всякий Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° происходит событиС, описанноС ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚ΠΎΠΌ.

Бобытия ΠΈ ΡƒΠ·Π»Ρ‹ DOM

ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ событий Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° рСгистрируСтся Π² контСкстС. ΠŸΡ€ΠΈ Π²Ρ‹Π·ΠΎΠ²Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ addEventListener ΠΎΠ½Π° вызываСтся ΠΊΠ°ΠΊ ΠΌΠ΅Ρ‚ΠΎΠ΄ для всСго ΠΎΠΊΠ½Π°, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ Π³Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ эквивалСнтСн ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρƒ window . ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт DOM ΠΈΠΌΠ΅Π΅Ρ‚ свой собствСнный ΠΌΠ΅Ρ‚ΠΎΠ΄ addEventListener , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт ΠΎΡ‚ΡΠ»Π΅ΠΆΠΈΠ²Π°Ρ‚ΡŒ события ΠΈΠΌΠ΅Π½Π½ΠΎ Π² этом элСмСнтС:

Π’ Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ ΠΊ ΡƒΠ·Π»Ρƒ ΠΊΠ½ΠΎΠΏΠΊΠΈ. JavaScript mouse events ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ Π² дСйствиС ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ, Π° ΠΊΠ»ΠΈΠΊ Π² ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΉ части Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° β€” Π½Π΅Ρ‚.

Установив для ΡƒΠ·Π»Π° Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ onclick , ΠΌΡ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠΌ Ρ‚ΠΎΡ‚ ΠΆΠ΅ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚. Но ΡƒΠ·Π΅Π» ΠΈΠΌΠ΅Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ onclick , поэтому ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡƒΠ·Π»Π° Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ. ΠœΠ΅Ρ‚ΠΎΠ΄ addEventListener позволяСт Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ любоС количСство ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ². Π’Π°ΠΊ ΠΌΡ‹ застрахованы ΠΎΡ‚ случайной Π·Π°ΠΌΠ΅Π½Ρ‹ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΡƒΠΆΠ΅ Π±Ρ‹Π» зарСгистрирован.

ΠœΠ΅Ρ‚ΠΎΠ΄ removeEventListener , вызываСтся с Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚Π°ΠΌΠΈ, Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹ΠΌΠΈ addEventListener . Он удаляСт ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ:

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°, ΠΌΡ‹ Π·Π°Π΄Π°Π΅ΠΌ для Π½Π΅Π΅ имя ( Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, once ). Π’Π°ΠΊ ΠΌΡ‹ ΠΏΠ΅Ρ€Π΅Π΄Π°Π΅ΠΌ Π΅Π΅ ΠΊΠ°ΠΊ Π² addEventListener , Ρ‚Π°ΠΊ ΠΈ Π² removeEventListener .

ΠžΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ событий

Π₯отя ΠΌΡ‹ Π½Π΅ ΡƒΠΏΠΎΠΌΠΈΠ½Π°Π»ΠΈ ΠΎΠ± этом Π² ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹Ρ… Π²Ρ‹ΡˆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ…, Π² Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² JavaScript event пСрСдаСтся Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚: ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ события. Он прСдоставляСт Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ событии. НапримСр, Ссли ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ Π·Π½Π°Ρ‚ΡŒ, какая клавиша ΠΌΡ‹ΡˆΠΈ Π±Ρ‹Π»Π° Π½Π°ΠΆΠ°Ρ‚Π°, Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° события which :

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ, хранящаяся Π² ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π΅, различаСтся зависимости ΠΎΡ‚ Ρ‚ΠΈΠΏΠ° события. Бвойство ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° type всСгда содСрТит строку, ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΡ†ΠΈΡ€ΡƒΡŽΡ‰ΡƒΡŽ событиС (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Β« click Β» ΠΈΠ»ΠΈ Β« mousedown Β«).

РаспространСниС

ΠžΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ событий ( Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, JavaScript touch events ), зарСгистрированныС для Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΡ… ΡƒΠ·Π»ΠΎΠ², Ρ‚Π°ΠΊΠΆΠ΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ события, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ происходят Π² Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΡ… элСмСнтах. Если Π±Ρ‹Π»Π° Π½Π°ΠΆΠ°Ρ‚Π° ΠΊΠ½ΠΎΠΏΠΊΠ°, находящаяся Π²Π½ΡƒΡ‚Ρ€ΠΈ Π°Π±Π·Π°Ρ†Π°, ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ событий Π°Π±Π·Π°Ρ†Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ событиС click .

Π‘ΠΎΠ±Ρ‹Ρ‚ΠΈΠ΅ распространяСтся ΠΎΡ‚ ΡƒΠ·Π»Π°, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΎΠ½ΠΎ ΠΏΡ€ΠΎΠΈΠ·ΠΎΡˆΠ»ΠΎ, Π² Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΡƒΠ·Π΅Π» ΠΈ Π² ΠΊΠΎΡ€Π΅Π½ΡŒ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°. ПослС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ всС ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ, зарСгистрированныС Π² ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΌ ΡƒΠ·Π»Π΅, вступили Π² дСйствиС ΠΏΠΎ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΠΈ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Ρ€Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° событиС ΠΏΠΎΠ»ΡƒΡ‡Π°ΡŽΡ‚ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ, зарСгистрированныС для всСго ΠΎΠΊΠ½Π°.

Π’ любой ΠΌΠΎΠΌΠ΅Π½Ρ‚ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ события ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ для ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° события ΠΌΠ΅Ρ‚ΠΎΠ΄ stopPropagation , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π΅Π΄ΠΎΡ‚Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ распространСниС события дальшС. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ, ΠΊΠΎΠ³Π΄Π° Ρƒ вас Π΅ΡΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠ° Π²Π½ΡƒΡ‚Ρ€ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ элСмСнта, ΠΈ Π²Ρ‹ Π½Π΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΠΎΠ²Π°Π»ΠΎΡΡŒ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅, Π·Π°Π΄Π°Π½Π½ΠΎΠ΅ для ΠΊΠ»ΠΈΠΊΠ° ΠΌΡ‹ΡˆΡŒΡŽ ΠΏΠΎ внСшним элСмСнтам.

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ рСгистрируСм ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ Β« MouseDown Β» ΠΊΠ°ΠΊ для ΠΊΠ½ΠΎΠΏΠΊΠΈ, Ρ‚Π°ΠΊ ΠΈ для Π°Π±Π·Π°Ρ†Π°. ΠŸΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ ΠΏΡ€Π°Π²ΠΎΠΉ клавишСй ( JavaScript mouse events ) ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΌΠ΅Ρ‚ΠΎΠ΄ stopPropagation , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΡ€Π΅Π΄ΠΎΡ‚Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ запуск ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° Π°Π±Π·Π°Ρ†Π°. ΠŸΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ Π΄Ρ€ΡƒΠ³ΠΎΠΉ клавишСй ΠΌΡ‹ΡˆΠΈ Π·Π°ΠΏΡƒΡΠΊΠ°ΡŽΡ‚ΡΡ ΠΎΠ±Π° ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°:

Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² событий ΠΈΠΌΠ΅ΡŽΡ‚ свойство target , ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π½Π° ΡƒΠ·Π΅Π», Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΎΠ½ΠΈ Π²ΠΎΠ·Π½ΠΈΠΊΠ»ΠΈ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ это свойство, Ρ‡Ρ‚ΠΎΠ±Ρ‹ случайно Π½Π΅ ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Ρ‚ΠΎ событиС, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ распространяСтся Π²Π²Π΅Ρ€Ρ… ΠΈΠ· ΡƒΠ·Π»Π°.

Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ JavaScript event target , Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°ΡΡˆΠΈΡ€ΠΈΡ‚ΡŒ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ события ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ Ρ‚ΠΈΠΏΠ°. НапримСр, Ссли Ρƒ вас Π΅ΡΡ‚ΡŒ ΡƒΠ·Π΅Π», содСрТащий Π΄Π»ΠΈΠ½Π½Ρ‹ΠΉ список ΠΊΠ½ΠΎΠΏΠΎΠΊ, Π±ΠΎΠ»Π΅Π΅ ΡƒΠ΄ΠΎΠ±Π½ΠΎ Π·Π°Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ ΠΊΠ»ΠΈΠΊΠ° для внСшнСго ΡƒΠ·Π»Π° ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свойство target , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΡΠ»Π΅ΠΆΠΈΠ²Π°Ρ‚ΡŒ, Π±Ρ‹Π»Π° Π»ΠΈ Π½Π°ΠΆΠ°Ρ‚Π° ΠΊΠ½ΠΎΠΏΠΊΠ°, Π° Π½Π΅ Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ экзСмпляры ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° для всСх ΠΊΠ½ΠΎΠΏΠΎΠΊ:

ДСйствия ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ

Π‘ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΠΌΠΈ событиями связаны дСйствия ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ. Если Π²Ρ‹ Π½Π°ΠΆΠΌΠ΅Ρ‚Π΅ Π½Π° ссылку, Ρ‚ΠΎ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅Ρ‚Π΅ ΠΊ Ρ†Π΅Π»Π΅Π²ΠΎΠΌΡƒ элСмСнту ссылки. Если Π½Π°ΠΆΠΌΠ΅Ρ‚Π΅ стрСлку Π²Π½ΠΈΠ·, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΈΡ‚ страницу Π²Π½ΠΈΠ·. Если Π²Ρ‹ ΠΊΠ»ΠΈΠΊΠ½ΠΈΡ‚Π΅ ΠΏΡ€Π°Π²ΠΎΠΉ клавишСй ΠΌΡ‹ΡˆΠΈ, откроСтся контСкстноС мСню.

Для Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π° Ρ‚ΠΈΠΏΠΎΠ² событий ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ JavaScript event Π²Ρ‹Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ Π΄ΠΎ выполнСния дСйствий ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ. Если Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΠ»ΠΎΡΡŒ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ для ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° события ΠΌΠ΅Ρ‚ΠΎΠ΄ preventDefault .

Π•Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… сочСтаний клавиш ΠΈΠ»ΠΈ контСкстных мСню. Или, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΎΠΆΠΈΠ΄Π°ΡŽΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ. НиТС приводится ссылка, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ нСльзя ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ:

Π‘Ρ‚Π°Ρ€Π°ΠΉΡ‚Π΅ΡΡŒ Π½Π΅ Π΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ, Ссли Ρƒ вас Π½Π΅Ρ‚ Π½Π° это вСских ΠΏΡ€ΠΈΡ‡ΠΈΠ½.

Π’ зависимости ΠΎΡ‚ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ события Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅Ρ…Π²Π°Ρ‡Π΅Π½Ρ‹. Π’ Google Chrome , Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, сочСтаниС клавиш ( event keycode JavaScript ) для закрытия Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ ( Ctrl-W ΠΈΠ»ΠΈ Command-W ) Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Π°Π½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ JavaScript .

Бобытия клавиш

Когда ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ‚ ΠΊΠ»Π°Π²ΠΈΡˆΡƒ Π½Π° ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Π΅, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ запускаСт событиС Β« keydown Β«. Когда ΠΎΠ½ отпускаСт ΠΊΠ»Π°Π²ΠΈΡˆΡƒ, срабатываСт событиС Β« keyup Β«:

Π’Π°ΠΊΠΆΠ΅ это событиС срабатываСт, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ‚ ΠΈ ΡƒΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ΠΊΠ»Π°Π²ΠΈΡˆΡƒ, ΠΈΠ»ΠΈ ΠΏΠΎΠΊΠ° клавиша удСрТиваСтся. НапримСр, Ссли трСбуСтся ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ пСрсонаТа Π² ΠΈΠ³Ρ€Π΅, Π½Π°ΠΆΠ°Π² Π½Π° ΠΊΠ»Π°Π²ΠΈΡˆΡƒ со стрСлкой, ΠΈ снова ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ Π΅Π΅, отпустив ΠΊΠ»Π°Π²ΠΈΡˆΡƒ, Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ остороТным, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Ρ‚ΡŒ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π·, ΠΏΠΎΠΊΠ° клавиша Π½Π°ΠΆΠ°Ρ‚Π°.

Π’ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ использовано свойство ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° event keycode JavaScript . Π‘ Π΅Π³ΠΎ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ опрСдСляСтся, какая ΠΈΠΌΠ΅Π½Π½ΠΎ клавиша Π±Ρ‹Π»Π° Π½Π°ΠΆΠ°Ρ‚Π° ΠΈΠ»ΠΈ ΠΎΡ‚ΠΏΡƒΡ‰Π΅Π½Π°. НонС всСгда ΠΎΡ‡Π΅Π²ΠΈΠ΄Π½ΠΎ, ΠΊΠ°ΠΊ привСсти числовой ΠΊΠΎΠ΄ клавиши ΠΊ фактичСской клавишС.

Для считывания Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ клавиш Π±ΡƒΠΊΠ² ΠΈ Ρ†ΠΈΡ„Ρ€ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΊΠΎΠ΄ символа Unicode . Он связан с Π±ΡƒΠΊΠ²ΠΎΠΉ ( Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ рСгистрС ) ΠΈΠ»ΠΈ Ρ†ΠΈΡ„Ρ€ΠΎΠΉ, ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π΅Π½Π½ΠΎΠΉ Π½Π° клавишС. ΠœΠ΅Ρ‚ΠΎΠ΄ charCodeAt для строк позволяСт ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ это Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅:

Π‘ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ клавишами связаны ΠΌΠ΅Π½Π΅Π΅ прСдсказуСмыС ΠΊΠΎΠ΄Ρ‹ клавиш. Π›ΡƒΡ‡ΡˆΠΈΠΉ способ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Π½ΡƒΠΆΠ½Ρ‹ΠΉ ΠΊΠΎΠ΄, это ΠΏΠΎΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π—Π°Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ события наТатия клавиши, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ фиксируСт ΠΊΠΎΠ΄Ρ‹ клавиш, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ½ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚, ΠΈ Π½Π°ΠΆΠ°Ρ‚ΡŒ Π½ΡƒΠΆΠ½ΡƒΡŽ ΠΊΠ»Π°Π²ΠΈΡˆΡƒ.

Π’Π°ΠΊΠΈΠ΅ клавиши, ΠΊΠ°ΠΊ Shift , Ctrl , Alt ΠΏΠΎΡ€ΠΎΠΆΠ΄Π°ΡŽΡ‚ события, ΠΊΠ°ΠΊ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Π΅ клавиши. Но ΠΏΡ€ΠΈ отслСТивании ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΠΉ клавиш Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ, Π½Π°ΠΆΠ°Ρ‚Ρ‹ Π»ΠΈ эти клавиши, ΠΏΠΎ свойствам событий ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ ΠΈ JavaScript mouse events : shiftKey , ctrlKey , altKey ΠΈ metaKey :

Бобытия Β« keydown Β» ΠΈ Β« keyup Β» ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ фактичСском Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ клавиш. Но Ρ‡Ρ‚ΠΎ, Ссли Π½Π°ΠΌ Π½ΡƒΠΆΠ΅Π½ сам Π²Π²ΠΎΠ΄ΠΈΠΌΡ‹ΠΉ тСкст? ΠŸΠΎΠ»ΡƒΡ‡Π°Ρ‚ΡŒ тСкст ΠΈΠ· ΠΊΠΎΠ΄ΠΎΠ² клавиш Π½Π΅ΡƒΠ΄ΠΎΠ±Π½ΠΎ. Для этого сущСствуСт событиС, Β« keypress Β«, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ срабатываСт сразу послС Β« keydown Β«. Оно повторяСтся вмСстС с Β« keydown Β«, ΠΏΠΎΠΊΠ° клавиша Π½Π°ΠΆΠ°Ρ‚Π°. Но Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для клавиш, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… производится Π²Π²ΠΎΠ΄ символов.

Бвойство charCode Π² ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π΅ события содСрТит ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€ΠΏΡ€Π΅Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½, ΠΊΠ°ΠΊ ΠΊΠΎΠ΄ символа Unicode . ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ String.fromCharCode , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚ΡŒ этот ΠΊΠΎΠ΄ Π² строку ΠΈΠ· ΠΎΠ΄Π½ΠΎΠ³ΠΎ символа.

Π£Π·Π΅Π» DOM , Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ происходит событиС зависит, ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ элСмСнта, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ находился Π² фокусС Π²Π²ΠΎΠ΄Π° ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ клавиши. ΠžΠ±Ρ‹Ρ‡Π½Ρ‹Π΅ ΡƒΠ·Π»Ρ‹ Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π² фокусС Π²Π²ΠΎΠ΄Π° ( Ссли Π½Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ для Π½ΠΈΡ… Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ tabindex ), Π½ΠΎ Ρ‚Π°ΠΊΠΈΠ΅ элСмСнты, ΠΊΠ°ΠΊ ссылки, ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ поля Ρ„ΠΎΡ€ΠΌΡ‹, ΠΌΠΎΠ³ΡƒΡ‚.

Если Π½ΠΈΠΊΠ°ΠΊΠΎΠΉ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΉ элСмСнт Π½Π΅ Π²Ρ‹Π΄Π΅Π»Π΅Π½ фокусом Π²Π²ΠΎΠ΄Π°, Ρ‚ΠΎ Π² качСствС Ρ†Π΅Π»Π΅Π²ΠΎΠ³ΠΎ ΡƒΠ·Π»Π° для событий клавиши ΠΈ JavaScript touch events выступаСт document.body .

Клики ΠΌΡ‹ΡˆΠΈ

НаТатиС клавиши ΠΌΡ‹ΡˆΠΈ Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ Π² дСйствиС ряд событий. Бобытия Β« mousedown Β» ΠΈ Β« mouseup Β» ΠΏΠΎΡ…ΠΎΠΆΠΈ Π½Π° Β« keydown Β» ΠΈ Β« keyup Β«. Они Π·Π°ΠΏΡƒΡΠΊΠ°ΡŽΡ‚ΡΡ, ΠΊΠΎΠ³Π΄Π° Π½Π°ΠΆΠ°Ρ‚Π° ΠΈ ΠΎΡ‚ΠΏΡƒΡ‰Π΅Π½Π° клавиша ΠΌΡ‹ΡˆΠΈ. Π”Π°Π½Π½Ρ‹Π΅ события Π²ΠΎΠ·Π½ΠΈΠΊΠ°ΡŽΡ‚ Π² ΡƒΠ·Π»Π°Ρ… DOM, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±Ρ‹Π» Π½Π°Π²Π΅Π΄Π΅Π½ ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ, ΠΊΠΎΠ³Π΄Π° Π²ΠΎΠ·Π½ΠΈΠΊΠ»ΠΎ событиС.

Для ΠΎΠ±Ρ‰Π΅Π³ΠΎ ΡƒΠ·Π»Π°, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ ΠΎΡ‚Π½ΠΎΡΠΈΠ»ΠΎΡΡŒ ΠΊΠ°ΠΊ Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅, Ρ‚Π°ΠΊ ΠΈ освобоТдСниС клавиши ΠΌΡ‹ΡˆΠΈ, послС события Β« mouseup Β» запускаСтся событиС Β« click Β«. НапримСр, Ссли Π½Π°ΠΆΠ°Ρ‚ΡŒ ΠΊΠ»Π°Π²ΠΈΡˆΡƒ ΠΌΡ‹ΡˆΠΈ Π½Π° ΠΎΠ΄Π½ΠΎΠΌ ΠΏΡƒΠ½ΠΊΡ‚Π΅, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ курсор Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΏΡƒΠ½ΠΊΡ‚ ΠΈ ΠΎΡ‚ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ, Ρ‚ΠΎ событиС Β« click Β» Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΠΈΡΡ…ΠΎΠ΄ΠΈΡ‚ΡŒ Π² элСмСнтС, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ содСрТит ΠΎΠ±Π° эти ΠΏΡƒΠ½ΠΊΡ‚Π°.

Если Π΄Π²Π° ΠΊΠ»ΠΈΠΊΠ° Π²ΠΎΠ·Π½ΠΈΠΊΠ»ΠΈ Π±Π»ΠΈΠ·ΠΊΠΎ Π΄Ρ€ΡƒΠ³ ΠΊ Π΄Ρ€ΡƒΠ³Ρƒ, Ρ‚Π°ΠΊΠΆΠ΅ запускаСтся событиС Β« dblclick Β» ( Π΄Π²ΠΎΠΉΠ½ΠΎΠΉ ΠΊΠ»ΠΈΠΊ ). Оно Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ послС Π²Ρ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΊΠ»ΠΈΠΊΠ°. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Ρ‚ΠΎΡ‡Π½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ мСстС, Π³Π΄Π΅ ΠΏΡ€ΠΎΠΈΠ·ΠΎΡˆΠ»ΠΎ событиС ΠΌΡ‹ΡˆΠΈ, Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойств pageX ΠΈ pageY , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ содСрТат ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ события ( Π² пиксСлях ) ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ ΡƒΠ³Π»Π° Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°.

НиТС ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π° рСализация ΠΏΡ€ΠΈΠΌΠΈΡ‚ΠΈΠ²Π½ΠΎΠΉ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ для рисования. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π· ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ ΠΌΡ‹ΡˆΠΈ Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅ ( ΠΏΠΎΠ΄ курсором ) добавляСтся Ρ‚ΠΎΡ‡ΠΊΠ°:

Бвойства clientX ΠΈ clientY ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹ pageX ΠΈ pageY , Π½ΠΎ ΠΎΠ½ΠΈ относятся ΠΊ Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ части Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°. Они ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ для сравнСния ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚ ΠΌΡ‹ΡˆΠΈ с ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Π°ΠΌΠΈ, Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅ΠΌΡ‹ΠΌΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠ΅ΠΉ getBoundingClientRect .

Π”Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ ΠΌΡ‹ΡˆΠΈ

ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° пСрСмСщаСтся курсов ΠΌΡ‹ΡˆΠΈ, срабатываСт событиС Β« mousemove Β» ΠΈΠ· Π½Π°Π±ΠΎΡ€Π° JavaScript mouse events . Оно ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ использовано для отслСТивания полоТСния ΠΌΡ‹ΡˆΠΈ. Π­Ρ‚ΠΎ примСняСтся ΠΏΡ€ΠΈ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ возмоТности пСрСтаскивания элСмСнтов ΠΌΡ‹ΡˆΡŒΡŽ.

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ Π½Π° экран панСль ΠΈ устанавливаСт ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ событий Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ пСрСтаскивании эта панСль становится ΡƒΠΆΠ΅ ΠΈΠ»ΠΈ ΡˆΠΈΡ€Π΅:

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Β« mousemove Β» зарСгистрирован для всСго ΠΎΠΊΠ½Π°. Π”Π°ΠΆΠ΅ Ссли Π²ΠΎ врСмя измСнСния Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² ΠΌΡ‹ΡˆΡŒ Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΡ‚ Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Ρ‹ ΠΏΠ°Π½Π΅Π»ΠΈ, ΠΌΡ‹ всС Ρ€Π°Π²Π½ΠΎ обновляСм ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈ ΠΏΡ€Π΅ΠΊΡ€Π°Ρ‰Π°Π΅ΠΌ JavaScript touch events , ΠΊΠΎΠ³Π΄Π° клавиша ΠΌΡ‹ΡˆΠΈ Π±Ρ‹Π»Π° ΠΎΡ‚ΠΏΡƒΡ‰Π΅Π½Π°.

ΠœΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΡ€Π΅ΠΊΡ€Π°Ρ‚ΠΈΡ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΏΠ°Π½Π΅Π»ΠΈ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ отпускаСт ΠΊΠ»Π°Π²ΠΈΡˆΡƒ ΠΌΡ‹ΡˆΠΈ. К соТалСнию, Π½Π΅ всС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°ΡŽΡ‚ для событий Β« mousemove Β» свойство which . БущСствуСт стандартноС свойство buttons , ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ прСдоставляСт Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ, Π½ΠΎ ΠΎΠ½ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ поддСрТиваСтся Π½Π΅ Π²ΠΎ всСх Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…. К ΡΡ‡Π°ΡΡ‚ΡŒΡŽ, всС основныС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΠΎΠ΄Π½ΠΎ: Π»ΠΈΠ±ΠΎ buttons , Π»ΠΈΠ±ΠΎ which . Ѐункция buttonPressed Π² ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π²Ρ‹ΡˆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ сначала пытаСтся ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свойство buttons , ΠΈ, Ссли ΠΎΠ½ΠΎ Π½Π΅ доступно, ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ ΠΊ which .

Когда курсор ΠΌΡ‹ΡˆΠΈ наводится ΠΈΠ»ΠΈ ΠΏΠΎΠΊΠΈΠ΄Π°Π΅Ρ‚ ΡƒΠ·Π΅Π», Π·Π°ΠΏΡƒΡΠΊΠ°ΡŽΡ‚ΡΡ события Β« mouseover Β» ΠΈΠ»ΠΈ Β« mouseout Β«. Они ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ для создания эффСктов ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора ΠΌΡ‹ΡˆΠΈ, Π²Ρ‹Π²ΠΎΠ΄Π° ΠΊΠ°ΠΊΠΎΠΉ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ подписи ΠΈΠ»ΠΈ измСнСния стиля элСмСнта.

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΎΠΉ эффСкт, нСдостаточно просто Π½Π°Ρ‡Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡ€ΠΈ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΠΎΠ²Π΅Π½ΠΈΠΈ события Β« mouseover Β» ΠΈ Π·Π°Π²Π΅Ρ€ΡˆΠΈΡ‚ΡŒ послС события Β« mouseout Β«. Когда ΠΌΡ‹ΡˆΡŒ пСрСмСщаСтся ΠΎΡ‚ ΡƒΠ·Π»Π° ΠΊ ΠΎΠ΄Π½ΠΎΠΌΡƒ ΠΈΠ· Π΅Π³ΠΎ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΡ… элСмСнтов, для Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΡƒΠ·Π»Π° происходит событиС Β« mouseout Β«. Π₯отя ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ Π½Π΅ ΠΏΠΎΠΊΠΈΠ½ΡƒΠ» Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ распространСния ΡƒΠ·Π»Π°.

Π§Ρ‚ΠΎ Π΅Ρ‰Π΅ Ρ…ΡƒΠΆΠ΅, эти JavaScript event Ρ€Π°ΡΠΏΡ€ΠΎΡΡ‚Ρ€Π°Π½ΡΡŽΡ‚ΡΡ Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ события. Когда ΠΌΡ‹ΡˆΡŒ ΠΏΠΎΠΊΠΈΠ΄Π°Π΅Ρ‚ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΡ… ΡƒΠ·Π»ΠΎΠ², для ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ зарСгистрирован ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ, Π²ΠΎΠ·Π½ΠΈΠΊΠ½Π΅Ρ‚ событиС Β« mouseout Β«.

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±ΠΎΠΉΡ‚ΠΈ эту ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свойство ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° события relatedTarget . Π’ случаС возникновСния события Β« mouseover Β» ΠΎΠ½ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Π½Π° ΠΊΠ°ΠΊΠΎΠΉ элСмСнт Π±Ρ‹Π» Π½Π°Π²Π΅Π΄Π΅Π½ курсор ΠΌΡ‹ΡˆΠΈ Π΄ΠΎ этого. А Π² случаС возникновСния Β« mouseout Β» β€” ΠΊ ΠΊΠ°ΠΊΠΎΠΌΡƒ элСмСнту пСрСмСщаСтся ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ. ΠœΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ эффСкт навСдСния ΠΌΡ‹ΡˆΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ, ΠΊΠΎΠ³Π΄Π° relatedTarget находится Π²Π½Π΅ нашСго Ρ†Π΅Π»Π΅Π²ΠΎΠ³ΠΎ ΡƒΠ·Π»Π°.

Π’ этом случаС ΠΌΡ‹ измСняСм ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ курсор ΠΌΡ‹ΡˆΠΈ Π±Ρ‹Π» Π½Π°Π²Π΅Π΄Π΅Π½ Π½Π° ΡƒΠ·Π΅Π» ΠΈΠ·-Π·Π° Π΅Π³ΠΎ ΠΏΡ€Π΅Π΄Π΅Π»ΠΎΠ² ( ΠΈΠ»ΠΈ Π½Π°ΠΎΠ±ΠΎΡ€ΠΎΡ‚ ):

Ѐункция isInside отслСТиваСт Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ связи Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΡƒΠ·Π»Π° ΠΈΠ»ΠΈ ΠΏΠΎΠΊΠ° Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ достигнута вСрхняя Ρ‡Π°ΡΡ‚ΡŒ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° ( ΠΊΠΎΠ³Π΄Π° node Ρ€Π°Π²Π΅Π½ Π½ΡƒΠ»ΡŽ ). Π›ΠΈΠ±ΠΎ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Π½Π°ΠΉΠ΄Π΅Π½ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ элСмСнт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π°ΠΌ Π½ΡƒΠΆΠ΅Π½.

Π­Ρ„Ρ„Π΅ΠΊΡ‚ навСдСния Π³ΠΎΡ€Π°Π·Π΄ΠΎ ΠΏΡ€ΠΎΡ‰Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ псСвдосСлСктора CSS :hover , ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅. Но ΠΊΠΎΠ³Π΄Π° эффСкт навСдСния ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅Ρ‚ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π±ΠΎΠ»Π΅Π΅ слоТноС, Ρ‡Π΅ΠΌ просто ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ стиля Ρ†Π΅Π»Π΅Π²ΠΎΠ³ΠΎ ΡƒΠ·Π»Π°, Ρ‚ΠΎΠ³Π΄Π° Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠ΅ΠΌ с использованиСм событий Β« mouseover Β» ΠΈ Β« mouseout Β» ( JavaScript mouse events ):

Бобытия ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ

ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° элСмСнт прокручиваСтся, Π² Π½Π΅ΠΌ срабатываСт JavaScript scroll event . Π•Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для отслСТивания Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π² Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ просматриваСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ; для ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, располоТСнной Π²Π½Π΅ ΠΎΠΊΠ½Π° просмотра.

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ Π²Ρ‹Π²ΠΎΠ΄ΠΈΠΌ ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€ прогрСсса Π² ΠΏΡ€Π°Π²ΠΎΠΌ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ ΡƒΠ³Π»Ρƒ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° ΠΈ обновляСм Π΅Π³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ ΠΏΠΎ частям заливался Π΄Ρ€ΡƒΠ³ΠΈΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ страницы Π²Π½ΠΈΠ·:

Установив для элСмСнта свойство position ΠΈΠ»ΠΈ fixed , ΠΌΡ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠΌ Ρ‚ΠΎΡ‚ ΠΆΠ΅ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚, Ρ‡Ρ‚ΠΎ ΠΈ ΠΏΡ€ΠΈ установкС position:absolute . Но Ρ‚Π°ΠΊ ΠΌΡ‹ Ρ‚Π°ΠΊΠΆΠ΅ Π±Π»ΠΎΠΊΠΈΡ€ΡƒΠ΅ΠΌ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΡƒ элСмСнта вмСстС с ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΉ Ρ‡Π°ΡΡ‚ΡŒΡŽ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°. Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€ прогрСсса Π±ΡƒΠ΄Π΅Ρ‚ статичСски Π·Π°ΠΊΡ€Π΅ΠΏΠ»Π΅Π½ Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ ΡƒΠ³Π»Ρƒ. Π’Π½ΡƒΡ‚Ρ€ΠΈ Π½Π΅Π³ΠΎ находится Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ элСмСнт, Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ измСняСтся Π² соотвСтствии с Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΠΌ прогрСссом.

Π’ качСствС Π΅Π΄ΠΈΠ½ΠΈΡ† измСрСния ΠΏΡ€ΠΈ установкС ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ % , Π° Π½Π΅ Ρ€Ρ… , Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ элСмСнта измСнялись ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π° прогрСсса.

Π“Π»ΠΎΠ±Π°Π»ΡŒΠ½Π°Ρ пСрСмСнная innerHeight содСрТит высоту ΠΎΠΊΠ½Π°, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π²Ρ‹Ρ‡Π΅ΡΡ‚ΡŒ ΠΈΠ· ΠΎΠ±Ρ‰Π΅ΠΉ доступной ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅ΠΌΠΎΠΉ высоты Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°. НСльзя ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Ρ‚ΡŒ ΠΎΠΊΠ½ΠΎ Π½ΠΈΠΆΠ΅ ΠΏΡ€ΠΈ достиТСнии Π½ΠΈΠΆΠ½Π΅ΠΉ части Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°. Π‘ innerHeight Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ innerWidth . Π Π°Π·Π΄Π΅Π»ΠΈΠ² pageYOffset ( Ρ‚Π΅ΠΊΡƒΡ‰ΡƒΡŽ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ ΠΎΠΊΠ½Π° ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ) Π½Π° максимально Π΄ΠΎΠΏΡƒΡΡ‚ΠΈΠΌΡƒΡŽ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ΠΈ ΡƒΠΌΠ½ΠΎΠΆΠΈΠ² Π½Π° 100, ΠΌΡ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚ для ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π° прогрСсса.

Π’Ρ‹Π·ΠΎΠ² preventDefault для JavaScript scroll event Π½Π΅ ΠΏΡ€Π΅Π΄ΠΎΡ‚Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΡƒ. ΠžΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ события вызываСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ послС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ происходит ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π½ΠΈΠ΅.

Бобытия фокуса Π²Π²ΠΎΠ΄Π°

Когда элСмСнт находится Π² фокусС Π²Π²ΠΎΠ΄Π°, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ запускаСт Π² Π½Π΅ΠΌ событиС Β« focus Β«. Когда фокус Π²Π²ΠΎΠ΄Π° снимаСтся, запускаСтся событиС Β« blur Β«.

Π­Ρ‚ΠΈ Π΄Π²Π° события Π½Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ распространСния. ΠžΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта Π½Π΅ увСдомляСтся, ΠΊΠΎΠ³Π΄Π° Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠΉ элСмСнт выдСляСтся фокусом Π²Π²ΠΎΠ΄Π°.

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ выводится подсказка для тСкстового поля, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π² Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ находится Π² фокусС Π²Π²ΠΎΠ΄Π°:

ΠžΠ±ΡŠΠ΅ΠΊΡ‚ ΠΎΠΊΠ½Π° ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ события Β« focus Β» ΠΈ Β« blur Β«, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ ΠΈΠ»ΠΈ ΠΏΠΎΠΊΠΈΠ΄Π°Π΅Ρ‚ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ, ΠΎΠΊΠ½ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ выводится Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚.

Π‘ΠΎΠ±Ρ‹Ρ‚ΠΈΠ΅ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ

Когда Π·Π°Π²Π΅Ρ€ΡˆΠ°Π΅Ρ‚ΡΡ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° страницы, для ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² Ρ‚Π΅Π»Π° Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° ΠΈ ΠΎΠΊΠ½Π° Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ JavaScript event Β«loadΒ» . Оно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для планирования ΠΈΠ½ΠΈΡ†ΠΈΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ дСйствий, для ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… трСбуСтся Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° всСго Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°. НС Π·Π°Π±Ρ‹Π²Π°ΠΉΡ‚Π΅, Ρ‡Ρ‚ΠΎ содСрТимоС

Иногда Π½ΡƒΠΆΠ½ΠΎ ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΌΡ‹ Π·Π°ΠΏΠ»Π°Π½ΠΈΡ€ΠΎΠ²Π°Π»ΠΈ. Π­Ρ‚ΠΎ дСлаСтся ΠΏΡƒΡ‚Π΅ΠΌ сохранСния значСния, Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅ΠΌΠΎΠ³ΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠ΅ΠΉ setTimeout , ΠΈ Π²Ρ‹Π·ΠΎΠ²Π° для Π½Π΅Π΅ clearTimeout :

Ѐункция cancelAnimationFrame Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ clearTimeout . Она вызываСтся Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ, Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅ΠΌΡ‹ΠΌ requestAnimationFrame , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΊΠ°Π΄Ρ€ ( Ссли ΠΎΠ½ Π΅Ρ‰Π΅ Π½Π΅ Π±Ρ‹Π» Π²Ρ‹Π·Π²Π°Π½ ).

ΠŸΠΎΡ…ΠΎΠΆΠΈΠΉ Π½Π°Π±ΠΎΡ€ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ, setInterval ΠΈ clearInterval ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для установки Ρ‚Π°ΠΉΠΌΠ΅Ρ€Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ дСйствиС ΠΊΠ°ΠΆΠ΄Ρ‹Π΅ X миллисСкунд:

Π”Ρ€ΠΎΠ±Π»Π΅Π½ΠΈΠ΅

НСкоторыС Ρ‚ΠΈΠΏΡ‹ событий ΠΌΠΎΠ³ΡƒΡ‚ Π·Π°ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒΡΡ ΠΌΠ½ΠΎΠ³ΠΎ Ρ€Π°Π· Π² Ρ‚Π΅Ρ‡Π΅Π½ΠΈΠ΅ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΎΠ³ΠΎ ΠΏΠ΅Ρ€ΠΈΠΎΠ΄Π° Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ ( Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Β« mousemove Β» ΠΈ javascript scroll event ). ΠŸΡ€ΠΈ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Ρ‚Π°ΠΊΠΈΡ… событий, Π½ΡƒΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ остороТным, Ρ‡Ρ‚ΠΎΠ±Ρ‹ это Π½Π΅ происходило ΠΎΡ‡Π΅Π½ΡŒ Π΄ΠΎΠ»Π³ΠΎ, ΠΈΠ½Π°Ρ‡Π΅ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ дСйствиС ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, Ρ‡Ρ‚ΠΎ взаимодСйствиС с Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠΌ станСт ΠΌΠ΅Π΄Π»Π΅Π½Π½Ρ‹ΠΌ ΠΈ скачкообразным.

Если Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ нСстандартноС Π² Ρ‚Π°ΠΊΠΎΠΌ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ΅, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ setTimeout , Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΡƒΠ²Π΅Ρ€Π΅Π½Π½Ρ‹ΠΌΠΈ, Ρ‡Ρ‚ΠΎ это Π½Π΅ растянСтся слишком Π½Π°Π΄ΠΎΠ»Π³ΠΎ. Π­Ρ‚ΠΎ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ Π΄Ρ€ΠΎΠ±Π»Π΅Π½ΠΈΠ΅ΠΌ события. БущСствуСт нСсколько ΠΎΡ‚Π»ΠΈΡ‡Π°ΡŽΡ‰ΠΈΡ…ΡΡ Π΄Ρ€ΡƒΠ³ ΠΎΡ‚ Π΄Ρ€ΡƒΠ³Π° ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΎΠ² ΠΊ Π΄Ρ€ΠΎΠ±Π»Π΅Π½ΠΈΡŽ.

Π’ ΠΏΠ΅Ρ€Π²ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΏΠ΅Ρ‡Π°Ρ‚Π°Π΅Ρ‚. Но Π½Π΅ Ρ…ΠΎΡ‚ΠΈΠΌ Π΄Π΅Π»Π°Ρ‚ΡŒ это послС ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ события наТатия клавиши. Когда ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ быстро ΠΏΠ΅Ρ‡Π°Ρ‚Π°Π΅Ρ‚, Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΎΠΆΠ΄Π°Ρ‚ΡŒ, ΠΏΠΎΠΊΠ° Π½Π΅ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ‚ ΠΏΠ°ΡƒΠ·Π°. ВмСсто Π½Π΅ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎΠ³ΠΎ выполнСния дСйствия Π² ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ΅ события ΠΌΡ‹ устанавливаСм Π·Π°Π΄Π΅Ρ€ΠΆΠΊΡƒ. ΠœΡ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΡ‡ΠΈΡ‰Π°Π΅ΠΌ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΡƒΡŽ Π·Π°Π΄Π΅Ρ€ΠΆΠΊΡƒ ( Ссли таковая имССтся ). Если события происходят Ρ‡Π΅Ρ€Π΅Π· ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΠ΅ ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»Ρ‹ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ ( мСньшС, Ρ‡Π΅ΠΌ установлСнная Π½Π°ΠΌΠΈ Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠ° ), Ρ‚ΠΎ Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠ° ΠΎΡ‚ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅Π³ΠΎ события отмСняСтся:

ΠŸΠ΅Ρ€Π΅Π΄Π°Ρ‡Π° Π½Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ значСния для clearTimeout ΠΈΠ»ΠΈ Π΅Π³ΠΎ Π²Ρ‹Π·ΠΎΠ² для Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΈ, которая ΡƒΠΆΠ΅ Π·Π°ΠΏΡƒΡ‰Π΅Π½Π°, Π½Π΅ даст Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π°. Нам большС Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ остороТными ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠΎΠ³Π΄Π° Π΅Π³ΠΎ Π²Ρ‹Π·Ρ‹Π²Π°Ρ‚ΡŒ, ΠΌΡ‹ просто Π΄Π΅Π»Π°Π΅ΠΌ это для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ события.

МоТно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ½ΠΎΠΉ сцСнарий, Ссли Π½ΡƒΠΆΠ½ΠΎ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΎΡ‚Π²Π΅Ρ‚Ρ‹ нСбольшим ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΊΠΎΠΌ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ. Но Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈ этом ΠΎΠ½ΠΈ Π·Π°ΠΏΡƒΡΠΊΠ°Π»ΠΈΡΡŒ Π²ΠΎ врСмя сСрии событий, Π° Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ послС Π½Π΅Π΅. НапримСр, ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚ΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Π² ΠΎΡ‚Π²Π΅Ρ‚ Π½Π° события Β« mousemove Β» ( JavaScript mouse events ) Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΠ΅ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ ΠΌΡ‹ΡˆΠΈ, Π½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡Π΅Ρ€Π΅Π· ΠΊΠ°ΠΆΠ΄Ρ‹Π΅ 250 миллисСкунд:

Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

ΠžΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ событий ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΠ²Π°Ρ‚ΡŒ ΠΈ Ρ€Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° события, Π½Π°Π΄ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ ΠΌΡ‹ Π½Π΅ ΠΈΠΌΠ΅Π΅ΠΌ прямого контроля. Для рСгистрации Ρ‚Π°ΠΊΠΎΠ³ΠΎ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΌΠ΅Ρ‚ΠΎΠ΄ addEventListener .

КаТдоС событиС относится ΠΊ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌΡƒ Ρ‚ΠΈΠΏΡƒ (Β« keydown Β«, Β« focus Β» ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅ ), ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΡ†ΠΈΡ€ΡƒΠ΅Ρ‚ Π΅Π³ΠΎ. Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ событий вызываСтся для ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ³ΠΎ элСмСнта DOM , Π° Π·Π°Ρ‚Π΅ΠΌ Ρ€Π°ΡΠΏΡ€ΠΎΡΡ‚Ρ€Π°Π½ΡΡŽΡ‚ΡΡ Π½Π° Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ ΡƒΠ·Π»Ρ‹ элСмСнта. Π­Ρ‚ΠΎ позволяСт ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ, связанным с этими элСмСнтами, ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ ΠΈΡ….

Когда вызываСтся ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ, Π΅ΠΌΡƒ пСрСдаСтся ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ события с Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠ΅ΠΉ ΠΎ дСйствии. Π­Ρ‚ΠΎΡ‚ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ Ρ‚Π°ΠΊΠΆΠ΅ содСрТит ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠ΅ ΠΎΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ дальнСйшСС распространСниС события ( stopPropagation ) ΠΈΠ»ΠΈ ΠΏΡ€Π΅Π΄ΠΎΡ‚Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ события Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ( preventDefault ).

НаТатиС клавиш ΠΏΠΎΡ€ΠΎΠΆΠ΄Π°Π΅Ρ‚ события Β« keydown Β«, Β« keypress Β» ΠΈ Β« keyup Β«. НаТатиС ΠΌΡ‹ΡˆΠΈ ΠΏΠΎΡ€ΠΎΠΆΠ΄Π°Π΅Ρ‚ события Β« mousedown Β«, Β« mouseup Β» ΠΈ Β« click Β«. ΠŸΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ ΠΌΡ‹ΡˆΠΈ β€” Β« mousemove Β«, Β« mouseenter Β» ΠΈ Β« mouseout Β«.

JavaScript scroll event ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ события Β« scroll Β«, Π° смСна фокуса β€” Β« focus Β» ΠΈ Β« blur Β«. ПослС Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΡ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° для ΠΎΠΊΠ½Π° Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ событиС Β« load Β«.

Волько ΠΎΠ΄Π½Π° Ρ‡Π°ΡΡ‚ΡŒ JavaScript ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ. ΠžΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ событий ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π·Π°ΠΏΠ»Π°Π½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ скрипты Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π΄ΠΎΠΆΠΈΠ΄Π°Ρ‚ΡŒΡΡ, ΠΊΠΎΠ³Π΄Π° закончится Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΡ… скриптов Π² ΠΎΡ‡Π΅Ρ€Π΅Π΄ΠΈ.

Данная публикация прСдставляСт собой ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄ ΡΡ‚Π°Ρ‚ΡŒΠΈ Β« Handling Events Β» , ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²Π»Π΅Π½Π½ΠΎΠΉ Π΄Ρ€ΡƒΠΆΠ½ΠΎΠΉ ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ.Ρ€Ρƒ

20 CSS Button Click Effects

ΠšΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π½Π½Ρ‹Ρ… бСсплатных HTML ΠΈ CSS эффСктов наТатия ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² ΠΊΠΎΠ΄Π° ΠΈΠ· codepen ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… рСсурсов. ОбновлСниС ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΠΈ Π·Π° Ρ„Π΅Π²Ρ€Π°Π»ΡŒ 2019 Π³ΠΎΠ΄Π°. 6 Π½ΠΎΠ²Ρ‹Ρ… ΠΏΡ€Π΅Π΄ΠΌΠ΅Ρ‚ΠΎΠ².

  1. Кнопки CSS
  2. Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ навСдСния Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ CSS
  3. 3D-ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS
  4. Кнопки ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ CSS
  5. Кнопки Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π° CSS
  6. ПлоскиС кнопки CSS
  7. Кнопки закрытия CSS
  8. Кнопки Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ CSS
  9. Кнопки воспроизвСдСния/ΠΏΠ°ΡƒΠ·Ρ‹ CSS
  10. Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS
О кодС

Вонкая кнопка

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: β€”

О кодС

Π­Ρ„Ρ„Π΅ΠΊΡ‚ ΠΏΡƒΠ»ΡŒΡΠ°Ρ†ΠΈΠΈ наТатия ΠΊΠ½ΠΎΠΏΠΊΠΈ

Чистый ΡΡ‚ΠΈΠ»ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS. ΠŸΡƒΠ»ΡŒΡΠΈΡ€ΡƒΡŽΡ‰ΠΈΠΉ эффСкт ΠΏΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π±Π΅Π· JavaScript.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: β€”

О кодС

Π­Ρ„Ρ„Π΅ΠΊΡ‚ наТатия ΠΊΠ½ΠΎΠΏΠΊΠΈ копирования

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: β€”

О кодС

Кнопка растягивания ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса ΠΈΠ· ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π°

Delightful Material UI ΠΊΠ½ΠΎΠΏΠΊΠ° растяТСния созданная ΠΏΡƒΡ‚Π΅ΠΌ ΠΎΠ±Ρ€Π΅Π·ΠΊΠΈ ΠΊΠΎΠ½Ρ‚ΡƒΡ€ΠΎΠ².

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Firefox, Opera, Safari

Зависимости: β€”

О кодС

Π‘ΠΊΠΎΡˆΠ΅Π½Π½Ρ‹Π΅ ΠΏΡƒΠ³ΠΎΠ²ΠΈΡ†Ρ‹ ΠΈΠ· SCSS

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

Зависимости: β€”

О кодС

ΠŸΡƒΠ»ΡŒΡΠΈΡ€ΡƒΡŽΡ‰Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° с нСбольшим количСством JavaScript

ΠŸΡ€ΠΎΡΡ‚Π°Ρ Ρ€Π΅Ρ‚Ρ€ΠΎ-ΠΊΠ½ΠΎΠΏΠΊΠ° с ΠΏΡƒΠ»ΡŒΡΠ°Ρ†ΠΈΠ΅ΠΉ с нСсколькими ΠΊΠΎΠ΄Π°ΠΌΠΈ Javascript для Π±ΠΎΠ»Π΅Π΅ ΠΏΠ»Π°Π²Π½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Firefox, Opera, Safari

Зависимости: β€”

О кодС

Кнопка с Π²ΠΎΠ»Π½ΠΎΠ²Ρ‹ΠΌ эффСктом Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для CSS

Кнопка-ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для CSS с динамичСским инвСрсным Ρ†Π²Π΅Ρ‚ΠΎΠΌ тСкста. Анимированный Ρ€Π°Π΄ΠΈΠ°Π»ΡŒΠ½ΠΎ-Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½Ρ‹ΠΉ достигаСтся ΠΏΡƒΡ‚Π΅ΠΌ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡ псСвдоэлСмСнта, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ находится ΠΏΠ΅Ρ€Π΅Π΄ тСкстом. Π¦Π²Π΅Ρ‚ динамичСского тСкста ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Ρ€Π΅ΠΆΠΈΠΌ смСшивания : Ρ€Π°Π·Π½ΠΈΡ†Π° .

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Firefox, Opera, Safari

Зависимости: β€”

О кодС

Миксин Sweet Little Button

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Firefox, Opera, Safari

Зависимости: β€”

О кодС

ЧСрная ΠΊΠ½ΠΎΠΏΠΊΠ° Π²Ρ…ΠΎΠ΄Π° Π² Π±ΠΈΠΎΠΌΠ΅Ρ‚Ρ€ΠΈΡŽ

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

Зависимости: β€”

О кодС

Кнопка Β«Π£Π΄Π°Π»ΠΈΡ‚ΡŒΒ» с микровзаимодСйствиями

Π˜Π³Ρ€Π° с микровзаимодСйствиями, Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ микровзаимодСйствий Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ удалСния /Π·Π½Π°Ρ‡ΠΎΠΊ ΠΊΠΎΡ€Π·ΠΈΠ½Ρ‹ .

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

Зависимости: β€”

О кодС

Кнопка Β«Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π² ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡŽΒ»

ΠŸΡ€ΠΎΡΡ‚Π°Ρ анимация, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ссли Π²Ρ‹ добавляСтС Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π² ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡŽ.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: β€”

О кодС

ΠŸΡƒΠ·Ρ‹Ρ€ΡŒΠΊΠΎΠ²Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° с Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ Ρ‰Π΅Π»Ρ‡ΠΊΠ°

Π‘Π΄Π΅Π»Π°Π» ΠΏΡƒΠ·Ρ‹Ρ€ΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Ρ€Π°Π΄ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ для background-image . Π­Ρ‚ΠΎ свойство Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊΡ€ΡƒΡ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π²Π΅Ρ‰ΠΈ Π±Π΅Π· добавлСния Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… div ΠΈΠ»ΠΈ псСвдоэлСмСнтов ( ::before ΠΈ ::after )

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

Зависимости: β€”

О кодС

Π Π΅Ρ‚Ρ€ΠΎ-ΠΊΠ½ΠΎΠΏΠΊΠΈ с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΌΠΈ свойствами

Π˜Π³Ρ€Π° с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΌΠΈ свойствами CSS.

О кодС

Анимация с Π²ΠΎΠ»Π½ΠΎΠ²Ρ‹ΠΌ эффСктом

Анимация с эффСктом ΠΏΡƒΠ»ΡŒΡΠ°Ρ†ΠΈΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS ΠΈ ES6.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Firefox, Opera, Safari

Зависимости: β€”

О кодС

НаТмитС ΠΊΠ½ΠΎΠΏΠΊΡƒ CSS

ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π² HTML ΠΈ CSS.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

Зависимости: β€”

О кодС

Анимация ΠΊΠ½ΠΎΠΏΠΎΠΊ со смСщСнными путями CSS

Кнопка с Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌΠΈ Π²Ρ‹Π»Π΅Ρ‚Π°ΡŽΡ‰ΠΈΠΌΠΈ Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ ΠΏΠΎ смСщСнному ΠΏΡƒΡ‚ΠΈ (Ρ€Π°Π½Π΅Π΅ извСстному ΠΊΠ°ΠΊ ΠΏΡƒΡ‚ΠΈ двиТСния CSS).

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: β€”

О кодС

Анимация страницы наТатия ΠΊΠ½ΠΎΠΏΠΊΠΈ

ΠŸΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ с barba.js для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° страницы.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

Зависимости: β€”

О кодС

Π­Ρ„Ρ„Π΅ΠΊΡ‚ наТатия ΠΊΠ½ΠΎΠΏΠΊΠΈ

Кнопка Π² HTML ΠΈ CSS с эффСктом ΠΊΠ»ΠΈΠΊΠ°.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

Зависимости: β€”

О кодС

Анимация Ρ€Π°Π΄ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π° CSS3

ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ CSS Анимация Ρ€Π°Π΄ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π° с использованиСм ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… ΠΊΠ°Π΄Ρ€ΠΎΠ².

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

Зависимости: β€”

О кодС

Кнопка Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π° CSS

ΠŸΡ€ΠΎΡΡ‚Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с CSS с ΠΏΠ»Π°Π²Π½ΠΎ ΠΌΠ΅Π½ΡΡŽΡ‰ΠΈΠΌΡΡ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠΌ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора: выглядит красиво, ΠΎΡ‡Π΅Π½ΡŒ просто, Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π²ΠΎ всСх соврСмСнных Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ….

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

Зависимости: β€”

18+ Π»ΡƒΡ‡ΡˆΠΈΡ… Ρ‚Π΅ΠΌ Shopify CSS Button Effects Themes Free & Premium 2022 β€” AVADA Commerce Blog

18+ Π»ΡƒΡ‡ΡˆΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² CSS Button Click Effects ΠΈΠ· сотСн ΠΎΠ±Π·ΠΎΡ€ΠΎΠ² CSS Button Click Effects Π½Π° Ρ€Ρ‹Π½ΠΊΠ΅ (Codepen.io), основанных Π½Π° Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³Π΅ Avada Commerce, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΎΡ†Π΅Π½ΠΊΠΈ Avada Commerce, Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ΠΎΠ²Ρ‹Π΅ ΠΎΠ±Π·ΠΎΡ€Ρ‹, Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹ поиска, ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚Π΅Π»ΠΈ. ΠŸΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹Π΅ Π½ΠΈΠΆΠ΅ ΠΎΠ±Π·ΠΎΡ€Ρ‹ Π±Ρ‹Π»ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π½Ρ‹ экспСртами Avada Commerce Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ. Если вашСго CSS Button Click Effects Π½Π΅Ρ‚ Π² спискС, Π½Π΅ ΡΡ‚Π΅ΡΠ½ΡΠΉΡ‚Π΅ΡΡŒ ΠΎΠ±Ρ€Π°Ρ‰Π°Ρ‚ΡŒΡΡ ΠΊ Π½Π°ΠΌ. Π›ΡƒΡ‡ΡˆΠ°Ρ коллСкция css с эффСктами наТатия ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS оцСниваСтся ΠΈ приводится 7 октября 2022 Π³ΠΎΠ΄Π°. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΉΡ‚ΠΈ бСсплатныС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ эффСктов наТатия ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS ΠΈΠ»ΠΈ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Ρ‹ эффСктам наТатия ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS.

Кнопка CodepenChallenge Ripple с VueJS ΠΎΡ‚

Кнопка #CodepenChallenge Ripple с VueJS β€” это ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰Π°Ρ анимация ΠΏΡƒΠ»ΡŒΡΠ°Ρ†ΠΈΠΈ CSS, созданная Π°Π²Ρ‚ΠΎΡ€ΠΎΠΌ Π’Π°ΠΊΠ°Π½Π΅ Π˜Ρ‡ΠΈΠ½ΠΎΡΠ΅. Π­Ρ‚ΠΎ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ инструмСнт для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π²Π»Π°Π΄Π΅Π»ΡŒΡ†Π° ΠΎΠ½Π»Π°ΠΉΠ½-бизнСса, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ…ΠΎΡ‡Π΅Ρ‚ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ свою ΠΊΠ½ΠΎΠΏΠΊΡƒ Π²ΠΎΠ»Π½ΠΎΠ²ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ. Если Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ, ΠΊΠ½ΠΎΠΏΠΊΠ° #CodepenChallenge Ripple с VueJS ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Π²Π°ΠΌ простой Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ ΠΌΠΎΡ‰Π½Ρ‹ΠΉ эффСкт ΠΏΡƒΠ»ΡŒΡΠ°Ρ†ΠΈΠΈ. Как Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Ρ‹ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ‚Π΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΏΡƒΠ»ΡŒΡΠ°Ρ†ΠΈΠΈ, анимация Ρ€ΠΎΠ·ΠΎΠ²ΠΎΠΉ ΠΏΡƒΠ»ΡŒΡΠ°Ρ†ΠΈΠΈ ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ Ρ‡Π΅Ρ€Π΅Π· ΠΊΠ½ΠΎΠΏΠΊΡƒ, начиная с Ρ‚ΠΎΠ³ΠΎ мСста, Π³Π΄Π΅ Π²Ρ‹ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ‚Π΅. Π ΠΎΠ·ΠΎΠ²Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°ΡŽΡ‰ΠΈΠΉ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ эффСкт, нСсомнСнно, ΡΠ΄Π΅Π»Π°ΡŽΡ‚ ваш сайт Π±ΠΎΠ»Π΅Π΅ ΡƒΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΈ интСрСсным. НС тСряйтС большС Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ ΠΈ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ Ripple #CodepenChallenge с VueJS для своих ΠΊΠ½ΠΎΠΏΠΎΠΊ!

Π”Π΅ΠΌΠΎ

Π½Π°ΠΆΠΌΠΈΡ‚Π΅ css ΠΏΠΎ

Click css β€” это эффСкт Π½Π° чистом CSS, созданный Π°Π²Ρ‚ΠΎΡ€ΠΎΠΌ Эвансом Π² качСствС инструмСнта для всСх Π²Π»Π°Π΄Π΅Π»ΡŒΡ†Π΅Π² ΠΎΠ½Π»Π°ΠΉΠ½-бизнСса, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΡ‰ΡƒΡ‚ ΠΏΡ€ΠΎΡΡ‚ΡƒΡŽ ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ для своСго Π²Π΅Π±-сайта. Если Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ, Click css ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Π²Π°ΠΌ ΠΏΡ€ΠΎΡΡ‚ΡƒΡŽ Π±Π΅Π»ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ с ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ. Если Π²Ρ‹ Π½Π°Π²Π΅Π΄Π΅Ρ‚Π΅ курсор Π½Π° эту ΠΊΠ½ΠΎΠΏΠΊΡƒ, ΠΎΠ½Π° Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ всплывСт, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²Π΅Π΄ΠΎΠΌΠΈΡ‚ΡŒ вас ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΆΠ°Ρ‚ΡŒ Π½Π° Π½Π΅Π΅. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ‚Π΅, ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΏΡ€Ρ‹Π³Π°Π΅Ρ‚ ΠΎΠ΄ΠΈΠ½ Ρ€Π°Π·, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π²Π°ΠΌ ΠΏΠΎΠ½ΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π΅Π΅ Π²Ρ‹Π±Ρ€Π°Π»ΠΈ. ВсС Π΅Ρ‰Π΅ интСрСсно, ΠΊΠ°ΠΊ это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚! Π”Π°Π²Π°ΠΉΡ‚Π΅ установим Click css ΠΈ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠ΅ΠΌ сами!

Π”Π΅ΠΌΠΎ

ЧСрная биомСтричСская ΠΊΠ½ΠΎΠΏΠΊΠ° by

Black Biometirics Button β€” это ΠΌΠΎΡ‰Π½Ρ‹ΠΉ CSS-эффСкт, созданный Π°Π²Ρ‚ΠΎΡ€ΠΎΠΌ МикаэлСм АйналСмом ΠΊΠ°ΠΊ инструмСнт для всСх Π²Π»Π°Π΄Π΅Π»ΡŒΡ†Π΅Π² ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΌΠ°Π³Π°Π·ΠΈΠ½ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΡ‰ΡƒΡ‚ ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΡƒΡŽ Π±ΠΈΠΎΠΌΠ΅Ρ‚Ρ€ΠΈΡ‡Π΅ΡΠΊΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ для своСго сайта. Если Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ, Black Biometirics Button ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΡƒΡŽ Ρ‡Π΅Ρ€Π½ΡƒΡŽ Π±ΠΈΠΎΠΌΠ΅Ρ‚Ρ€ΠΈΡ‡Π΅ΡΠΊΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ваш сайт Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ. Когда Π²Ρ‹ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«Π’ΠΎΠΉΡ‚ΠΈΒ», ΠΎΡ‚ΠΏΠ΅Ρ‡Π°Ρ‚ΠΎΠΊ ΠΏΠ»Π°Π²Π½ΠΎ появляСтся Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ‡Π΅Ρ€Π½ΠΎΠ³ΠΎ ΠΊΡ€ΡƒΠ³Π°. Π—Π°Ρ‚Π΅ΠΌ ΠΎΡ‚ΠΏΠ΅Ρ‡Π°Ρ‚ΠΎΠΊ заливаСтся Π±Π΅Π»Ρ‹ΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ ΠΈ послС этого появляСтся Π³Π°Π»ΠΎΡ‡ΠΊΠ°. НС упуститС этот шанс ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ свой сайт Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Black Biometirics Button!

Demo

эффСкт наТатия ΠΊΠ½ΠΎΠΏΠΊΠΈ Chrome ΠΎΡ‚

Π­Ρ„Ρ„Π΅ΠΊΡ‚ наТатия ΠΊΠ½ΠΎΠΏΠΊΠΈ Chrome β€” это ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΠΉ CSS-эффСкт, созданный Π°Π²Ρ‚ΠΎΡ€ΠΎΠΌ cjk ΠΊΠ°ΠΊ инструмСнт для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π²Π»Π°Π΄Π΅Π»ΡŒΡ†Π° ΠΎΠ½Π»Π°ΠΉΠ½-бизнСса, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ…ΠΎΡ‡Π΅Ρ‚ ΡƒΠΊΡ€Π°ΡΠΈΡ‚ΡŒ свой Π²Π΅Π±-сайт с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ простой ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ. Если Π²Π΄Π°Π²Π°Ρ‚ΡŒΡΡ Π² подробности, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ эффСкт наТатия ΠΊΠ½ΠΎΠΏΠΊΠΈ Chrome, Π²Π°ΠΌ прСдоставляСтся простая ΠΊΠ½ΠΎΠΏΠΊΠ° с ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ эффСктом. Кнопка прСдставляСт собой ΠΎΡ€Π°Π½ΠΆΠ΅Π²Ρ‹ΠΉ ΠΊΡ€ΡƒΠΆΠΎΠΊ с тСкстом Β«ICOΒ». ΠŸΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΊΡ€ΡƒΠ³ быстро прСвращаСтся Π² Π½Π΅Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ ΠΏΡ€ΡΠΌΡƒΡŽ ΠΎΡ€Π°Π½ΠΆΠ΅Π²ΡƒΡŽ линию. Кнопка вСрнСтся ΠΊ Π½Π°Ρ‡Π°Π»Ρƒ, Ссли Π²Ρ‹ снова Π½Π°ΠΆΠΌΠ΅Ρ‚Π΅ Π½Π° эту ΠΏΡ€ΡΠΌΡƒΡŽ линию. Π”ΠΎ сих ΠΏΠΎΡ€ интСрСсно, ΠΊΠ°ΠΊ ΠΎΠ½ Π² дСйствии! Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠΌ эффСкт наТатия ΠΊΠ½ΠΎΠΏΠΊΠΈ Chrome ΠΈ ΡƒΠ²ΠΈΠ΄ΠΈΠΌ Π΅Π³ΠΎ своими Π³Π»Π°Π·Π°ΠΌΠΈ!

Demo

Cool Button Click Effect by

Cool Button Click Effect β€” это ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΠΉ CSS-эффСкт, созданный Π°Π²Ρ‚ΠΎΡ€ΠΎΠΌ Boundless ΠΊΠ°ΠΊ инструмСнт для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π²Π»Π°Π΄Π΅Π»ΡŒΡ†Π° ΠΎΠ½Π»Π°ΠΉΠ½-бизнСса, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ…ΠΎΡ‡Π΅Ρ‚ ΡƒΠΊΡ€Π°ΡΠΈΡ‚ΡŒ свой Π²Π΅Π±-сайт с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ красивой ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ. Π§Ρ‚ΠΎΠ±Ρ‹ Π²Π΄Π°Π²Π°Ρ‚ΡŒΡΡ Π² подробности, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Cool Button Click Effect Π²Π°ΠΌ прСдоставляСтся ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ произвСсти Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ΠΈΠ΅ Π½Π° Π²Π°ΡˆΠΈΡ… посСтитСлСй. ΠŸΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° тСкст Β«Click MeΒ» тСкст Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠ½ΡƒΡ‚ Π±Π΅Π»ΠΎΠΉ прямой Π»ΠΈΠ½ΠΈΠ΅ΠΉ. Когда Π²Ρ‹ Ρ‰Π΅Π»ΠΊΠ½Π΅Ρ‚Π΅ ΠΏΠΎ этому тСксту, Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ синюю Ρ€ΡΠ±ΡŒ Π½Π°Π΄ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ, которая выдСляСт ΠΊΠ½ΠΎΠΏΠΊΡƒ. Π”ΠΎ сих ΠΏΠΎΡ€ интСрСсно, ΠΊΠ°ΠΊ ΠΎΠ½ Π² дСйствии! Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠΌ классный эффСкт наТатия ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ ΡƒΠ²ΠΈΠ΄ΠΈΠΌ Π΅Π³ΠΎ своими Π³Π»Π°Π·Π°ΠΌΠΈ!

ДСмонстрация

ΠŸΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ ΠΏΡƒΠ»ΡŒΡΠ°Ρ†ΠΈΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS с динамичСским Ρ†Π²Π΅Ρ‚ΠΎΠΌ тСкста ΠΏΠΎ

ΠŸΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΡŒ ΠΏΡƒΠ»ΡŒΡΠ°Ρ†ΠΈΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS с динамичСским Ρ†Π²Π΅Ρ‚ΠΎΠΌ тСкста β€” это мощная анимация ΠΏΡƒΠ»ΡŒΡΠ°Ρ†ΠΈΠΈ CSS, разработанная Π°Π²Ρ‚ΠΎΡ€ΠΎΠΌ Π›ΠΈΠ°ΠΌΠΎΠΌ Π² качСствС инструмСнта для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π²Π»Π°Π΄Π΅Π»ΡŒΡ†Π° ΠΎΠ½Π»Π°ΠΉΠ½-бизнСса, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΡ‰Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΡŒ ΠΏΡƒΠ»ΡŒΡΠ°Ρ†ΠΈΠΈ с динамичСским Ρ†Π²Π΅Ρ‚ΠΎΠΌ тСкста. Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ³Π»ΡƒΠ±ΠΈΡ‚ΡŒΡΡ Π² Π΄Π΅Ρ‚Π°Π»ΠΈ, ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΡŒ ΠΏΡƒΠ»ΡŒΡΠ°Ρ†ΠΈΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS с динамичСским Ρ†Π²Π΅Ρ‚ΠΎΠΌ тСкста прСдоставляСт Π²Π°ΠΌ ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ, которая ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Π΅Ρ‚ всСобщСС Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅. Для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ магию Π² дСйствии, Π½ΡƒΠΆΠ½ΠΎ Π½Π°ΠΆΠ°Ρ‚ΡŒ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ, ΠΈ Ρ‚ΠΎΠ³Π΄Π° появится эффСкт Ρ‡Π΅Ρ€Π½ΠΎΠΉ ряби, ΠΏΡ€Π΅Π²Ρ€Π°Ρ‰Π°ΡŽΡ‰ΠΈΠΉ всю ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΈΠ· Π±Π΅Π»ΠΎΠΉ Π² Ρ‡Π΅Ρ€Π½ΡƒΡŽ. Если Π²Ρ‹ снова Π½Π°ΠΆΠΌΠ΅Ρ‚Π΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ, ΠΎΠ½Π° снова станСт Π±Π΅Π»ΠΎΠΉ вмСстС с эффСктом ряби. Π”Π°Π²Π°ΠΉΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΡŒ ΠΏΡƒΠ»ΡŒΡΠ°Ρ†ΠΈΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS с динамичСским Ρ†Π²Π΅Ρ‚ΠΎΠΌ тСкста, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ваш сайт Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ!

ДСмонстрация

Π‘ΠΊΠΎΡˆΠ΅Π½Π½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ SCSS Π½Π°

Π‘ΠΊΠΎΡˆΠ΅Π½Π½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ SCSS β€” это ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΠΉ эффСкт CSS, созданный Π°Π²Ρ‚ΠΎΡ€ΠΎΠΌ Брэндоном МакКоннСллом ΠΊΠ°ΠΊ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ для всСх Π²Π»Π°Π΄Π΅Π»ΡŒΡ†Π΅Π² ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΌΠ°Π³Π°Π·ΠΈΠ½ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΡ‰ΡƒΡ‚ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ для своСго Π²Π΅Π±-сайта. Если Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ SCSS Beveled Buttons Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ ΡƒΠΊΡ€Π°ΡΠΈΡ‚ΡŒ свой Π²Π΅Π±-сайт ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰Π΅ΠΉ красной ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ вмСстС с ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ. Когда Π²Ρ‹ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ‚Π΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΈ ΡƒΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚Π΅ Π΅Π΅, ваша ΠΊΠ½ΠΎΠΏΠΊΠ° становится скошСнной, Π° это ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π΅Π΅ Ρ„ΠΎΡ€ΠΌΠ° измСнится ΡƒΠ΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ. Π­Ρ‚ΠΎ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡Π΅Ρ‚ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π²Π°ΡˆΠΈΡ… посСтитСлСй ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ΅. НС ΡΡ‚Π΅ΡΠ½ΡΠΉΡ‚Π΅ΡΡŒ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ свой сайт Π±ΠΎΠ»Π΅Π΅ ΠΆΠΈΠ²Ρ‹ΠΌ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΡΠΊΠΎΡˆΠ΅Π½Π½Ρ‹Ρ… ΠΊΠ½ΠΎΠΏΠΎΠΊ SCSS!

ДСмонстрация

милая малСнькая ΠΊΠ½ΠΎΠΏΠΎΡ‡ΠΊΠ° миксин ΠΎΡ‚

Sweet little button mixin β€” это ΠΌΠΎΡ‰Π½Ρ‹ΠΉ CSS-эффСкт, созданный Π°Π²Ρ‚ΠΎΡ€ΠΎΠΌ ΠšΡ€ΠΈΡΡ‚ΠΈΠ½ΠΎΠΉ Π”ΠΈΠΌΠ΅Ρ€ ΠΊΠ°ΠΊ инструмСнт для всСх Π²Π»Π°Π΄Π΅Π»ΡŒΡ†Π΅Π² ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΌΠ°Π³Π°Π·ΠΈΠ½ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ хотят ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π° своСм Π²Π΅Π±-сайтС. Если ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅, миксин Sweet little button прСдставляСт собой Π½Π°Π±ΠΎΡ€ ΠΈΠ· Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅Ρ… ΠΊΠ½ΠΎΠΏΠΎΠΊ Ρ€Π°Π·Π½Ρ‹Ρ… Ρ†Π²Π΅Ρ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ваш сайт Π±ΠΎΠ»Π΅Π΅ красочным. Когда Π²Ρ‹ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚Π΅ курсор Π½Π° эти ΠΊΠ½ΠΎΠΏΠΊΠΈ, Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° мСняСтся Π½Π° Ρ‚ΠΎΡ‚ ΠΆΠ΅ Ρ†Π²Π΅Ρ‚ Ρ€Π°ΠΌΠΊΠΈ ΠΈ ΡˆΡ€ΠΈΡ„Ρ‚Π°, Π° Π·Π°Ρ‚Π΅ΠΌ возвращаСтся ΠΊ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠΌΡƒ. Если Π²Ρ‹ Π½Π°ΠΆΠΌΠ΅Ρ‚Π΅ Π½Π° ΠΎΠ΄Π½Ρƒ ΠΊΠ½ΠΎΠΏΠΊΡƒ, Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° измСнится ΠΈ останСтся, ΠΏΠΎΠΊΠ° Π²Ρ‹ Π½Π΅ Π½Π°ΠΆΠΌΠ΅Ρ‚Π΅ Π½Π° Π½Π΅Π΅ снова. НС ΡΡ‚Π΅ΡΠ½ΡΠΉΡ‚Π΅ΡΡŒ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ свой сайт Π±ΠΎΠ»Π΅Π΅ ΠΆΠΈΠ²Ρ‹ΠΌ ΠΈ красочным с миксином Sweet little button!

Π”Π΅ΠΌΠΎ

ΠŸΡƒΠ·Ρ‹Ρ€ΡŒΠΊΠΎΠ²Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΎΡ‚

Bubbly Button β€” это ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ CSS-эффСкт, созданный Π°Π²Ρ‚ΠΎΡ€ΠΎΠΌ Нуром Π‘Π°ΡƒΠ΄ΠΎΠΌ ΠΊΠ°ΠΊ инструмСнт для всСх Π²Π»Π°Π΄Π΅Π»ΡŒΡ†Π΅Π² ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΌΠ°Π³Π°Π·ΠΈΠ½ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ хотят ΡƒΠΊΡ€Π°ΡΠΈΡ‚ΡŒ свой сайт Π·Π°Π±Π°Π²Π½ΠΎΠΉ ΠΈ симпатичной ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ. Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ³Π»ΡƒΠ±ΠΈΡ‚ΡŒΡΡ Π² Π΄Π΅Ρ‚Π°Π»ΠΈ, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Bubbly Button Π²Π°ΠΌ прСдоставляСтся симпатичная розовая ΠΊΠ½ΠΎΠΏΠΊΠ° с ΠΏΠΎΡ€Π°Π·ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ эффСктом пузыря. Розовая ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΈΠΌΠ΅Π΅Ρ‚ простой Π΄ΠΈΠ·Π°ΠΉΠ½, красивый Ρ†Π²Π΅Ρ‚ ΠΈ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π° Ρ€ΠΎΠ·ΠΎΠ²ΠΎΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½ΠΎΠΉ Ρ‚Π΅Π½ΡŒΡŽ. Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ эффСкт пузыря, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π½Π°ΠΆΠ°Ρ‚ΡŒ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ, послС Ρ‡Π΅Π³ΠΎ Π² ΠΌΠ³Π½ΠΎΠ²Π΅Π½ΠΈΠ΅ ΠΎΠΊΠ° появятся малСнькиС ΠΏΡƒΠ·Ρ‹Ρ€ΡŒΠΊΠΈ. НС упуститС эту Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ свой Π²Π΅Π±-сайт ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΠΌ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Bubbly Button!

Demo

Π­Ρ„Ρ„Π΅ΠΊΡ‚ наТатия ΠΊΠ½ΠΎΠΏΠΊΠΈ by

Π­Ρ„Ρ„Π΅ΠΊΡ‚ наТатия ΠΊΠ½ΠΎΠΏΠΊΠΈ β€” это ΠΌΠΎΡ‰Π½Ρ‹ΠΉ CSS-эффСкт, созданный Π°Π²Ρ‚ΠΎΡ€ΠΎΠΌ Лукасом Π“Ρ€ΡƒΠ²Π΅Π·ΠΎΠΌ ΠΊΠ°ΠΊ инструмСнт для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π²Π»Π°Π΄Π΅Π»ΡŒΡ†Π° ΠΎΠ½Π»Π°ΠΉΠ½-бизнСса, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ…ΠΎΡ‡Π΅Ρ‚ ΡƒΠΊΡ€Π°ΡΠΈΡ‚ΡŒ свой Π²Π΅Π±-сайт с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΡ… ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΊΠ½ΠΎΠΏΠΎΠΊ. Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ³Π»ΡƒΠ±ΠΈΡ‚ΡŒΡΡ Π² Π΄Π΅Ρ‚Π°Π»ΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ эффСкт наТатия ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π²Π°ΠΌ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ΡΡ 3 ΠΊΠ½ΠΎΠΏΠΊΠΈ с классными эффСктами: Β«ΠžΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒΒ», Β«Π£Π΄Π°Π»ΠΈΡ‚ΡŒΒ», Β«ΠžΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒΒ». ПослС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ‹ Π½Π°ΠΆΠΌΠ΅Ρ‚Π΅ Π½Π° эти ΠΊΠ½ΠΎΠΏΠΊΠΈ, появится эффСкт Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ с Ρ‚Π΅ΠΌ ΠΆΠ΅ Ρ†Π²Π΅Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ°, Π° Π·Π°Ρ‚Π΅ΠΌ появится Π·Π½Π°Ρ‡ΠΎΠΊ, ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΠΈΠΉ ΠΊΠ°ΠΆΠ΄ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ. НС упуститС эту Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ваш сайт Π±ΠΎΠ»Π΅Π΅ интСрСсным ΠΈ красивым с эффСктом наТатия ΠΊΠ½ΠΎΠΏΠΊΠΈ!

Π”Π΅ΠΌΠΎ

Π­Ρ„Ρ„Π΅ΠΊΡ‚ наТатия ΠΊΠ½ΠΎΠΏΠΊΠΈ by

Button Click Effect β€” это ΠΌΠΎΡ‰Π½Ρ‹ΠΉ CSS-эффСкт, созданный Π°Π²Ρ‚ΠΎΡ€ΠΎΠΌ MinzCode ΠΊΠ°ΠΊ инструмСнт для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π²Π»Π°Π΄Π΅Π»ΡŒΡ†Π° ΠΎΠ½Π»Π°ΠΉΠ½-бизнСса, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ…ΠΎΡ‡Π΅Ρ‚ ΡƒΠΊΡ€Π°ΡΠΈΡ‚ΡŒ свой Π²Π΅Π±-сайт с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΡ… ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΊΠ½ΠΎΠΏΠΎΠΊ. Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ³Π»ΡƒΠ±ΠΈΡ‚ΡŒΡΡ Π² Π΄Π΅Ρ‚Π°Π»ΠΈ, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ эффСкта наТатия ΠΊΠ½ΠΎΠΏΠΊΠΈ Π²Π°ΠΌ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ΡΡ 3 ΠΊΠ½ΠΎΠΏΠΊΠΈ (ВоспроизвСдСниС, Π‘Ρ‚ΠΎΠΏ ΠΈ ΠŸΠ°ΡƒΠ·Π°) с Ρ‡Π΅Ρ‚Ρ‹Ρ€ΡŒΠΌΡ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ эффСктами (эффСкт A, B, C ΠΈ D). Как Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Ρ‹ Π½Π°ΠΆΠΌΠ΅Ρ‚Π΅ Π½Π° эти ΠΊΠ½ΠΎΠΏΠΊΠΈ, эффСкт отобразится Π²ΠΎΠΊΡ€ΡƒΠ³ ΠΊΠ½ΠΎΠΏΠΊΠΈ. БущСствуСт Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ Ρ‚ΠΈΠΏΠ° эффСктов, поэтому Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Ρ‚ΠΎΡ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π»ΡƒΡ‡ΡˆΠ΅ всСго ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для вашСго сайта. Π”Π°Π²Π°ΠΉΡ‚Π΅ установим эффСкт наТатия ΠΊΠ½ΠΎΠΏΠΊΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ‚ΠΈΠΏ!

Π”Π΅ΠΌΠΎ

Анимация страницы наТатия ΠΊΠ½ΠΎΠΏΠΊΠΈ by

Анимация страницы наТатия ΠΊΠ½ΠΎΠΏΠΊΠΈ β€” это ΠΏΠΎΡ€Π°Π·ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ CSS-эффСкт, созданный Π°Π²Ρ‚ΠΎΡ€ΠΎΠΌ Аароном ΠœΠ°ΠΊΠ³ΡƒΠ°ΠΉΡ€ΠΎΠΌ Π² качСствС инструмСнта для всСх Π²Π»Π°Π΄Π΅Π»ΡŒΡ†Π΅Π² ΠΎΠ½Π»Π°ΠΉΠ½-бизнСса, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΡ‰ΡƒΡ‚ Π·Π°Π±Π°Π²Π½ΡƒΡŽ ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ для своСго Π²Π΅Π±-сайта. ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅: анимация страницы с Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ΠΌ ΠΊΠ½ΠΎΠΏΠΊΠΈ прСдставляСт собой ΠΏΡ€ΠΎΡΡ‚ΡƒΡŽ синюю ΠΊΠ½ΠΎΠΏΠΊΡƒ с эффСктным эффСктом. Как Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Ρ‹ Π½Π°ΠΆΠΌΠ΅Ρ‚Π΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ, синяя Ρ‡Π°ΡΡ‚ΡŒ вытянСтся ΠΈ прСвратится Π² малСнький ΠΊΡ€ΡƒΠΆΠΎΠΊ. Из малСнького ΠΊΡ€ΡƒΠ³Π° ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ большиС ΠΈ красочныС ΠΊΡ€ΡƒΠ³ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π°ΡΠΏΡ€ΠΎΡΡ‚Ρ€Π°Π½ΡΡŽΡ‚ΡΡ ΠΏΠΎ всСму экрану. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ эту ΠΊΠ½ΠΎΠΏΠΊΡƒ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° ΠΌΠ΅ΠΆΠ΄Ρƒ страницами. ВсС Π΅Ρ‰Π΅ интСрСсно, ΠΊΠ°ΠΊ это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚! Π”Π°Π²Π°ΠΉΡ‚Π΅ установим Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ страницы наТатия ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами!

Π”Π΅ΠΌΠΎ

Π­Ρ„Ρ„Π΅ΠΊΡ‚ ΠΊΠ½ΠΎΠΏΠΊΠΈ by

Π­Ρ„Ρ„Π΅ΠΊΡ‚ ΠΊΠ½ΠΎΠΏΠΊΠΈ β€” это ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΠΉ CSS-эффСкт, созданный Π°Π²Ρ‚ΠΎΡ€ΠΎΠΌ Π”Ρ€ΠΎΠ½ΠΊΠΎΠΉ Π Π°ΡƒΠ»Π΅ΠΌ Π² качСствС инструмСнта для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π²Π»Π°Π΄Π΅Π»ΡŒΡ†Π° ΠΎΠ½Π»Π°ΠΉΠ½-бизнСса, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΡ‰Π΅Ρ‚ Π·Π°Π±Π°Π²Π½ΡƒΡŽ ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ для своСго Π²Π΅Π±-сайта. Если Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ, Button Effect прСдоставляСт Π²Π°ΠΌ ΠΊΠ½ΠΎΠΏΠΊΡƒ с простым Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ. Когда Π²Ρ‹ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚Π΅ курсор Π½Π° Π·Π΅Π»Π΅Π½ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ, Ρ†Π²Π΅Ρ‚ ΠΊΠ½ΠΎΠΏΠΊΠΈ становится Π±Π΅Π»Ρ‹ΠΌ, Π° Ρ‚Π°ΠΊΠΆΠ΅ появляСтся ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰Π°Ρ зСлСная градиСнтная Ρ‚Π΅Π½ΡŒ, Π²Ρ‹Π΄Π΅Π»ΡΡŽΡ‰Π°Ρ Π΅Π΅. Как Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Ρ‹ Π½Π°ΠΆΠΌΠ΅Ρ‚Π΅ Π½Π° Π½Π΅Π΅, Π½Π° Π±Π΅Π»ΠΎΠΌ Ρ„ΠΎΠ½Π΅ появится зСлСная Ρ€ΡΠ±ΡŒ. ВсС Π΅Ρ‰Π΅ интСрСсно, ΠΊΠ°ΠΊ это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚! Π”Π°Π²Π°ΠΉΡ‚Π΅ установим эффСкт ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠ΅ΠΌ прямо сСйчас!

ДСмонстрация

Кнопка Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π° CSS, зависаСт ΠΏΠ»Π°Π²Π½ΠΎ! ΠΏΠΎ

Кнопка Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π° CSS, ΠΏΠ»Π°Π²Π½ΠΎ зависаСт! β€” это ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΠΉ CSS-эффСкт, созданный Π°Π²Ρ‚ΠΎΡ€ΠΎΠΌ hawcubite Π² качСствС инструмСнта для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π²Π»Π°Π΄Π΅Π»ΡŒΡ†Π° ΠΎΠ½Π»Π°ΠΉΠ½-бизнСса, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ…ΠΎΡ‡Π΅Ρ‚ ΡƒΠΊΡ€Π°ΡΠΈΡ‚ΡŒ свой Π²Π΅Π±-сайт красивой ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ. Π§Ρ‚ΠΎΠ±Ρ‹ Π²Π΄Π°Π²Π°Ρ‚ΡŒΡΡ Π² подробности, ΠΊΠ½ΠΎΠΏΠΊΠ° Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π° CSS ΠΏΠ»Π°Π²Π½ΠΎ зависаСт! прСдоставляСт Π²Π°ΠΌ ΠΊΡ€Π°ΡΠΈΠ²ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ с Ρ€Π°Π΄ΡƒΠΆΠ½Ρ‹ΠΌΠΈ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°ΠΌΠΈ. Π‘Π»Π΅Π³ΠΊΠ° Π½Π°Π²Π΅Π΄ΠΈΡ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ, ΠΈ Π²Ρ‹ Π»Π΅Π³ΠΊΠΎ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅, ΠΊΠ°ΠΊ Ρ†Π²Π΅Ρ‚Π° Ρ€Π°Π΄ΡƒΠΆΠ½Ρ‹Ρ… Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠ² ΠΏΠ»Π°Π²Π½ΠΎ ΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ. Когда Π²Ρ‹ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ‚Π΅ Π½Π° эту ΠΊΠ½ΠΎΠΏΠΊΡƒ, ΠΎΠ½Π° пСрСмСщаСтся, показывая, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π½Π°ΠΆΠ°Π»ΠΈ Π½Π° Π½Π΅Π΅. Π”ΠΎ сих ΠΏΠΎΡ€ интСрСсно, ΠΊΠ°ΠΊ ΠΎΠ½ Π² дСйствии! Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠΌ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π° CSS, ΠΏΠ»Π°Π²Π½ΠΎ зависаСт! ΠΈ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ это своими Π³Π»Π°Π·Π°ΠΌΠΈ!

Demo

Кнопка удалСния с микровзаимодСйствиями by

Π£Π΄Π°Π»ΠΈΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ с микровзаимодСйствиями β€” это ΠΌΠΎΡ‰Π½Ρ‹ΠΉ CSS-эффСкт, созданный Π°Π²Ρ‚ΠΎΡ€ΠΎΠΌ Π₯ΠΈΠΌΠ°Π»Π°Π΅ΠΉ Π‘ΠΈΠ½Π³Ρ…ΠΎΠΌ ΠΊΠ°ΠΊ инструмСнт для всСх Π²Π»Π°Π΄Π΅Π»ΡŒΡ†Π΅Π² ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΌΠ°Π³Π°Π·ΠΈΠ½ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΡ‰ΡƒΡ‚ ΠΊΠ½ΠΎΠΏΠΊΡƒ удалСния для своСго Π²Π΅Π±-сайта. Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ³Π»ΡƒΠ±ΠΈΡ‚ΡŒΡΡ Π² Π΄Π΅Ρ‚Π°Π»ΠΈ, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠ½ΠΎΠΏΠΊΠΈ Β«Π£Π΄Π°Π»ΠΈΡ‚ΡŒ с микровзаимодСйствиями» Π²Π°ΠΌ прСдоставляСтся ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° вмСстС с Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ микровзаимодСйствиями. Когда Π²Ρ‹ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ‚Π΅ Π½Π° Π·Π½Π°Ρ‡ΠΎΠΊ ΠΊΠΎΡ€Π·ΠΈΠ½Ρ‹, Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° ΠΈ ΠΊΠΎΡ€Π·ΠΈΠ½Ρ‹ становится синС-Π±Π΅Π»ΠΎΠΉ. ΠšΠΎΡ€Π·ΠΈΠ½Π° для мусора Ρ‚Π°ΠΊΠΆΠ΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ трясСтся, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ ваш сайт Π±ΠΎΠ»Π΅Π΅ интСрСсным ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ. НС упуститС этот шанс ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ свой Π²Π΅Π±-сайт Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠ½ΠΎΠΏΠΊΠΈ Β«Π£Π΄Π°Π»ΠΈΡ‚ΡŒ с микровзаимодСйствиями»!

ДСмонстрация

Кнопка растягивания ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π° Π½Π°

Кнопка растяТСния ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π° β€” это ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΠΉ CSS-эффСкт, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½Π½Ρ‹ΠΉ Π°Π²Ρ‚ΠΎΡ€ΠΎΠΌ МикаэлСм АйналСмом ΠΊΠ°ΠΊ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ для всСх Π²Π»Π°Π΄Π΅Π»ΡŒΡ†Π΅Π² ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΌΠ°Π³Π°Π·ΠΈΠ½ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ хотят ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ свой Π²Π΅Π±-сайт Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ эффСктов наТатия ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅, ΠΊΠ½ΠΎΠΏΠΊΠ° растяТСния ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π° прСдоставляСт Π²Π°ΠΌ Π·Π°Π±Π°Π²Π½ΡƒΡŽ ΠΈ ΠΆΠΈΠ²ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ, которая ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π°ΡΡ‚ΡΠ³ΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΎΡ‚ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° ΠΊ Π΄Ρ€ΡƒΠ³ΠΎΠΌΡƒ. Π•ΡΡ‚ΡŒ Ρ‚Ρ€ΠΈ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° ΠΈ ΠΎΠ΄Π½Π° фиолСтовая ΠΊΠ½ΠΎΠΏΠΊΠ°. Когда Π²Ρ‹ Π²Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚Π΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹, фиолСтовая ΠΊΠ½ΠΎΠΏΠΊΠ° растягиваСтся, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ ΠΊ этому Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρƒ. Π”Π°Π²Π°ΠΉΡ‚Π΅ Π½Π΅ упустим ваш шанс ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ваш сайт ΠΆΠΈΠ²Ρ‹ΠΌ ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠ½ΠΎΠΏΠΊΠΈ растяТСния Material UI!

Π”Π΅ΠΌΠΎ

Анимация Ρ€Π°Π΄ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π° CSS3 by

Радиальная градиСнтная анимация CSS3 β€” это ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΠΉ CSS-эффСкт, созданный Π°Π²Ρ‚ΠΎΡ€ΠΎΠΌ Π‘ΠΈΠ½Π΅ΡˆΠ΅ΠΌ Π‘Π°Π±Ρƒ ΠŸΠ΅Ρ€ΠΈΠ½Π³Π°Ρ‚ΠΎΠΌ Π² качСствС инструмСнта для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π²Π»Π°Π΄Π΅Π»ΡŒΡ†Π° ΠΎΠ½Π»Π°ΠΉΠ½-бизнСса, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΡ‰Π΅Ρ‚ Π·Π°Π±Π°Π²Π½ΡƒΡŽ ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ для своСго Π²Π΅Π±-сайта. Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ³Π»ΡƒΠ±ΠΈΡ‚ΡŒΡΡ Π² Π΄Π΅Ρ‚Π°Π»ΠΈ, Ρ€Π°Π΄ΠΈΠ°Π»ΡŒΠ½Π°Ρ анимация Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π° CSS3 прСдоставляСт Π²Π°ΠΌ ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ с Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ Ρ€Π°Π΄ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°. Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ, Π½ΡƒΠΆΠ½ΠΎ Π½Π°ΠΆΠ°Ρ‚ΡŒ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ. Когда Π²Ρ‹ Ρ‰Π΅Π»ΠΊΠ°Π΅Ρ‚Π΅ ΠΏΠΎ Π½Π΅ΠΌΡƒ, Π½Π° Π±Π΅Π»ΠΎΠΌ Ρ„ΠΎΠ½Π΅ появляСтся Ρ€ΠΎΠ·ΠΎΠ²Ρ‹ΠΉ Ρ€Π°Π΄ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚. Π­Ρ‚Π° анимация, нСсомнСнно, сдСлаСт ваш сайт вСсСлСС ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Π΅Π΅. Π”ΠΎ сих ΠΏΠΎΡ€ интСрСсно, ΠΊΠ°ΠΊ ΠΎΠ½ Π² дСйствии! Π”Π°Π²Π°ΠΉΡ‚Π΅ установим Radial Gradient Animation CSS3 ΠΈ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠ΅ΠΌ прямо сСйчас!

Π”Π΅ΠΌΠΎ

Анимация с Π²ΠΎΠ»Π½ΠΎΠ²Ρ‹ΠΌ эффСктом с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS ΠΈ ES6 by

Ripple Effect Animation с CSS ΠΈ ES6 β€” это ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ эффСкт CSS, созданный Π°Π²Ρ‚ΠΎΡ€ΠΎΠΌ Π₯ΡƒΠ°Π½ΠΎΠΌ МойсСсом Воррихосом ΠΊΠ°ΠΊ инструмСнт для всСх Π²Π»Π°Π΄Π΅Π»ΡŒΡ†Π΅Π² ΠΎΠ½Π»Π°ΠΉΠ½-бизнСса, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ хотят ΡƒΠΊΡ€Π°ΡΠΈΡ‚ΡŒ свой сайт Π·Π°Π±Π°Π²Π½ΠΎΠΉ ΠΈ симпатичной ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ. Если Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ, Ripple Effect Animation с CSS ΠΈ ES6 ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Π²Π°ΠΌ ΠΊΡ€Π°ΡΠΈΠ²ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ Ρ€ΠΎΠ·ΠΎΠ²ΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚Π°. Кнопка ΠΈΠΌΠ΅Π΅Ρ‚ Π²ΠΎΠ»Π½ΠΎΠ²ΠΎΠΉ эффСкт, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π΅ Π±ΠΎΠ»Π΅Π΅ ΡƒΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΉ, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ‚Π΅ Π½Π° Π½Π΅Π΅. Π­Ρ„Ρ„Π΅ΠΊΡ‚ ΠΏΡƒΠ»ΡŒΡΠ°Ρ†ΠΈΠΈ ΠΏΠ»Π°Π²Π½ΠΎ появляСтся Ρ‚Π°ΠΌ, Π³Π΄Π΅ Π²Ρ‹ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ‚Π΅, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ ваш сайт Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ. ΠŸΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅ ΠΌΠ½Π΅, Π²Ρ‹ Π½Π΅ Π·Π°Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡƒΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ эту Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ внСшний Π²ΠΈΠ΄ вашСго сайта с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ripple Effect Animation с CSS ΠΈ ES6!

ДСмонстрация

Как AVADA Commerce Ρ€Π°Π½ΠΆΠΈΡ€ΡƒΠ΅Ρ‚ список ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² CSS Button Click Effects

ΠŸΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹Π΅ Π²Ρ‹ΡˆΠ΅ 18 ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² CSS Button Click Effects для CSS Ρ€Π°Π½ΠΆΠΈΡ€ΡƒΡŽΡ‚ΡΡ Π½Π° основС ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… ΠΊΡ€ΠΈΡ‚Π΅Ρ€ΠΈΠ΅Π²: Π΄Π²ΠΈΠ³Π°Ρ‚Π΅Π»ΠΈ

  • Π¦Π΅Π½Ρ‹ ΠΈ характСристики
  • РСпутация поставщика css
  • ΠŸΠΎΠΊΠ°Π·Π°Ρ‚Π΅Π»ΠΈ ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСтСй, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ Facebook, Twitter ΠΈ Google +
  • ΠžΠ±Π·ΠΎΡ€Ρ‹ ΠΈ ΠΎΡ†Π΅Π½ΠΊΠ° Avada Commerce
  • Π‘ΠΎΠ»Π΅Π΅ 18 Π»ΡƒΡ‡ΡˆΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² эффСктов наТатия ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS

    Особая Π±Π»Π°Π³ΠΎΠ΄Π°Ρ€Π½ΠΎΡΡ‚ΡŒ всСм поставщикам, ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΠ²ΡˆΠΈΠΌ 18 Π»ΡƒΡ‡ΡˆΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² эффСктов наТатия ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS. ΠœΡ‹ искрСннС Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ Π²Π°ΠΌ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ CSS Π²Ρ‹ΡˆΠ΅, Ссли это Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ. ΠœΡ‹ создали эту ΡΠ΅Ρ€ΠΈΡŽ ΠΎΠ±Π·ΠΎΡ€ΠΎΠ², Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΌΠ°Π³Π°Π·ΠΈΠ½Π°ΠΌ CSS Π½Π°ΠΉΡ‚ΠΈ Π»ΡƒΡ‡ΡˆΠΈΠ΅ эффСкты наТатия ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS для своСго Π²Π΅Π±-сайта. Вся информация ΠΎΠ± ΠΎΠ±Π·ΠΎΡ€Π΅ (Π²ΠΊΠ»ΡŽΡ‡Π°Ρ характСристики, описаниС, Ρ†Π΅Π½Ρ‹ ΠΈ ссылки) собираСтся с Π²Π΅Π±-сайта поставщика ΠΈΠ»ΠΈ с Π΅Π³ΠΎ собствСнной ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½Π½ΠΎΠΉ страницы/ΠΊΠ°Π½Π°Π»ΠΎΠ² ΠΏΡ€ΠΎΠ΄Π°ΠΆ.

    Наша ΠΊΠΎΠΌΠ°Π½Π΄Π° рСгулярно обновляСт список ΠΈΠ· 18 Π»ΡƒΡ‡ΡˆΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² CSS эффСктов наТатия ΠΊΠ½ΠΎΠΏΠΎΠΊ. ΠŸΠΎΠΆΠ°Π»ΡƒΠΉΡΡ‚Π°, Π½Π΅ ΡΡ‚Π΅ΡΠ½ΡΠΉΡ‚Π΅ΡΡŒ ΠΎΠ±Ρ€Π°Ρ‰Π°Ρ‚ΡŒΡΡ ΠΊ Π½Π°ΠΌ, Ссли Ρƒ вас Π΅ΡΡ‚ΡŒ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ вопросы, связанныС с этим ΠΎΠ±Π·ΠΎΡ€ΠΎΠΌ css.

    НС Π²ΠΈΠ΄ΠΈΡ‚Π΅ свой css Π² спискС? Π₯ΠΎΡ‚ΠΈΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ большС ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π² этот ΠΎΠ±Π·ΠΎΡ€? Π‘Π²ΡΠΆΠΈΡ‚Π΅ΡΡŒ с Π½Π°ΠΌΠΈ

    НайдитС большС Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ CSS, JS, поТалуйста, посСтитС наши ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΠΈ CSS, JS!

    Π£Π²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° кликабСльной области

    Π’Ρ‹ ΠΊΠΎΠ³Π΄Π°-Π½ΠΈΠ±ΡƒΠ΄ΡŒ ΠΏΡ‹Ρ‚Π°Π»ΠΈΡΡŒ Ρ‰Π΅Π»ΠΊΠ½ΡƒΡ‚ΡŒ ΠΈΠ»ΠΈ ΠΊΠΎΡΠ½ΡƒΡ‚ΡŒΡΡ элСмСнта (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΊΠ½ΠΎΠΏΠΊΠΈ, ссылки) ΠΈ поняли, Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π½Π΅ Ρ€Π΅Π°Π³ΠΈΡ€ΡƒΠ΅Ρ‚, ΠΏΠΎΠΊΠ° Π²Ρ‹ Π½Π΅ Π½Π°ΠΆΠΌΠ΅Ρ‚Π΅ Π½Π° ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΡƒΡŽ Π΅Π³ΠΎ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ?

    Π­Ρ‚ΠΎ происходит ΠΏΠΎΡ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ кликабСльная ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Π½Π΅ примСняСтся ΠΊΠΎ всСму элСмСнту. Π§Ρ‚ΠΎΠ±Ρ‹ Π±Ρ‹Π»ΠΎ понятнСС, посмотритС Π½Π° рисунок Π½ΠΈΠΆΠ΅. Π― сдСлал нСсколько ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊΠΎΠΉ Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ ΠΈ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ кликабСльная ΠΎΠ±Π»Π°ΡΡ‚ΡŒ.

    Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ я Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€ΡŽ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ часто Π·Π°ΠΌΠ΅Ρ‡Π°ΡŽ, ΠΈ ΠΏΠΎΠΊΠ°ΠΆΡƒ, ΠΊΠ°ΠΊ ΠΈΡ… ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ Ρ€Π΅ΡˆΠ°Ρ‚ΡŒ.

    Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ UX

    Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ WCAG

    Π’ соотвСтствии с WCAG 2.1 ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ Ρ†Π΅Π»Π΅Π²ΠΎΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ для касания ΠΈΠ»ΠΈ ΠΌΡ‹ΡˆΠΈ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΎΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ 44Γ—44 пиксСля. Π Π°Π·ΠΌΠ΅Ρ€ Π½Π΅ являСтся фиксированным ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ Π² зависимости ΠΎΡ‚ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° использования. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, 44Γ—44 пиксСля β€” Ρ…ΠΎΡ€ΠΎΡˆΠ°Ρ отправная Ρ‚ΠΎΡ‡ΠΊΠ°.

    Π—Π°ΠΊΠΎΠ½ Ѐиттса

    Π’Π°ΠΆΠ½Ρ‹ΠΉ Π·Π°ΠΊΠΎΠ½, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ Π² UX-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅. ΠŸΡ€ΠΎΡ‰Π΅ говоря, Ρ‡Π΅ΠΌ большС ΠΈ Π±Π»ΠΈΠΆΠ΅ Ρ†Π΅Π»ΡŒ касания ΠΈΠ»ΠΈ Ρ‰Π΅Π»Ρ‡ΠΊΠ°, Ρ‚Π΅ΠΌ мСньшС Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ потрСбуСтся ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ для взаимодСйствия с Π½ΠΈΠΌ.

    На рисункС Π½ΠΈΠΆΠ΅ я смодСлировал Π΄Π²Π° Ρ€Π°Π·Π½Ρ‹Ρ… случая для основной ΠΊΠ½ΠΎΠΏΠΊΠΈ. Π‘ Π»Π΅Π²ΠΎΠΉ стороны ΠΊΠ½ΠΎΠΏΠΊΠ° мСньшС ΠΈ дальшС, Ρ‡Ρ‚ΠΎ ΠΏΠΎΡ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ ΠΎΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ большС Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ для взаимодСйствия с Π½Π΅ΠΉ. Π‘ ΠΏΡ€Π°Π²ΠΎΠΉ стороны Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΊΠ½ΠΎΠΏΠΊΠΈ большС ΠΈ Π±Π»ΠΈΠΆΠ΅ ΠΊ родствСнному элСмСнту Π²Π²ΠΎΠ΄Π°, Ρ‡Ρ‚ΠΎ упростит ΠΈ ускорит взаимодСйствиС с Π½Π΅ΠΉ.

    Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅ΠΌ ΠΊ Ρ€Π΅Π°Π»ΡŒΠ½Ρ‹ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°ΠΌ, Π½Π΅ забывая ΠΎ WCAG 2.5.5 Target Size ΠΈ Π·Π°ΠΊΠΎΠ½Π΅ Ѐиттса.

    Кнопки

    ΠžΡ‡Π΅Π½ΡŒ Π²Π°ΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π°ΡΡ‚ΠΎΡΡ‰ΡƒΡŽ <ΠΊΠ½ΠΎΠΏΠΊΡƒ> , ΠΊΠΎΠ³Π΄Π° ΠΎΠ½Π° Π²Π°ΠΌ Π½ΡƒΠΆΠ½Π°. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π½ΠΈΠΆΠ΅ взят ΠΈΠ· систСмы ΠΎΠ½Π»Π°ΠΉΠ½-Π±Π°Π½ΠΊΠΈΠ½Π³Π°, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ я ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ:

     
    Π”Π°Π»Π΅Π΅

    Π’ΠΎΡ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ GIF для HTML-ΠΊΠΎΠ΄Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ Π²Ρ‹ΡˆΠ΅. Π― Π½Π°Π²ΠΎΠΆΡƒ курсор Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ, Π° курсор ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ остаСтся ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»Π΅ΠΌ, ΠΈ это Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎ. Однако я Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠ³Ρƒ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ тСкст, ΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ появляСтся тСкстовый курсор! Π­Ρ‚ΠΎΠ³ΠΎ Π½Π΅ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ‚, Ссли Π±Ρ‹Π» использован ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ элСмСнт.

    ΠŸΡ€ΠΈ использовании элСмСнта HTML

    Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

    Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *