ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2019-09-11 20:42:05  阅读:20  来源: 互联网

标签:function 触发 console log 表单 事件 scDiv 鼠标



鼠标事件

默全局范围内 , this 执行window

	scDiv.onclick = function(){
			// this 指向scDiv
			console.log("单击")
		}
		点击事件
	// ondblclick 双击事件
		scDiv.ondblclick = function(){
			console.log("双击评论666!")
		}
		双击点击此函数对象时触发
	// onm ouseenter 鼠标移入标签范围
		scDiv.onmouseenter = function(){
			console.log("它来了!")
		}
		鼠标进入函数对象的范围内就执行
	// onm ouseleave 鼠标移除标签范围
		scDiv.onmouseleave = function(){
			console.log("它走了")
		}
		鼠标离开此函数时触发
			// onm ouseover 鼠标移入标签范围
		scDiv.onmouseover = function(){
			console.log(2222)
		}
		鼠标移入标签范围时触发
// onm ousedown 鼠标按下执行
		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操作)


标签:function,触发,console,log,表单,事件,scDiv,鼠标

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有