In-depth understanding of JS event binding_javascript skills
1. Traditional event model
There are limitations in traditional event models.
Inline models are used in the form of HTML tag attributes and mixed with HTML. This method undoubtedly causes modification and expansion problems, and is rarely used anymore.
The script model writes event processing functions into js files, obtains elements from the page, and binds the corresponding event functions to trigger execution. But there are also shortcomings:
1. An event is bound to multiple event listening functions, and the latter will override the former.
2. Situations where repeated binding needs to be restricted
3. Standardized event object
2. Modern event binding
DOM2-level events define two methods for adding and deleting events: addEventListener() and removeEventListener(). They receive three parameters respectively: event name, function, bubbling or capturing Boolean value (true means capturing, false means risking Bubble).
Correspondingly, IE provides two similar methods, attachEvent() and detachEvent(), but IE's two methods have another problem: the this object cannot be passed (this in IE points to window). You can use the call method. Perform object impersonation:
function addEvent(obj,type,fn){
if(typeof obj.addEventListener != 'undefined'){
obj.addEventListener(type,fn,false);
}else if(obj.attachEvent != 'undefined'){
obj.attachEvent('on' + type,function(){
fn.call(obj,window.event);
});
}
};However, since an anonymous function is executed when adding, it cannot be deleted after adding; in addition, the method provided by IE will also cause the problem of being unable to execute binding events sequentially and causing memory leaks.
In order to solve this series of problems, it is necessary to further encapsulate the method. For other browsers, use the DOM2 level standard. For IE, use addition and deletion based on the traditional mode. The idea is:
1. Adding uses a JS hash table to store object events, and assigns an ID value to each object event. According to the added calling order, first determine whether the same processing function exists. If not, bind the events in sequence. Functions are added to the hash table, which solves the problem of being unable to execute sequentially and being added repeatedly
2. When deleting, the traversal function matching is judged, and if it exists, delete it
Summary:
I didn’t have a deep understanding of JS event binding before. I even stayed on the traditional event binding model, and my understanding of program implementation was still too shallow. This time I learned a lot when I learned about the encapsulation library. Object-oriented applications on JS. Although js libraries similar to JQuery have achieved a good encapsulation effect of the data binding mechanism, but you only know it and don't know why, you still feel like you are in the dark. Go and analyze the specific implementation in person. , you will have a feeling of sudden enlightenment, and you will also realize that to make a compatible and versatile program, you need to consider a lot of content and solve many problems, and you are gradually becoming clearer about these problems.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How many ways are there to bind events in jquery?
Nov 09, 2020 pm 03:30 PM
There are 4 ways to bind events in jquery, namely: bind(), live(), delegate() and on() methods; the bind() method can only bind events to existing elements, while the live() ), on(), and delegate() all support event binding for newly added elements in the future.
Solve the problem of UniApp error: 'xxx' event is not bound
Nov 25, 2023 am 10:56 AM
When developing applications using UniApp, you may encounter the following error message: 'xxx' event is not bound. This is caused by UniApp's event binding mechanism, which needs to be set correctly to solve this problem. 1. Cause of the problem In UniApp, event binding of page components is completed through the v-on instruction. For example, add a button component to the template: <button@click="onClick">Click me</butto
How to add events to elements? Three ways to parse JS binding events
Aug 04, 2022 pm 07:27 PM
As a scripting language, JavaScript can bind events to elements on the page, so that when a specified event occurs, the corresponding event handler can be automatically called to handle the event. So how to add events to elements? The following article will introduce to you three ways to bind events in JS. I hope it will be helpful to you!
What is the function of jquery binding event
Mar 20, 2023 am 10:52 AM
The function of jquery binding event: Bind ordinary events to DOM nodes. When the DOM node is selected, bind the event to it to facilitate users to provide corresponding operations. jQuery provides four event binding methods, namely bind, live, delegate, and on, and the corresponding unlistening functions are unbind, die, undelegate, and off.
An in-depth discussion of jQuery event binding technology
Feb 26, 2024 pm 07:36 PM
jQuery is a popular JavaScript library that is widely used to handle interactivity in web pages. Among them, event binding is one of the important functions of jQuery. Through event binding, responses to user interactions can be achieved. This article will explore jQuery event binding technology and give specific code examples. 1. The basic concept of event binding Event binding refers to adding an event listener on a DOM element to perform specified operations when a specific event occurs. In jQuery, select the desired
What should I do if the 'click' event binding is invalid in my Vue application?
Jun 24, 2023 pm 03:51 PM
Vue is a popular JavaScript framework for building modern web applications. In Vue, we usually use directives to operate DOM elements. Among them, the "click" event is one of the commonly used instructions. However, in Vue applications, we often encounter situations where the "click" event binding is invalid. This article explains how to solve this problem. The first step in checking whether an element exists is to confirm whether the element to which you want to bind a "click" event exists. If the element does not exist,
How to use event binding function parameters in Vue documentation
Jun 20, 2023 pm 02:06 PM
Vue is a popular JavaScript framework that uses data-driven ideas to simplify the development process. Vue's event binding function is very powerful and can handle various interactions on the page. In the development process of Vue, event binding function parameters are often used. This article will introduce the use of this function in detail. In Vue, you can use the v-on directive to bind events. The v-on directive is followed by the event name and event handling function, for example: <bu
In-depth analysis of jQuery event binding techniques
Feb 26, 2024 pm 06:33 PM
jQuery is a popular JavaScript library that simplifies many common tasks in web development, including element selection, DOM manipulation, and event handling. In jQuery, event binding is one of the very common and important operations. This article will explore the event binding methods in jQuery in detail, and use specific code examples to help readers better understand and apply these methods. 1.bind() method The bind() method is one of the most traditional and commonly used event binding methods. it can
