Objects
Create var myObject = {}; / * Variables declared object literal * / add value myObject.name = "Jener"; myObject.age = 25;
Code format var person = {name: "zhangsan", age: 25, say: function () {alert ( "speak Chinese");}}
Access dot syntax, person.name; person.say ();
The entry function js window.onload = function () {}
Function has a certain function set by the function code body or when the event-driven code blocks reusable executed when it is invoked.
The basic structure function functionname () {execute code} function functionname (parameter)} {code execution
Function returns with a value / * function sum (a, b) {return a + b;} sum (10,5); // executes this program words, sum (10,5) became 15; var c = sum (10,5); alert (c); * /// c 15
JavaScript variable life cycle life cycle variables initialized when it is declared. Local variables destroyed after the function is finished. After the destruction of the global variable list Close
Closure: internal function means can use an external variable function
js event
onclick event click event ondbclick event, double-click event
When a page onload event will begin loading the first call this method. This method can only write in the <body> tag
onchange event is triggered when the content changes. Available for the text boxes, list boxes and other objects, in response to the event generally used to modify other user brings change operation content.
Description: When users enter text into a text box, does not trigger onchange event, only after the user input, other than the area click the text box,
The text box loses focus when the event is triggered if a drop-down box, select ended after triggering.
onblur events onfocus and onblur events events, the current trigger the event when the element loses focus. Corresponding onfocus event is: get focus events
onscroll event window scroll event: call a function when the page is scrolled. This event is written on the outside of the method, and the function name without parentheses, for example window.onscroll = move
Way function move () {alert ( "call the page scrolling");} window.onscroll = Move;
Mouse-related events onmousemove mouse moves over the scope of an object, trigger event function is called. Note: In the same area, as long as the mouse to move once again trigger event .
When the mouse leaves an object onmouseout range, trigger event function is called.
Fires when the mouse moves over the div element onmousemove event.
mouseleave event is only triggered when the mouse pointer moves out of the div element.
Onmouseout event is triggered when the mouse pointer out of the div element and leave the sub-elements (p and span).
onmouseover mouse moves over the scope of an object, trigger event function is called. Note: In the same area, no matter how moving only trigger a function.
onmouseup trigger event when the mouse release
Trigger event when the mouse button is pressed when onmousedown
Add an event to multiple elements through the cycle
<body>
<div class="one">111</div>
<div class="one">222</div>
<div class="one">333</div>
<div class="one">444</div>
</body>
</html>
<script type="text/javascript">
var one = document.getElementsByClassName("one");
for(var i = 0;i<one.length;i++){
one[i].onclick = function(){
alert(this.innerHTML);
}
}
</script>
By listening event function addEventListener () method
无参数
<button id="myBtn">点我</button>
<script>
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
}
</script>
有参数
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
var p1 = 5;
var p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
myFunction(p1, p2);
});
function myFunction(a, b) {
var result = a * b;
document.getElementById("demo").innerHTML = result;
}
</script>
removeEventListener() 方法
<body>
<div id="myDIV"> div 元素添加了 onmousemove 事件句柄，鼠标在桔红色的框内移动时会显示随机数。
<p>点击按钮移除 DIV 的事件句柄。</p>
<button onclick="removeHandler()" id="myBtn">点我</button>
</div>
<p id="demo"></p>
<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = Math.random();
}
function removeHandler() {
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>