Home > Developer > Web Develop
1,dom loading
$(document).ready()And the difference between window.onload (). Although they are functionally similar, there are differences in the timing of implementation. The Window.onload () method is executed when all the elements in the Web page (including the associated file of the element) are fully loaded into the browser. JavaScript can now access any element in the Web page. The $(document).ready() time handlers that are registered through the method in jquery can be called when the DOM is fully ready. All of the elements in the Web page are accessible to jquery, but this does not mean that the associated files for these elements have been downloaded. To solve this problem, you can use the other page load method in jquery, the load () method, which binds a handler function in the onload () event of the element, and if the handler is bound to the Window object, it will be in all content (including window, frame, Objects and pictures) are triggered when the load is complete. If the handler is bound to an element, it is triggered when the content of the element is loaded.
2, event binding
After the document is loaded, if you intend to do something for the element binding event, you can use the bind () method to match the binding of the element for a particular event, the format of the bind () method is as follows:
bind(type [, data],fn);
The parameters are described as follows:
The 1th parameter is the event type, and the event type includes: Blur, focus, load, resize, scroll, unload, click, DblClick, MouseDown, Mouseup,mousemove, MouseOver, MO Useout, MouseEnter, MouseLeave, change, select, Submit, KeyDown, KeyPress, error etc., of course, you can also use a custom type.
The 2nd parameter is an optional parameter, which is the extra data object passed to the event object as the value of the Event.data property.
The 3rd object is the handler function used to bind.
The sample code is as follows:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" ><html><head><meta http-equiv="Content-type" Content="text/html; charset=gb18030 "><title>JQuery Test</title><script type ="text/javascript" src ="Jquery.js" ></script><script type ="Text/javascript">$ (document). Ready (function(){ $ ("P"). Bind ("click", function(){var content = ' <div id = ' content ' > Eat Zongzi tonight!!! </div> "; $ ("Body"). Append (content); $ (this). Next (). Show (); });}); </script></head><body><p>What are you going to eat this evening?</P></body></html>The results of the operation are as follows:
The shorthand binding event code example is as follows:
Stop event bubbling
Stopping event bubbling can prevent the event handlers of other objects in the event from being executed. The Stoppropagation () method is provided in jquery to stop event bubbling.
The jquery sample code is as follows:
$("span").bind("click",function(event){//do something event.stopPropagation();})
block default behavior
Elements in a Web page have their own default behavior, for example, when a hyperlink is clicked, the form commits after clicking the Submit button, and sometimes the default behavior of the element needs to be blocked.
The Preventdefault () method in jquery can block the default behavior of an element
The JQuery sample code is as follows:
$("#submit").bind("click",function(event){//do something event.preventDefault();})
If you want to stop bubbling and the default behavior on the event object at the same time, you can return false in the event handler. In the example of the form, you can put
event//阻止默认行为
instead, return false;
You can also put the event bubbling example in the
event//停止事件冒泡
instead, return false;
2, properties of the event object
(1) Event.type
The function of this method is to get the type of event.
(2) Event.preventdefault ()
The function of this method is to block the default method of the element
(3) Event.stoppropagation ()
The function of this method is to prevent event bubbling
(4) Event.target
The function of this method is to get the element that triggered the event.
(5) Event.relatedtarget
The function of this method is to get the relevant element of the triggering event.
(6) Event.pagex and Event.pagey
The function of this method is to get the cursor relative to the page x and y coordinates
(7) Event.which
The function of this method is to get the keys in the mouse click event to get to the left, right mouse button, and get the keyboard in the keyboard event.
Get the mouse's left, middle, and right-click JQuery Sample code as follows:
$("a").mousedown(function(event){alert(event.which); //1 ＝鼠标左键， 2=鼠标中键 3=鼠标右键})
The jquery sample code for getting keyboard keys is as follows:
$("input").keyup(function(event){alert(event.which); //获取键盘的按键})
3, removing events
First, add a button to remove the event on the page
<button id ="delAll">删除事件</button>
The jquery sample code for removing events is as follows:
$("#delAll").click(function(event){$("btn").unbind("click");})
The syntax structure of the Unbind () method is as follows:
unbind([type],data)
The first parameter is the event type, and the second is the handler to remove, as described below:
(1) If no parameters are removed, all bound events are deleted.
(2) If the event type is supplied as a parameter, only the binding event of that type is deleted
(3) If the handler function of the binding is taken as the second parameter, only the handler function of the specific event will be deleted.
In addition, jquery provides a simple way of one () method for triggering only one time and then immediately unbinding it. The one () method can bind the handler function to an element. When the handler is triggered once, it is deleted immediately. That is, on each object, the processing function executes only once.
The one () syntax format is as follows:
one(type[,data],fn)
The jquery sample code executes as follows:
$("#test").one("click",function(){//do something})
jquery development of jquery event One
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
