This article describes the principles and usage of JQuery event delegation. Share it for your reference, as follows:
Event delegation is to use the principle of event bubbles to add events to the parent, and perform corresponding operations by judging the subset of the event source. Event delegates can first greatly reduce the number of event bindings, and secondly, they can also allow newly added subset elements to have the same operation.
General binding events and event bubbles
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style type="text/css">
.list{
background-color: gold;
list-style-type: none;
padding: 10px;
}
.list li{
height: 30px;
background-color: green;
margin: 10px;
}
</style>
<script src="/jquery/2.0.0/"></script>
<script type="text/javascript">
$(function () {
/*$('.list li').click(function () {
$(this).css({backgroundColor:'red'});
});*///Written as an event delegation method, put the delegated event at the parent level $('.list').delegate('li','click',function () {
$(this).css({backgroundColor:'red'});
});
//Copy new li element to $li variable var $li=$('<li>9</li>');
$('.list').append($li);//Put the new element to the end of the ul subset. This is the node operation })
</script>
<body>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
</html>
Key code, event delegate function
$('.list').delegate('li','click',function () {
$(this).css({backgroundColor:'red'});
New nodes can also be used because there is event delegation
//Copy new li element to $li variablevar $li=$('<li>9</li>');
$('.list').append($li);//Put the new element to the end of the ul subset. This is the node operation
JQuery event list
The blur() element loses focus
The focus() element gets focus, which is actually the cursor in the input box, which is called getting focus.
Click() click
mouseover() mouse entry
mouseout() mouse exit
mouseenter() mouse enters, entry element does not trigger
mouseleave() mouse leaves, leaving the element does not trigger
hover() specifies handling functions for mouseenter and mouseleave events at the same time
ready()DOM has been loaded
Resize() browser window size has changed
scroll() scroll bar position changes
Submit() User Submit Form
Blur and focus events and submit
If you want to submit a form, form must write the submission address action, input must write name
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="/jquery/2.0.0/"></script>
<script type="text/javascript">
$(function () {
/*$('#input01').focus(function () {
alert('get focus');/!* is actually called getting focus when the cursor enters the box*!/
})*///What to do when you get focus $('#input01').focus();//This is when you enter the page, you get focus $('#input01').blur(function () {/*Default function when the focus is lost*/
alert('Lost focus');
})
$('#form1').submit(function () {
alert('submit');
})
})
</script>
<body>
<form action="">
<input type="text" name="dat01" >
<input type="text" name="dat02" >
<input type="submit" name="" value="submit" >
</form>
</body>
</html>
You can directly paste and verify.
Resize event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/jquery/2.0.0/"></script>
<script type="text/javascript">
$(window).resize(function () {
var $w=$(window).width();
=$w;
})
</script>
</head>
<body>
</body>
</html>
When the browser size changes, press the browser width to the title, and the resize event must be bound to the window.
Interested friends can use itOnline HTML/CSS/JavaScript code running tool http://tools./code/HtmlJsRunTest the above code running effect.
For more information about jQuery, please visit the special topic of this site:Summary of common jQuery events usage and techniques》、《Summary of commonly used plug-ins and usages of jQuery》、《Summary of jQuery operation json data skills》、《Summary of jQuery extension skills》、《Summary of common classic effects of jQuery"and"Summary of jquery selector usage》
I hope this article will be helpful to everyone's jQuery programming.