In the previous dom operation, JavaScript's introduction to event processing was mentioned. Since different browsers handle events differently, this brings unnecessary trouble to developers, and jQuery conveniently solves this problem.
1.Binding event listening
（https:///article/) gave a detailed introduction to the monitoring of events, saw the difference between iE and DOM standard browsers treat event monitoring, and the execution order and method of multiple listening events are also different.
In jQuery, event binding is equivalent to the attachEvent() of IE browser and the addEventListener() of the standard DOM. As shown in the following example:
<script type="text/javascript">
$(function() {
$("img")
.bind("click", function() {
$("#show").append("<div>click event 1</div>");
})
.bind("click", function() {
$("#show").append("<div>click event 2</div>");
})
.bind("click", function() {
$("#show").append("<div>click event 3</div>");
});
});
</script>
<img src="">
<div ></div>
The above code binds three click listening events to img.
The general syntax of bind() is
bind(eventType,[data],Listener)
Where, eventType is the type of event, which can be blur/focus/load/resize/scroll/unload/click/dblclick/onmousedown/mouseup/onmouseover/onmouseover/onmouseout/mouseenter/onmouseleave/change/select/submit/onkeydown/keypress/keyup/error
data is an optional parameter, used to pass some special data for listening functions. The listener is an event listening function, and the above example uses anonymous function
For multiple event types, if you want to use the same listening function, you can add it to the eventType by colleagues, using space separation between events.
$(function() {
$("p").bind("mouseenter mouseleave", function() {
$(this).toggleClass("over")
})
});
Other special event types can directly use the event name as the binding function and accept parameters as the listening function. For example, used repeatedly
$("p").click(function(){
//Add click event listening function
})
Among them, the general syntax is
eventTypeName(fn)
The eventTypeName that can be used includes
blur/focus/load/resize/scroll/unload/click/dblclick/onmousedown/onmouseup/mousemove/mouseover/mouseout/change/select/submit/
keydown/keypress/keyup/error, etc.
In addition to bind(), jQuery also provides a very practical one() method to bind events. This method will be automatically deleted after departure once and will no longer take effect.
//First create 10 <div> blocks
for (var i = 0; i < 10; i++)
$().append($("<div>Click<br>Me!</div>"));
var iCounter = 1;
//Each with one adds click event
$("div").one("click", function() {
$(this).css({
background: "#8f0000",
color: "#FFFFFF"
}).html("Clicked!<br>" + (iCounter++));
});
For example, in the example above, create 10 divs and bind a function event to each div. When the div block is clicked, the function will be executed once and will no longer be executed.
2. Remove event listening
jQuery uses unbind() to remove events. This method can accept two optional functions or set any parameters. For example, the following code represents removing all events of the div tag and all click events of the P tag.
$("p").unbind("click");
$("div").unbind();
If you want to remove a specified event, you must use the second parameter of the unbind(eventType, listener) method, for example:
var myFunc = function() {
//Supervisor function body
};
$("p").bind("click",myFunc);
$("p").unbind("click",myFunc);
For example, the following code
<script type="text/javascript">
$(function() {
var fnMyFunc1; //Function variables
$("img")
.bind("click", fnMyFunc1 = function() { // Assign to function variables
$("#show").append("<div>click event 1</div>");
})
.bind("click", function() {
$("#show").append("<div>click event 2</div>");
})
.bind("click", function() {
$("#show").append("<div>click event 3</div>");
});
$("input[type=button]").click(function() {
$("img").unbind("click", fnMyFunc1); //Remove event listening myFunc1
});
});
</script>
<img src="">
<input type="button" value="Remove Event 1">
<div ></div>
For example, the above code adds the anonymous function when binding the fnMyFunc1 function bind(), and assigns the anonymous function to it as the name of the unbind() function call.
3. Pass the event object.
https:///article/The concept of objects is introduced and the common properties and methods of event objects are analyzed. You can see that there are many differences between different browsers. In jQuery, the object without time is passed to the event listening function through the only method.
<script type="text/javascript">
$(function() {
$("p").bind("click", function(e) { //Pass the event object e
var sPosPage = "(" + + "," + + ")";
var sPosScreen = "(" + + "," + + ")";
$("span").html("<br>Page: " + sPosPage + "<br>Screen: " + sPosScreen);
});
});
</script>
<p>Click here</p>
<span id=""></span>
The above code binds the mouse click event listening function to p and passes the event object as a parameter, thus obtaining the coordinate value of the mouse event trigger point.
For the properties and methods of events, the most important job of jQuery is to solve the compatibility problems for developers, commonly used properties and methods.
Attribute Description
altKey Press the alt key to ture, otherwise it will be false
ctrlKey Press ctrl key to ture, otherwise it will be false
shiftKey Press shift key to ture, otherwise it will be false
keyCode For keyup and keydown events, return the value of the keypress (that is, the values of a and A are the same, both 65)
pageX, pageY The mouse is in the client's position, not including toolbars, scrollbars, etc.
relateTarget
During a mouse event, the mouse pointer enters or leaves the element.
screenX,screenY The position of the mouse on the entire screen.
target Element/object that causes the event
type The name of the event, such as click, mouseover, etc.
which The unicode value of the key in the keyboard event, and the mouse button represents the mouse button (1 left key, 2 middle key, 3 right key)
stopPropagation() prevents events from bubble upwards.
preventDefault() blocks event default behavior
The above is the entire content of this article. The explanation is very detailed. I hope you like it.