事件对象及table选项卡

事件对象及table选项卡

this指针 指向

• 在普通函数外部调用的时候

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

• 在普通内部调用的时候

	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()

• 和new 构造器结合使用

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

• 对于自执行匿名函数 而言 this的指向 window
  当不希望this指向发生改变的时候，可以定义变量来保存this(例如：拖拽中使用)

event对象

哪来的？

在事件发生时，负责处理事件的函数，会接受到一个event对象
浏览器负责处理事件， js负责告诉浏览器 如何处理

干嘛用的？

用来存储 事件源的信息 例如： 鼠标的位置 键盘的编码
将这些信息提供给开发者， 便于开发者进行编码

event对象 的属性

• 关于event的兼容写法
• ev.target：事件源
• ev.button：返回鼠标被按下的那个键
• ev.offsetX：鼠标在元素上 X轴的位置
• ev.offsetY ： 鼠标在元素上 Y轴的位置
• ev.clientX ： 鼠标 在浏览器可视区域 x轴上的位置(左边距)
• ev.clientY ：鼠标 在浏览器可视区域 y轴上的位置(上边距)
• ev.scrollX：表示当前元素从原点水平滚动的像素数
• ev.scrollY ：表示当前元素从原点垂直滚动的像素数
• ev.keyCode ：返回键盘的编码，以此来确定是哪个键位

table选项卡

	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";
			}
		}
	}

来源：CSDN

作者：Mrqin-shen

链接：https://blog.csdn.net/qinshensx/article/details/104117109