原生js ---选择器的使用,键盘事件 --03

选择器的使用

我们想给一些元素动态添加样式的时候，我们要做的首先是 选中目标元素，再对目标元素进行响应的操作，因此如何选择元素就成了至关重要的一步。
给button按钮添加事件的几种方法
<button class="click" id ="text">click</button>

//根据标签名选取 当你的网页中有多个按钮时 它选中的是元素的集合也就是数组，因此当你给特定的元素添加时 请注意写上下标
document.getElementsbyTagName("button").onclick = function(){}
//根据类名选取  同理上面的要求
document.getElementsByClass("click").onmouseover = function(){}  //鼠标在按钮上面的事件
//根据id进行选择
document.getElementbyId("text").onmouseleave = function(){} //鼠标离开按钮触发的事件
//js提供通用的方法
document.querySelector(".click").addEventListener("click",funcction(){})//
document.querySelector("#click")
document.querySelector("button")
//都可以 不过它只会在dom树上找到从上到下的第一个元素.
//找到所有的元素方法
document.querySelectorAll("button"); //找到的是数组

总结：

1. 根据标签名和根据类名查找的是数组的形式,根据id找到的是单个元素(id唯一)
2. querySelector其中写的选择器可以参考css选择器的书写样式

常用的事件

onchange 事件
在表单事件中我们输入框里面的内容发生改变时所触发的事件

<input type="text" name="" id="" value="" />	
<script type="text/javascript">
	var  input= document.querySelector("input[type='text']");
	input.onchange = function(){
		console.log("我要做事了");
	}
</script>

操作步骤 ：先在输入框输入内容， 当鼠标在输入框中失去焦点，或者按enter时如果判断到里面的内容发生改变，就要出发相应的事件。

缺点 不是实时的监听 例如百度的搜索下拉框 ，当我们按下键盘时，它就会向服务器发送请求，这样就比点击搜索后才开始查询效率就更高了

oninput 事件
在表单事件中实时监听输入框里面的内容发生改变所触发的事件

<input type="text" name="" id="" value="" />	
<script type="text/javascript">
	var  input= document.querySelector("input[type='text']");
	input.oninput = function(){
		console.log("我要做事了"+this.value);
	}
</script>

缺点： 不支持ie9以下版本

键盘事件
onkeydown 键盘按下触发的事件
onkeyperss 键盘按压触发的事件 仅对字符有用
onkeyup 键盘抬起触发的事件

<input type="text" name="" id="" value="" />
<script type="text/javascript">
	var inp = document.querySelector("input");
	inp.onkeydown = function(e){
		console.log("key down---"+e.code+"--"+e.key+"---"+e.keyCode+"--"+inp.value);
	}
	
	inp.onkeypress = function(e){//仅针对字符有用
		console.log("key press  "+e.code+"--"+"--"+e.key+"---"+e.charCode+"--"+inp.value);//得到按键字符串  适配键盘布局  key也是
	}
	
	inp.onkeyup = function(){
		console.log("key up");
	}
</script>

可以看出

1. keyup 抬起的是实时的 keydown 按下的比keyup少一位
2. keypress只能用来按字母 不能用来打汉字