I described the basics of my latest event handlers in another post. This post describes ClickHandler.
This is the most common event I process in my latest fun/experiment app. I have simple handlers such as
BuildClickHandler()
.listenTo(‘.popup’)
.selector(‘a.view’)
.onClick(viewFile)
.build(),
This uses addEventListener to every element with the class ‘.popup’. And it handles events from every element matching ‘a.view’ inside any ‘.popup’ element.
The most complicated click handler in the app is
BuildClickHandler()
.listenTo(this.dom, ‘.media-item’)
.onClick(blurInputs)
.onLeftClick(selectItem)
.onRightClick(extendSelectItem)
.onMiddleClick(toggleSelectItem)
.setData((element) => {
return {
item: media.getAllFiles().findById(
this.dom.getData(element, ‘file-id’)
)
};
})
.build(),
This calls addEventListener for the element this.dom and listens for events from all ‘.media-item’ elements in the dom. It has callbacks 4 types of clicks. And the setData function is used to pass the media data object to each of the callbacks. I chose this organization for maintainability
- It’s easy to see all of the click-type operations on an item
- It’s easy to see what data is passed to the item
- It’s easy to change the data selection if the the media repository or id attribute change
- The application doesn’t need to worry about which button is pressed (0,1,2). It handles the ones it wants (left, right,middle)
All of the base EventHandler functionality is available as with all CategoryEventHandlers. The most useful being
- Debounce
- control, alt, shift requirements
- filters
Click
This callback is used for javascript ‘click’ events. In the simple case the callback receives 3 parameters
handleClick(target, event, handler)
target is the DOM element that was clicked
event is the javascript event
handler is the object created by BuildClickHandler()
If setData() was used for the build(), and additional argument is passed at the start
handleClick(data, target, event, handler)
More often than not, data is the only parameter my callback uses.
LeftClick, RightClick, MiddleClick
These callbacks don’t handle ‘click’ events, but ‘mouseup’ events. I have a MouseHandler that also handles mouseup, but more often than not I handle the event as a click. The MouseHandler passes other position parameters that a simple click doesn’t care about. The callbacks are the same a Click callback. A “simple” version with three parameters, and a “data” version with 4.
To Do
ClickHandler currently can only handle one set of key filters for all callbacks. I would like to extend it to add shift, alt, and ctrl requirements to callbacks independently. One possibility is
BuildClickHandler()
.listenTo(‘.popup’)
.selector(‘a.view’)
.onClick(viewFile)
.onClick().withShift().(viewFile1)
.onClick().withCtrl().(viewFile2)
.onClick().withCtrl().withAlt().(viewFile3)
.build(),
There are other possibilities (e.g. additional parameters), but I want to make it very readable.