BY
Mohammed Alsaffar
m.9afar@gmail.com
Capturing : The event travles down from the root node to the children
element.addEventListener('click',doSomething,true);
element.addEventListener('click',doSomething,false);
var button = document.getElementById('BasicsButton');
button.addEventListener('click',function(){
alert("Button");
},true);
button.parentNode.addEventListener('click',function(){
alert("Parent");
},true);
var button2 = document.getElementById('BasicsButton2');
button2.addEventListener('click',function(){
alert("Button");
},false);
button2.parentNode.addEventListener('click',function(){
alert("Parent");
},false);
.preventDefault()
If this method is called, the default action of the event will not be triggered.
Click me...
var button3 = document.getElementById('BasicsButton3');
button3.addEventListener('click',button3Clicked, false);
function button3Clicked(e){
alert("Link Clicked");
e.preventDefault();
}
.stopPropagation()
Prevents the event from bubbling up the DOM tree.
var button4 = document.getElementById('BasicsButton4');
button4.addEventListener('click',button4Clicked, false);
button4.parentNode.addEventListener('click',button4ClickedParent, false);
function button4Clicked(e){
alert("Button Clicked");
e.stopPropagation();
}
function button4ClickedParent(e){
alert("Button Clicked In Parent");
}
.stopImmediatePropagation()
Keeps the rest of the handlers from being executed and prevents the event from bubbling up the DOM tree.
var button5 = document.getElementById('BasicsButton5');
button5.addEventListener('click',button5Clicked, false);
button5.addEventListener('click',button5Clicked2, false);
function button5Clicked(e){
alert("Button Clicked 1");
e.stopImmediatePropagation();
}
function button5Clicked2(e){
alert("Button Clicked 2");
}
.on()
Attach an event handler function for one or more events to the selected elements.
$('#jfunButton1').on('click',function(e){
$(this).toggleClass('red');
});
.off()
Remove an event handler.
$('#jfunButton2').on('click',function(e){
$(this).toggleClass('blue');
});
$('#jfunButton2').off('click');
.one()
Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
$('#jfunButton3').one('click',function(e){
$(this).toggleClass('green');
});
.submit()
Bind an event handler to the "submit" JavaScript event, or trigger that event on an element.
$('#GoogleInput').on('input',function(){
if($(this).val() == 'lol'){
$('#GoogleForm').submit();
}
});
$('#GoogleForm').submit(function(){
$('#GoogleInput').val('Google');
});