WEB TECHNOLOGIES UNIT-4 | Degree 4th sem BCOM Computers web technologies unit-4 full explanation💯✅

Added: 2026-05-30

[00:00:00]Hello dear students, welcome back to our YouTube channel Learn with Sahira. In this video, we are going to see the complete and easy explanation of unit number four from the subject web technologies which is for degree fourth semester BCOM computer application students. After watching this one single video, I can confidently say you will become perfect in unit number four. So definitely watch the video till the very end. And if you're new to our YouTube channel Learn with Sahara, subscribe it for more exam preparation videos.

[00:00:26]Students, one important thing I have personally prepared damn sure important question and answers notes for all subjects and languages of degree fourth semester. These notes are easy, simple, clear to understand and 100% exam oriented. If you want these notes for quick exam preparation, you can message me on my Instagram. My Instagram ID is learn link is also available in this video description. Just message me want notes along with your group and semester. I will be giving you the access to all the notes. But remember students, these are paid notes. Yes, there is a small payment for the notes.

[00:00:55]But believe me, you are going to see excellent results with these notes. Only the students who want the notes should text me. And if you want to watch all explanation videos of this subject or do visit our YouTube channel's playlist, Semester 4 Web Technologies, you will be finding all the videos there. That playlist link is also available in this video description. Do check it out.

[00:01:13]Without getting late, let us get started. Question number one is, what is an event? Explain the mouse events.

[00:01:20]Students please try to understand that an event is any action that happens on a web page. Okay. Whatever the action that occurs on a web page is known as event.

[00:01:29]This action can be done by the user or happen automatically by the browser. For example, clicking a button, typing in a text box, moving the mouse, all these are called events. So whenever an event happens, the web page can respond to it.

[00:01:43]That means some action will be performed. For example, students, when you click a button, a message will appear. When you move mouse color will change. So event means something happens and web page reacts. As simple as that.

[00:01:56]Now if we talk about mouse events these are the events that happen when the user interacts with the web page using a mouse. Whenever we click move or point the mouse different events are triggered. These events are very important students because most of the interaction on website is done using mouse itself. Now if we talk about first type it is click event. It happens when the user presses and releases the mouse button once on an element. Okay, this is the most commonly used event. We can say it is mainly used when we want to perform an action after clicking. For example, clicking a button to submit a form, clicking a link to open another page, clicking to show a message. So whenever user clicks, some action is executed. Now we have doubleclick event.

[00:02:42]This happens when the user clicks two times quickly on the same element. It is different from normal click. Okay?

[00:02:48]Because it requires two clicks in a short time. This is used for special actions. Please note for special action uh action. For example, opening a file, zooming or enlarging an image. So double click is used when we want a different action than single click. This is single click. This is double click. Now we have third one which is mouse over event.

[00:03:08]This happens when the mouse pointer comes over an element. Okay. Here clicking is not needed. Just moving the mouse over the element is enough. Okay, this is mainly used for visual effects.

[00:03:18]For example, button color changes when the mouse comes on it or menu options appear when you move mouse over it. So this event helps in creating hover effects we can say. Then mouse out event, mouse out event happens when the mouse pointer moves away from an element. Okay, it works opposite to mouse over this and this one is opposite to each other. So whenever the mouse leaves the element some actions happen like color changes back to normal or menu options disappear. So mouse over and mouse out usually work together we can say. Then we have mouse move event.

[00:03:55]Mouse move event happens when the mouse is moving over a web page or element.

[00:03:59]Okay. This event keeps running continuously. We can say as the mouse moves this continuously runs. So it is used when we want to track mouse movement. Okay. For example, drawing applications, games, showing coordinates of cursor. So this event is useful when movement of mouse is important. Let me say you all once again. Click event one click. Double click means two clicks.

[00:04:24]Mouse over means pointer comes on element. Mouse out means pointer leaves element. And mouse move event means pointer is moving. So students please understand the whole concept. And event is any action on a web page. and mouse events help the web page to respond when the user interacts using the mouse. So this was the explanation of question number one. If you want detailed answers, easy explanations, you need to message me on my Instagram. Already notes are available for all the subjects and languages. Just message me on my Instagram. I will be giving you the access to all the notes which are very easy and simple. If you just give a reading, you will understand the whole concept. Okay? Just giving a reading is enough in my notes. So you will be 100% perfect with the complete concept and you will be 100% ready for your examination. If you want detailed explanation, answers, notes, message me on my Instagram. Question number two is list and explain keyboard events.

[00:05:21]Students, keyboard events are the events that happen when a user uses the keyboard on a web page. Till now we have seen mouse. Now we are going to see keyboard event. So whenever a user types something, presses a key or releases a key, an event occurs. So basically these events are mainly used in forms, search boxes, login pages, students. So whenever the user gives input through keyboard, the web page can detect it and respond to it. We are having different types. First type is key down element uh sorry key down event. It happens when the user presses a key on the keyboard.

[00:05:55]Okay, this event is triggered immediately when the key is pressed. It does not wait for the key to be released to students. When you click a key, this will happen. So this is use useful when we want to detect the action as soon as the key is pressed. For example, in games when you press a key, the character moves immediately. Right? So here uh it is detecting and detecting shortcut keys is also important. So key down is used for quick response. We can say key press.

