Тази статия демонстрира накратко какво представлява методът „click()“ на DOM елемента и как да го използвате в HTML?
Какво представлява методът „click()“ на DOM елемента в HTML?
Когато методът click() се извика на HTML елемент, той симулира потребител, който щраква върху елемента с мишката, което от своя страна задейства всички прикачени манипулатори на събития. Това позволява на разработчиците да извършват няколко интерактивни действия като отваряне на връзки, изпращане на формуляри или превключване на видимостта на елементи без необходимост от физическо щракване с мишката. Това помага за създаването на интерактивни и отзивчиви уеб страници.
Как да използвам метода „click()“ на DOM елемента в HTML?
За да използват метода click(), потребителите първо трябва да получат препратка към HTML елемента, за да симулират щракване. Това може да се направи с помощта на който и да е от стандартните методи за обхождане на DOM или заявки, като например „ getElementById ”, “ getElementsByClassName ”, “ querySelector ', или ' querySelectorAll ”.
Нека преминем през пример за по-добро обяснение на метода „click()“.
Пример: HTML поле за отметка и елементи на бутон за избор
Разглежда се пример, в който „ клик() ” методът се използва с HTML квадратчето за отметка и елементите на бутона за избор. Следвайте кода по-долу:
< форма >
< вход
Тип = 'кутия за отметка'
документ за самоличност = 'кутия за отметка1'
върху мишката върху = 'forCheckbox()'
>
Осъществено от Linuxhint
< вход
Тип = 'радио'
документ за самоличност = 'радио бутон'
върху мишката върху = 'заРадио()'
>
Осъществено от Linuxhint
< / форма >
В горния кодов фрагмент:
- Първо се създава квадратче за отметка на уеб страницата с помощта на тага с тип, зададен на „ отметка ”.
- След това слушателят на събитието ' върху мишката върху ” е прикрепено към квадратчето за отметка и извиква „ forCheckbox() ” функция.
- По същия начин „ радио ' се създава с помощта на ' <вход> ” и към него е прикачен слушателят на събитие. Но този път „ зарадио() ” се извиква функцията.
След създаването на HTML елемент на уеб страницата, сега е време да добавите „ клик() ” метод:
< сценарий >
функция за квадратче за отметка ( ) {
document.getElementById ( 'кутия за отметка1' ) .щракване ( ) ;
}
функция за радио ( ) {
document.getElementById ( 'радио бутон' ) .щракване ( ) ;
}
< / сценарий >
В горния кодов фрагмент:
- Първо дефинирайте две JavaScript функции, “ forCheckbox() ' и ' зарадио() ”.
- Тези функции използват „ document.getElementById() ” за получаване на препратки към HTML елементи на страницата с конкретни идентификатори „checkbox1” и „radioButton”.
- За симулация на кликване върху HTML елемента се използва методът click(). Тази функция превключва състоянието на включено или изключено, когато бъде извикана.
След изпълнението на горните кодови фрагменти изходът изглежда така:
Горният gif илюстрира, че състоянието на квадратчето за отметка и бутона за избор се променя с помощта на метода „click()“.
Заключение
Методът click() е особено полезен за обработка на потребителски взаимодействия с уеб страница чрез JavaScript.
Вместо да разчитате на това, че потребителят ще щракне физически върху елемента, използвайте метода click(), за да симулирате програмно събитието за кликване. Полезно е за създаване на интерактивни и лесни за употреба дизайни. Тази статия успешно демонстрира значението на метода „click()“ на DOM елемента в HTML.