鼠标事件 键盘事件 表单元素事件

鼠标事件

默全局范围内 , this 执行window

	scDiv.onclick = function(){
			// this 指向scDiv
			console.log("单击")
		}
		点击事件

	// ondblclick 双击事件
		scDiv.ondblclick = function(){
			console.log("双击评论666！")
		}
		双击点击此函数对象时触发

	// onmouseenter 鼠标移入标签范围
		scDiv.onmouseenter = function(){
			console.log("它来了！")
		}
		鼠标进入函数对象的范围内就执行

	// onmouseleave 鼠标移除标签范围
		scDiv.onmouseleave = function(){
			console.log("它走了")
		}
		鼠标离开此函数时触发
			// onmouseover 鼠标移入标签范围
		scDiv.onmouseover = function(){
			console.log(2222)
		}
		鼠标移入标签范围时触发

// onmousedown 鼠标按下执行
		scDiv.onmousedown = function(){
			console.log("鼠标按下了")
		}
		鼠标按下时触发 

// 鼠标弹起执行
		scDiv.onmouseup = function(){
			console.log("鼠标弹起执行")
		}
		鼠标松开时触发
		

事件类型不带on   执行的事件的函数
	plDiv.addEventListener("mouseenter", function(){
			
			// this指向标签对象
			console.log(this)
			console.log("评论！")
		})
		

键盘事件

onkeydown 当键盘某个键被按下时触发,如果不松开 一直执行
document.body.onkeydown = function(e){
			// e事件对象获取按下的键
			// console.log(e.key)
			// console.log(e.keyCode)
			// 可以通过e.key或e.keyCode判断用户按下的是哪个键
			// if (e.keyCode == 13){
			// 	
			// 	console.log("回车")
			// }
			console.log(e.key,e.keyCode)

onkeypress 键盘按下不松开会重复执行

键盘松开某个键时触发
.body.onkeyup = function(e){
			console.log("按键弹起了")
		}

表单元素事件

onfocus 表单元素被选中,成为焦点时触发  
userInput.onfocus = function(e){
			console.log(e)
			console.log("获取焦点了~")
		}

onblur  表单元素失去焦点时触发
	userInput.onblur = function(e){
			console.log("输入框失去焦点状态！")
		}

onchange() 输入框内容被修改,失去焦点时触发
	userInput.onchange = function(e){
			
			console.log(e.target.value)
		}

oninput   输入框内容一旦发生修改 立即执行
数据的双向绑定(VUE框架中一个重要的DOM操作)