[00:06:25]Then key press event students. This uh happens when the user presses a key that produces a character. Okay, this event is mainly used to detect a typing. We can say it works for keys like letters, number, symbol. So whenever the user types something, key press helps to read that input. For example, typing in a text box uh box, entering a name or message, all that are examples. Then we have key up event. This happens when the user releases a key. Okay, this event is triggered after the key is pressed and then released. So the sequence is key down, key press, key up. So key up is useful when the uh when we want to check the final input after typing. Okay, for example, checking what user typed, validating input after typing. So it is used when we need to process input after the key action is completed. Please try to understand. Key down means key is pressed. That's all.

[00:07:24]Then key press means character is key up.

[00:07:32]So this is about different types importance if we talk about it is used to detect user input. It is used to respond to typing, validate the data and create interactive applications. So basically students keyboard events occur when the user presses or releases the key and they help the web page to detect and respond to the user input. User input with the help of keyboard and mouse itself. Right? So that's what we are talking about. Question number three is explain different event handlers.

[00:08:01]Students an event handler is uh used to perform an action when an event happens.

[00:08:08]Okay. So we already know that an event means something like click uh key press mouse movement. Now when that event happens what should the web page do? So that action is defined by an event handler. So simply handler event handler response students for example click button will be changed by event handler. So event handler connects event with action. We have different types. First one is on click event handler. This is used when the user clicks on an element.

[00:08:54]Okay, as soon as the user clicks, some action is performed. This is one of the most commonly used handler students. For example, clicking a button shows a message or clicking a link opens another page. So, whenever click happens, the code inside on click will run. Then we have on dbl click event handler. On dbl click event handler is used when the user double clicks on an event. This is double click. Okay, DBL is nothing but double. So this is used for special action students. For example, opening a file or zooming an image all that. Then we have on mouseover event handlers. If you just uh try to understand the different types of mouse events in first question we have seen right this answer will be easy for you. These uh two answers are similar. Okay. So no need to worry. So talking about on mouse over uh event this works when the mouse pointer comes over an element. Okay. No click is needed here. Just moving the mouse is enough. So it is mainly used for visual effects like changing button color or showing menu options. So right that is nothing but on mouse over event handler will perform something on mouse out event handler is on mouse over. But if we remove this cursor like this, this is our element.

[00:10:15]And if you are removing it from there, that is nothing but on mouse out. So on mouse out works when the mouse uh pointer moves away from the element. So it is opposite to on mouse over. For example, color changes back to normal or menu disappears something like that.

[00:10:31]Then on key down event handler students, this works when the user presses a key.

[00:10:35]So basically it detects the key immediately when it is pressed. So students this is useful when we want a quick response like for example in games or shortcut keys like that on key up event handler students this works when the user releases the key it happens after the key is pressed. This is useful when we want to check the final input students like checking typed value or validating the input like that onload event handler is the last one. This works when the web page is completely loaded. As soon as the web page uh finishes loading this event runs okay like showing welcome message or starting some script. So it ensures that everything is ready before action happens. So please try to understand uh this is click this is double click here mouse comes here mouse goes here key is pressed here key is released and here page is loaded. That's that simple as that. Okay. Now if we talk about the last question, question number four, what method do we use to create an event listener? Please try to understand. This is one of the important concepts we can say an event listener is used to wait for an event and then perform an action.

[00:11:45]Okay, we already know event means something happens. Handler means what action to perform. Eventlister combines both. Okay, it keeps listening for an event and when that event happens, it runs a action. So basically it will wait event happens action runs. Okay simple event. So action combine is nothing but event listener.

[00:12:13]So we do have method to create an event listener. We use this uh thing. Okay.

[00:12:18]Add event listener parenthesis. Uh this is method. Okay. This much is method. So this method is used to attach an event to an element. For example, button click key, press, mouse movement and all. So when that event happens, a function will execute. So if we talk about how it works, first it uh selects the element.

[00:12:39]Okay, it selects the element like first we select the element on which we want to apply the event. It can be button, it can be image, it can be uh text. So we choose where the event should happen.

[00:12:51]Then uh we will listen for the element.

[00:12:54]Students here you can see listening for the element is nothing but next to we will tell which event we want to listen for. For example click key down mouse over. So the program keeps waiting for that specific event. Then executing the action students finally we define what action should happen. This is done using a function. So when the event occurs the function will run and it will perform the action like showing a message or changing the color or uh updating the content. So these are the three uh uh working of event listener. First element select then execute. Now if we talk about the advantages we can say we can add multiple events to same element. So instead of using onflake directly event listener is better. Okay. Why? Because we can add multiple events to the same element. Code will become clean and organized easy to manage the large programs and also it is more flexible and widely used. Please try to understand how it works. First element select then action perform and this method add event listener parenthesis. This method is used to detect events and perform action students. So basically it will make web pages interactive and flexible.

[00:14:11]This was the complete explanation of unit number four. If you're having any confusion, if you didn't understand, watch the video again or else you can also take my notes. In my notes, I have given very easy explanations. Just by giving a reading, you will be understanding the whole concept. If you want those paid notes, you have to message me on my Instagram. Join our Telegram channel for more important updates. Do visit our YouTube channels playlist semester for web technologies playlist link, Instagram link, Telegram link, all links are available in this video description. Do check it out. All the very best. The bay.