Default behavior
For example, the default behavior of a link label is jump, and the default behavior of submission button is submission, which prevents default behavior from interacting with the user before default behavior occurs, and chooses what behavior to perform after obtaining the user's choice.
The ways and codes of different browsers to prevent default behavior:
IE: event.returnValue = false;
FF: e.preventDefault();
Two browser compatible code: return false;
Sample code:
Prevent form submission:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function login () {
var flag = confirm("Confirmation of submission?");
if (flag) {
//By default, do nothing
} else{
//Default behavior to prevent form submission
//Invalid for IE11
// if(document.attachEvent){
// event.returnValue = false;
// }else{
// //ff
// e.preventDefault();
// }
//Prevent default jumps, flag==false
return flag;
}
}
</script>
</head>
<body>
<form action="Prevent hyperlink jumps.html" method="post" onsubmit="return login();">
<input type="submit" value="Submission"/>
</form>
</body>
</html>
//Prevent hyperlink jumps:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function test () {
var flag = confirm("Do you confirm jumping Baidu?");
if (flag) {
//By default, do nothing
} else{
//Prevent default jumps
//Invalid for IE11
// if(document.attachEvent){
// event.returnValue = false;
// }else{
// //ff
// e.preventDefault();
// }
return false;
}
}
</script>
</head>
<body>
<a href="http://www.baidu.com" onclick="return test();">Jump to Baidu</a>
</body>
</html>
//Stop popping up the right-click menu:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function () {
document.oncontextmenu = function (e) {
//Deter default
//Invalid for IE11
// if(document.attachEvent){
// event.returnValue = false;
// }else{
// //ff
// e.preventDefault();
// }
return false;
}
}
</script>
</head>
<body>
//Default Display Content
</body>
</html>
Event object
Event object: A specific description of the current event, encapsulated in the event object, similar to the exception object.
1. The way xhtml is bound
1.IE click produces an implicitly created object event, which is a global variable that can be accessed through window.event or event.
2.FF Firefox does not create objects implicitly. It needs to pass in an event actively, and the parameter is best expressed in e. (Because IE compatibility problem, if it starts, it will conflict if it opens with IE.)
Sample code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function test (e) {
var eventObject = getEventObject(e);
alert(eventObject);
}
function getEventObject (e) {
var eventObject = null;
if(document.attachEvent){
eventObject = event;
}else{
eventObject = e;
}
return eventObject;
}
</script>
</head>
<body>
<input type="button" name="btn1" id="btn1" value="Click events(IE or FF)" onclick="test(event);"/>
<!--<input type="button" name="btn2" id="btn2" value="Click events(FF)" onclick="return test2(e);"/>-->
</body>
</html>
2. dom binding mode
1.IE is the same as the previous xhtml binding.
2.FF also implicitly creates an event object, except that the event object is not a global variable, which is passed as the first parameter of the event handler function.
Sample code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function test (e) {
var eventObject = getEventObject(e);
alert(eventObject);
}
function getEventObject (e) {
var eventObject = null;
// if(document.attachEvent){
// eventObject = event;
// }else{
// eventObject = e;
// }
//This can also be done.
eventObject = e || event;
return eventObject;
}
window.onload = function () {
//Binding events to btn1
var btn1 = document.getElementById("btn1");
btn1.onclick = test;
}
</script>
</head>
<body>
<input type="button" name="btn1" id="btn1" value="Event object" />
</body>
</html>
Event source:
①(IE)eventSource = event.srcElement;
(FF) eventSource = e.target;
(2) Compatibility: var eventSource = e.srcElement || e.target;
Three, this
- In a normal function, point to a window object, for example: this.a equals window.a equals a
- Used in event handling functions, it points to the event source, for example: test(this);
- Used in objects, custom classes, pointing to the current object.
Simplified statement:
To begin with a method name, similar to jQuery, for example: functionid(){
return document.getElementById("id");
}
The difference between innerHTML and innerText:
Distinction 1: HTML code snippets within innner HTML, including text and labels.
innerText contains only text, not labels.
Distinction 2: Inner HTML browser compatible.
innerText can only be used by IE, FF does not support it.
Firefox needs to use the textContent attribute if it wants to get the internal text.
// Compatibility code: var msg = div.innerHTML || div.textContent;
In addition: outerHTML includes the div tag itself and the internal HTML code. outerText and innerText have the same effect.
