1 HTML event attributes
Global Event Properties: HTML 4 adds the ability to make events trigger actions in the browser, such as starting JavaScript when the user clicks on an element.
a. Window event attribute, commonly used is onload for events triggered by window objects (applied to the <body> tag).
b. Form event, an event triggered by actions in an HTML form (applied to almost all HTML elements, but is most commonly used in form elements): the commonly used are onblur, onfocus, onselect, and onsubmit.
c. keybord event
Events, events triggered by mouse or similar user actions: commonly used are onclick, onmouseover, and onmouseout.
e. Media events, events triggered by media (such as video, images, and audio) (applicable to all HTML elements, but are common in media elements such as <audio>, <embed>, <img>, <object>, and <video>).
2 Event handling function
The structure of a document is mixed with the behavior of the document, for example:
<a href="images/" onclick="showPic(this);return false;">
The structure of a document is separated from the behavior of the document, for example:
= function() { showPic(whichpic); return false; }
3 Shared onload events
Execute a piece of JavaScript immediately after the page is loaded: <element onload="script">. What if you want to execute multiple scripts after the page is loaded? The solution is:
= function() {
script1;
script2;
script3;
......
}
However, this method is not flexible. If the scripts that need to be loaded are constantly changing, the code must also change. A better way is:
function addLoadEvent(func)() {
var oldonload = ;
if (typeof !="function") {
= func;
} else {
= function() {
oldonload();
func;
}
}
}
4 Dynamically create html tags
a. Two traditional methods
Methods and innerHTML attributes are neither methods and attributes supported by standardized DOM (W3C standard). They are both proprietary attributes of html.
Methods can easily insert element tags, especially strings. But it is contrary to the principle that web design should separate behavior (script) and structure (html tags).
<!DOCTYPE html>
<html>
<head>
<meta chaset="utf-8" />
<title></title>
<body>
<script>
<!--It is easy to insert element tags,Especially strings.But it should behave with web design(script)and structure(htmlLabel)The principle of separation-->
("<p>This is inserted by </p>");
</script>
</body>
</head>
</html>
innerHTML is suitable for inserting a large piece of HTML content into a web page, such as:
<div >
</div>
= function() {
var testdiv = ("testdiv");
= "<p>This is inserted by <em>innerHTML</em></p><en>";
}
b. More refined dom method - get dom node tree and change dom node tree
Search node (element): and
Create node (element):,
Append node (element):
Insert (before inserting one node into another):(newElement, targetElement)
Very useful attributes: (get parent node), (get brother node)
The effect of inserting HTML with innerHTML attribute above can still be achieved using the dom method:
= function() {
var testdiv = ("testdiv");
var para = ("p");
(para);
var context1 = ("This is inserted by ");
(context1);
var emphasis = ("em");
(emphasis);
var context2 = ("method of domcore");
(context2);
}
Use the dom method above to write a function after inserting a node into another node:
function insertAfter(newElement, targetElement) {
var parent = ;
if ( == targetElement) {
(newElement);
} else {
(newElement, );
}
}
The above is all the content of this article. I hope that the content of this article will help you study or work. I also hope to support me more!