事件类型

事件类型

onload 推迟加载

当页面 ( html,图片之类 ) 加载完成后，执行的方法
该方法用于，包裹所有内联js代码

• 解决js获取html标签时，标签还没有加载的情况
• 先加载页面，再加载功能。 能够提高用户体验

	window.onload = function(){
		//这里存放 所有内联的js代码
		//以保证,先加载页面,再加载js功能	
	}

onblur 失去焦点

当input文本框失去焦点时触发

	var ipt1 = document.getElementById("ipt");
	// onblur： 失去焦点
	ipt1.onblur = function(){
		console.log("我失去了焦点");
	}

onfocus 获得焦点

	// onfocus: 获得焦点
	ipt1.onfocus = function(){
		console.log("我获得了焦点");
	}

onselect 选中文本时触发

	// onselect: 选中文本时触发
	ipt1.onselect = function(){
		console.log("我被选中了");
	}

onchange 在内容发生改变是触发

	// onchange: 在内容发生改变是触发
	ipt1.onchange = function(){
		console.log("我被改了");
	}

onreset 重置时触发

	// onreset: 重置时触发
	res.onreset = function (){
		console.log("我被重置了");
	}

onclick 鼠标的单击事件

方式一： 获取元素，在js中给元素绑定（直接赋值使用，不需要函数名）

	var btn = document.getElementsByClassName("ipt")[0];
	
	function randomColor(){
		return Math.floor(Math.random()*(250-200)+200);
	}
	btn.onclick = function(){
		box.style.backgroundColor = "rgb(" + randomColor()
		 + "," + randomColor() + "," + randomColor() + ")";		
	}

方式二： 定义好函数， 在html标签中 绑定函数

<button class=“btn” οnclick=“myClick()”>按钮</button>

	function myClick(){
		box.innerHTML = "啊~~";
	}

ondblclick 双击时触发

	// ondblclick: 双击时触发
	but.ondblclick = function(){
		console.log("我被双击了");
	}

鼠标的移入移出类 事件 （该名称纯属自定义）

	button:hover{
		/*cursor 该属性表示鼠标的样式*/
		/*pointer : 鼠标样式为小手*/
		cursor: pointer;
	}

	// 鼠标移入指定元素
	box[0].onmouseover = function(){
		box[1].style.backgroundColor = "rgb(" + randomColor() 
		+  "," + randomColor() + "," + randomColor() + ")";
	}
	// 鼠标移出指定元素
	box[0].onmouseout = function(){
	    box[2].style.backgroundColor = "rgb(" + randomColor()
	     + "," + randomColor() + "," + randomColor() + ")";
	}

onmousedown 指定元素上 按下时触发

除非情景 需要 按下 和抬起各执行一个功能，否则，不使用
因为按下就触发，没有给用户改错的机会

	// 元素上按下时触发
	box[1].onmousedown = function(){
		box[1].style.width = 200 + "px";
	}
	// 元素上按下之后 抬起时触发		
	box[2].onmouseup = function(){
		box[2].style.height = 200 + "px";
	}

键盘事件

• onkeydown: 用户按下键位的时候触发
  不松开，事件一直触发
  当连续触发时；第1次和第2次之间有明显的时间间隔（防止误操作，刻意增加的间隔）
• onkeyup : 用户抬起键位时
• onkeypress: 用户按下该键位 再抬起时触发
• event对象： 表示事件源本身
  我们在使用的时候，以形参的形式来使用，实参由事件本身传递
  使用时，一定符合见名知意： 例如： event ev evt e

	ipt[0].onkeypress = function(ev){		
		// keyCode： 键盘编码
		console.log(ev.keyCode);
		// enter 回车键的 键盘编码为 13
		// 数字的keycode编码为 48 ~ 57
		if(ev.keyCode == 13){						
			//focus():   这个方法，谁调用，就将焦点赋给谁					
			ipt[1].focus();
		}
	}