(EXT) ext event processing

 EXT event processing

In JavaScript, you will have to process events frequently. This is sometimes difficult because you need to process different cross-browser standardization events. Extjs makes it very easy to process events, and sometimes it is even fun (!).

 

Basic example

For example, when a user clicks a link, you want to display a warning message to the user. Please continue, because you may want to know more before starting to process events.

var el = Ext.get('somelink');
el.on('click', function(){
alert('you click on a link');
});

Note: here we use an anonymous handler. In addition, you should execute the above Code (using the Ext. onready () method) after Dom initialization)

 

Scope of processing functions

Well, we just learned the most basic event processing. Let's look at other things we can do. By default, the scope of the processing function is the element of the event you bind.

VaR El = ext. Get ('somelink ');
El. On ('click', function (){
Alert (this. ID); // 'somelink 'is displayed here'
});

Note:ThisIt is not an ext Element Object. If you want to use Ext, you must use "Var El = ext. Get (this );"

But what if we want to change the scope of the processing function? You can use that object as the scope parameter.

Function onclick = function (){
Alert (this. someproperty); // 'somevalue' is displayed here'
};

VaR scope = {
Someproperty: 'somevalue'
}

VaR El = ext. Get ('somelink ');
El. On ('click', onclick, scope );

Tip: For more information about the scope, see here

 

PASS Parameters

In the previous example, we saw how to change the scope of the processing function. But what if we still want to access (bound to it) elements? We can use the parameters passed to the processing function for the operation.

Function onclick = function (EV, target ){
Alert (this. someproperty); // 'somevalue' is displayed here'
Alert (target. ID); // 'somelink 'is displayed here'
};

VaR scope = {
Someproperty: 'somevalue'
}

VaR El = ext. Get ('somelink ');
El. On ('click', onclick, scope );

As you can see, the second parameter (target) is used in this example ). The first parameter is the ext event object. We can use this object to do many things.

 

 

Use event

The ext event object passed to the event processor has multiple convenient attributes and methods. The following are several examples:

Onclick = function (EV, target ){
Ev. preventdefault (); // prevents the browser from handling events by default.
Ev. stoppropagation (); // prevents event Propagation
Ev. stopevent () // preventdefault + stoppropagation

VaR target = eV. gettarget () // gets the event Target (same as the target parameter), and returns an ext and Element Object.
VaR reltarget = eV. getrelatedtarget (); // obtain the target;

For more information about eventobject usage, see the document

 

Event Parameters

The event has many configurable parameters. The following is an example:

Delayed listeners(Delayed event firing)

el.on('click', this.onClick, this, {delay: 250});

Buffered listeners(Buffers an event so it only fires once in the defined interval)

el.on('click', this.onClick, this, {buffer: 100});

"Handler" listeners(Prevents default and optionally stops Propagation)

// prevent default
el.on('click', this.onClick, this, {preventDefault: true});

// only stop propagation
el.on('click', this.onClick, this, {stopPropagation: true});

// prevent default and stop propagation
el.on('click', this.onClick, this, {stopEvent: true});

Other options

el.on('click', this.onClick, this, {
    single: true, // removed automatically after the first fire:
    delegate: 'li.some-class' // Automatic event delegation!
});

 

Custom Parameters

You can also pass custom parameters to the event processor. This function is useful when you want to use a variable inside the event processing code and do not want to change the scope. To do this, you just need to add the custom parameters to the options object. See the following example.

function onClick(ev, target, options){
alert(options.someProperty); // alerts 'someValue'
}

var el = Ext.get('somelink');
el.on('click', onClick, null, {someProperty: 'someValue'});

Add multiple event Processors

If you want to add multiple event processors to an element, you can do this once.

el.on({
'click' : {
     fn: this.onClick,
 scope: this,
 delay: 100
}, 
'mouseover' : {
     fn: this.onMouseOver,
 scope: this
},
'mouseout' : {
     fn: this.onMouseOut,
        scope: this
}
});

 

Summary

As you can see, ext provides many functions that make it easier to handle events. All the basic content we will discuss in this article. If you want to learn more, see the forum post by Jack Slocum.