A. keydown () keyboard press event B. Weak keyup () Keyboard Events C. keypress () is similar to keydown (), but there is a difference <Body>
<Input type = "text" value = "text"/>
<Script>
$ ('Input'). keydown (function (){
Alert ($ (this). val ());
}); /* $ ('Input'). keyup (function (){
Alert ($ (this). val ());
});*/ /* $ ('Input'). keypress (function (){
Alert ($ (this). val ());
});*/
</Script>
</Body>
Form Events
Focus () Get focus events Blur () loss of focus events Change () form value change event Select () event when a form element is selected, which can only be used for Input [text] And textarea Submit () Form submission event |
<Body>
<! -- <Input type = "text" name = "" id = "" value = "11111" type = "codeph" text = "codeph"/> -->
<Input type = "password" name = "" id = "" value = "11111"/>
<! -- <Input type = "file" name = "" id = "/> -->
<Textarea name = "" id = "" cols = "30" rows = "10"> 1231231212213 </textarea>
<Span style = "display: none"> asdasdfsdf </span>
<Script>
/* $ ('Input'). focus (function (){
$ ('Span '). show ();
}); $ ('Input'). blur (function (){
$ ('Span '). hide ();
});*/
// When the value in the element with the focus event changes and the blur event is triggered, a change event is completed.
/* $ ('Input [type = file] '). change (function (){
$ ('Span '). show ();
});*/ /* $ ('Input'). select (function (){
$ ('Span '). show ();
});*/ /* $ ('Textea '). select (function (){
$ ('Span '). show ();
});*/
</Script>
</Body>
Browser events
A. resize () browser window size change event B. events that occur when the scroll () browser scroll bar is moved C. error () 1.8 discarded |
<Body style = "height: 3000px">
<Script>
/* $ (Window). resize (function (){
Alert ('browser window changed! ');
});*/ $ (Window). scroll (function (){
$ ('Body'). append ('<div> offset of the scroll bar position </div> ');
});
</Script>
</Body> Event object
Event. pageX get the X axis coordinate of the mouse relative to the document Event. pageY get the Y axis coordinate of the mouse relative to the document Event. preventDefault () blocks default browser behavior Event. stopPropagation () prevents bubbling Event. which listens for keyboard input and mouse operations Others |
<Body style = "height: 3000px; width: 3000px">
<Input type = "text" style = "position: fixed; top: 10px; left: 10px"/>
<Script>
$ (Document). click (function (e ){
Var x = e. pageX;
Var y = e. pageY;
$ ('Input'). val (x + ',' + y );
});
</Script>
</Body> <Body>
<Form action = "http://www.zixue.it" id = "form1">
<Input type = "text" value = "11111" name = "username"/>
<Input type = "password" value = "22222" name = "password"/>
<Input type = "submit" value = "submit"/>
</Form>
<Script>
$ ('# Form1'). submit (function (e ){
Alert ('submission successful !! ');
E. preventDefault ();
});
</Script>
</Body> How to bind and remove events
Bind () binding event Unbind () Remove event On () binding event Off () Remove event One () executes an event and then destroys it. Although delegate () has not been abandoned, it is officially recommended to use on () instead. Undelegate () is replaced by off |
<Body style = "height: 3000px">
<P> This is a P tag. </p>
<Script>
/* $ ('P'). click (function (){
Alert ($ (this). text ());
});*/ /* $ ('P'). bind ('click', function (){
Alert ($ (this). text ());
});
$ ('P'). mouseover (function (){
Watermark (this).css ('background', 'red ');
}); $ ('P'). unbind ('click mouseover ');*/ /* $ ('P'). one ('click', function (){
Alert ($ (this). text ());
});*/ /* $ ('Body'). delegate ('P', 'click', function (){
$ (This). append ('<p> I am a newly added P tag <p> ');
});*/ $ ('Body'). on ('click', 'P', function (){
$ (This). append ('<p> I am a newly added P tag <p> ');
}); </Script>
</Body>
<Body>
<P> I am a P tag </p>
<Script>
// The first developer adds a click event to the p tag so that its background color turns red.
/* $ ('P'). click (function (){
Watermark (this).css ('background', 'red ');
});*/ // The second developer adds a click event to the P tag so that its text color turns blue
/* $ ('P'). click (function (){
Watermark (this).css ('color', 'blue ');
});*/ // The third developer does not want the P tag to add a red background when it is clicked, but only wants to change the text color in the P tag to blue, then he used the unbind method to remove the click event on the P tag.
/* $ ('P'). unbind ('click ');*/ $ ('P'). bind ('click. background ', function (){
Watermark (this).css ('background', 'red ');
}); $ ('P'). bind ('click. color', function (){
Watermark (this).css ('color', 'blue ');
}); $ ('P'). unbind ('click. color ');
</Script>
</Body>
|
