The event object and table tab

The event object and table tab

this pointer points

• When an ordinary function of external calls

	var a = 20;//   相当于   window.a  = 20
	// alert(this); //  指向window
	alert(this.a); // 输出20,  指向 window.a

• When a common internal call

	function text(){
		var a = 10;
		// alert(a);
		// alert(this.a);  // 相当于   window.a
		this.a = 50;
		this.b = function() {
        	console.log(this);
     	}
	}
	// text(); // text()   相当于  window.text()

• And new constructors combination

	var obj1 = new text();
	var obj2 = new text();
	var c = obj1.b;
	console.log(obj2.a);
	console.log(c());

• For self-executing anonymous function this point window
  when you do not want this point to change the time, you can define a variable to hold this (for example: use drag)

event objects

Where's?

When an event occurs, the function responsible for handling the incident, will receive an event object
browser handles events, js responsible for telling the browser how to deal with

Why use?

Used to store information such as Event Source: keyboard mouse position encoding
this information available to the developer, for developers to encode

Event object properties

• About event compatible wording
• ev.target: Event Source
• ev.button: return the mouse button is pressed
• ev.offsetX: location of the mouse on the element X axis
• ev.offsetY: location of the mouse on the element Y axis
• ev.clientX: mouse visible area of ​​a browser in the x-axis (left margin)
• ev.clientY: mouse (top margin) in a viewable area of ​​the browser the location of the y-axis
• ev.scrollX: represents the number of rolling elements from the origin of the current horizontal pixels
• ev.scrollY: it represents the current element number from the origin of the vertical pixel rolling
• ev.keyCode: Returns the encoding of the keyboard, in order to determine which keys

table tab

	window.onload = function(){
		//获取页面元素
		var but = document.getElementsByClassName("btn");
		var box = document.getElementsByClassName("box" );
			
		//方法1： 
		but[0].onclick = function(){
			//1.将所有div隐藏
			for(var i = 0; i < box.length; i++){
				box[i].style.display = "none";
			}		
			//2.将指定的元素显示
			// this: 在事件中使用时，指向这个事件的调用者
			box[0].style.display = "block";
		}
		//优化方法：
		// 1. 变量j 无法获取循环过程中的值，只能获取到最后的结果
		// 2. 使用时，无法直接找到j的新保存地址
		for(var j = 0 ; j < but.length; j++){
			//利用元素的空属性，来保存变量j
			but[j].index = j;
			but[j].onclick = function(){
				//1.将所有div隐藏
				for(var i = 0; i < box.length; i++){
				//	box[i].index = i;
					box[i].style.display = "none";
				//	console.log( this.index);
				}
				//2.将指定的元素显示
				// this: 在事件中使用时，指向这个事件的调用者
				box[this.index].style.display = "block";
			}
		}
	}