0.1.3 • Published 6 years ago
eventx-core v0.1.3
EventX-core
Core of EventX javascript event framework
Install
Browser
<script src="..."></script>
NPM
npm install eventx-core
Create new event
Normal event
Syntax
evx.createEvent("<event name>",function(target,callback) {
//target is a single HTMLElement object that you need to bind event to (Always single HTMLElement)
//callback is a function that you must call when event fire
(bind event here)
return function() {
(unbind event here)
}
}
Example
Resize event (evx.createEvent step line 7)
Variable event
- Variable event is a new event type that event name have some variable.
- For example, I want to listen for change of attribute src and alt, so I have to bind attrchange:src and attrchange:alt event.
- To be able to bind these two event I must create two similar event. Can I create only one event? Yes, by using variable event.
- By using variable event you have to create variable event with prefix "attrchange" and you can bind all event that match pattern "attrchange:..."
Syntax
evx.createVarEvent("<event prefix>",function(target,args,callback) {
//target is a single HTMLElement object that you need to bind event to (Always single HTMLElement)
//args is an array of variable after <prefix>, for example <prefix>:src -> args = ["src"], <prefix>:src:alt -> args = ["src","alt"]
//callback is a function that you must call when event fire
(bind event here)
return function() {
(unbind event here)
}
}
Example
Bind event
- In callback function this variable will be element that fire event.
- For example, if element #aaa has been resized, callback function will be called with this = HTMLElement object of #aaa and arguments up to what you have done in create event step.
- Warning : If you use arrow function, this will equal to Window object instead of target HTMLElement object.
JQuery
Syntax
$("<selector>").on("<event name>",function(e,...) {
...
});
$("<selector>").on("<event name>","<selector>",function(e,...) {
...
});
And other syntax that you can find in http://api.jquery.com/on/
Example
Resize event (function jqueryon line 34)
Native
Syntax
evx.on(target element in HTMLElement or JQuery object,"<event name>",function(e,...) {
...
})