My requirement is to enable / disable event propagation on kendo Grid.
So i could able to disable as follwos
$("#gridReport").data("kendoGrid").bind("dataBinding", function(e) {
e.preventDefault();
});
Now How to enable event propagation? OR Reset above change?
Use the unbind method to remove bindings.
// remove _all_ dataBinding bindings
$("#gridReport").data("kendoGrid").unbind("dataBinding");
To remove a specific binding instance you will need to maintain a reference to the handler.
var myHandler = function(e) { e.preventDefault(); };
$("#gridReport").data("kendoGrid").bind("dataBinding", myHandler);
// remove a specific dataBinding binding
$("#gridReport").data("kendoGrid").unbind("dataBinding", myHandler);
You can also remove all bindings of all events
$("#gridReport").data("kendoGrid").unbind();
More info in the documentation
https://docs.telerik.com/kendo-ui/api/javascript/kendo/methods/bind
https://docs.telerik.com/kendo-ui/api/javascript/kendo/methods/unbind
Related
What is the difference between click in
document.getElementById("myBtn").addEventListener("click", displayDate);
and onclick in
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>
</body>
</html>
Are they both considered as events? Why can't we use click instead of onclick and visce versa?
The difference is that the first (click) is an event listener, and the second (onclick) is an event handler content attribute.
Event handler content attributes store an internal raw uncompiled handler, which produces an event listener via the event handler processing and getting the current value of the event handler algorithms.
In practice, this affects the scope, e.g.
(function() { var element = document.body;
var str = "console.log([typeof foo, typeof bar])";
var func = function() { console.log([typeof foo, typeof bar]); };
element.foo = 'foo';
var bar = 'bar';
element.setAttribute('onclick', str);
element.addEventListener('click', func);
element.click();
// Event handler content attribute logs ["string", "undefined"]
// Event listener logs ["undefined", "string"]
})();
I discourage using event handlers. They are an old reminiscence and are superseded by event listeners.
Yes, they are both events, simply put the same, and one use onclick when assign its handler inline, and the other click when assign using an event listener (which is the recommended way).
And you can't use them vice versa, as this is how it has to be done or they won't work.
Read more at MDN:
https://developer.mozilla.org/en-US/docs/Web/Events/click
https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers
$("#profile-register #submit").click(function (e) {
e.preventDefault();
console.log("I executed")
})
successfully prevent the default the behavior,but code below can't
$("#profile-register #submit").onclick=function (e) {
e.preventDefault();
console.log("I executed")
}
it redirect the form with parameter,you can see it in the URL frame above
I want add eventListener highlight buttonLockup with stackTemplate.
Can you guide to use this?
Thanks,
The event system in TVJS is extremely similar to that in a web browser. After all, it's just JS and a DOM. MDN's documentation on Event Handlers should be mostly relevant
To add an event listener to a specific button, just find that button (using ID or name or whatever), and use addEventListener.
var myButton = doc.getElementByName('buttonLockup')
var onSelect = function(ev) {
console.log('Button selected!')
}
myButton.addEventListener('select', onSelect)
However, depending on your use case, I've found Apple's approach in their sample apps to be quite useful. They rely on the fact that events bubble up to the root of the template, and just listen to them there. So for example:
// Given a TVML document has been presented with this somewhere in it
<buttonLockup action="doSomething">Do something</buttonLockup>
// When it's selected, doSomething
var globalOnSelect = function(ev) {
var target = ev.target;
var action = target.getAttribute('action')
if (action === 'doSomething') {
console.log('Do Something button selected');
doSomething();
}
}
doc.addEventListener('select', globalOnSelect);
here is the problem,I have to attach two event (click and sortable) on one element,but when i click the element,it also trigger sortable complete event. Is there any way to solve this?
I saw the source code of sortables,it bind mousedown event,so it will trigger by click.while how can i deteted whether is fired by click or drag.
otherwise,if there is a good way to detect element resort or not will be fine.
One option, pointed out by Timmeh at the #mootools irc, is to use the onSort event and have a flag there.
Like:
onSort: function () {
this.sorted = true;
},
onComplete: function (el) {
if (this.sorted) {
alert("complete trigger complete");
}
this.sorted = false;
}
Fiddle
Checking the element seems to work http://fiddle.jshell.net/F2VKK/3/
var Local:LocalConnection=new LocalConnection();
Local.addEventListener(StatusEvent.STATUS,function(event:StatusEvent):void{
// This stuff should only be running once
});
There can be many listeners applied, so only this should be removed. So basically after this event have been dispatched, there can be another listener for the same instance of LocalConnection.
You can remove anonymous event handlers inside of that anonymous event handler, as you always have a reference to the current function.
var Local:LocalConnection=new LocalConnection();
Local.addEventListener(StatusEvent.STATUS,function(event:StatusEvent):void{
// This stuff should only be running once
Local.removeEventListener(StatusEvent.STATUS, arguments.callee);
});
There is no other native way to cause an event listener to fire only once, the listener must be removed.
In my experience it is nearly always better to avoid anonymous functions in flash:
var local:LocalConnection = new LocalConnection();
local.addEventListener(StatusEvent.STATUS, statusHandler);
function statusHandler(event:StatusEvent):void{
local.removeEventListener(StatusEvent.STATUS, statusHandler);
}
Also the convention is to use lowercase letter for the beginning of a variable.
Yes you can:
Local.addEventListener(StatusEvent.STATUS,function(event:StatusEvent):void{
IEventDispatcher(event.currentTarget).removeEventListener(event.type, arguments.callee);
});
I've been reading the Google Maps API docs to see if it's possible to tell the difference between a system event vs. a user one?
For example, the zoom_changed event gets triggered when you use methods like setZoom, fitBounds, etc, which in my implementation is unsavoury, as I just want to know when the user actually changes the zoom level.
Unfortunately, the click event is only fired on the map itself, not the controls, so you can't rely on that method to help detect the users input.
Ideas?
Although I haven't been able to solve this using the Google Maps API, I have created a workaround which involves me calling this method before I change the map zoom or positioning without user interaction:
MapGraph.prototype.systemMove = function() {
var _this = this;
this.isMoving = true;
return setTimeout(function() {
return _this.isMoving = false;
}, 500);
};
And my event bindings look like this:
google.maps.event.addListener(this.map, 'dragend', function(event) {
if (!_this.isMoving) return _this.mapChanged();
});
Not perfect, but it does work.
Would love to see any other implementations though.
You may also consider an alternate solution I proposed in this Stack Overflow answer, which does not rely on mouse events to recognize user-initiated changes.
Instead of trying to recognize user events, add a flag to the map whenever a programmatic change is initiated with setZoom or fitBounds.
map.systemChange = true
map.setZoom()
Then check for (and reset) the flag in the event listener.
map.addListener('zoom_changed', function () {
if (map.systemChange) {
map.systemChange = false // Reset the flag for a system-initiated event
} else {
// Handle the user-initiated event
}
});