XHTML - <p (event)="..."> Paragraph Tag with Events
Definition
See <p> </p> Paragraph for basic information about this tag.
Events
onclick
onclick is an event that can be attached to the paragraph tag. If onclick is added to the paragraph then when the mouse is held over the paragraph and clicked, the instructions shown in onclick="..." will be carried out.
The first paragraph in the following example will change color when it is clicked. It will only change color once. If you want to see the effect again, you will have to reload the page.
When the text in the second paragraph is clicked an alert box will open.
Example
<p onclick="this.style.color='#00CC00';">When you click on any text in this paragraph it will change color.</p>
<p onclick="alert('You clicked the paragraph');">When you click on any text in this paragraph a javascript function is called that opens an alert window.</p>
Output
When you click on any text in this paragraph it will change color.
When you click on any text in this paragraph a javascript function is called that opens an alert window.
ondblclick
ondblclick is an event that can be attached to the paragraph tag. If ondblclick is added to the paragraph then when the mouse is held over the paragraph text and double clicked, the instructions shown in ondblclick="..." will be carried out.
The paragraph in the following example will change color when it is double clicked. It will only change color once. If you want to see the effect again, you will have to reload the page.
Example
<p ondblclick="this.style.color='#0000CC';">When you double click on the text in this paragraph it will change color.</p>
Output
When you double click on the text in this paragraph it will change color.
onmousedown, onmouseup
onmousedown and onmouseup are events that can be attached to the paragraph tag. If onmousedown is added to the paragraph then when the mouse is held over the paragraph text and clicked, the instructions shown in onmousedown="..." will be carried out. If onmouseup is added to the paragraph tag then when the mouse is held over the paragraph text and released, the instructions shown in onmouseup="..." will be carried out.
The paragraph text element in the following example will change color when the mouse is held down or released, but only if the mouse is over the text. Try pushing the mouse up or down on and off the bold text and moving the mouse between the click and release on and off the bold text.
Example
<p onmousedown="this.style.color='#FF0000';" onmouseup="this.style.color='#000000';">When you click on the text in this paragraph it will change color. When the mouse is released the color will change back.</p>
Output
When you click on the text in this paragraph it will change color. When the mouse is released the color will change back.
onmouseover, onmouseout
onmouseover and onmousedown are events that can be attached to the paragraph tag. If onmousedown is added to the paragraph tag then when the mouse is moved over the paragraph text, the instructions shown in onmouseover="..." will be carried out. If onmouseout is added to the paragraph tag then when the mouse is moved off the paragraph text, the instructions shown in onmouseout="..." will be carried out.
The paragraph text in the following example will change color when the mouse is moved on and off the text.
Example
<p onmouseover="this.style.color='#FF00FF';" onmouseout="this.style.color='#000000';">When you move the mouse over the text in this paragraph it will change color. When the mouse is moved out of the paragraph text the color will change back.</p>
Output
When you move the mouse over the text in this paragraph it will change color. When the mouse is moved out of the paragraph text the color will change back.
Other events
These events can also be attached to a paragraph tag. No examples are provided:
- onmousemove
- onkeypress
- onkeydown
- onkeyup
BestWebTutorials.com is a free service of CrystalClearWeb.net. You can help us keep providing free tutorials and information by:
- Link to us
- Tell a friend
- Correct any you might find
- Make for improvement
- Make a donation
BestWebTutorials.com attempts to post accurate information on this site, but we cannot guarantee that errors do not sometimes occur. The use of code examples from this site in any other site is at the user's own risk. We cannot guarantee that our code might not be in conflict with code written by others, or that our code is fit for other uses.
For further information please review our Terms of Use and Privacy Policy.
Copyright 2005-2008 CrystalClearWeb.net. All rights reserved.
