鼠标 键盘 表单的事件对象

事件的绑定与解绑

绑定

btn.onclick = function(){}

btn.addEventListener(type,funName)

解除绑定

btn.onclick = null

btn.removeEventListener(type,funName)

注 匿名函数不能解除绑定

	<script>
			// 给btn2注册2个单击事件
			function say(){
				// this指向的是btn2这个按钮
				alert(this.innerText);
			}
			function doit(){
				alert("我要挣100万");
			}
			var btn2 = document.querySelector(".btn2");
			btn2.addEventListener("click",say);
			btn2.addEventListener("click",doit);
			btn2.addEventListener("click",function(){
				alert("我要娶高富帅");
			})
			
			
			//  btn3单击解绑 say方法
			var btn3 = document.querySelector(".btn3");
			btn3.onclick = function(){
				// 解绑了btn2.click事件的 say函数响应
				btn2.removeEventListener("click",say);
				btn2.removeEventListener("click",doit);
				 
				
			}
			
			
			// 给按钮1添加事件
			var btn1 = document.querySelector(".btn1");
			btn1.onclick = function(){
				alert("啊,我被点击了,这是最后一次");
				btn1.onclick = null;
			}
		</script>

事件对象

event.target      事件源对象

event.offsetX        event.offsetY      相对于事件源偏移文字

event.pageX         evnet.pageY       相对于页面偏移位置

事件对象案列 打分系统

classList.add()添加类名,classList.remove() 移除类名
Array.from() 把类似数组的转换数组
list.indexOf(a) 查找a是list里面的第几个 找不到返回-1
给score添加单击事件(代理)
通过event.target判断当前是第几个爱心 得到index
遍历span 如果下标值小于index的咱们加上active,否则移除active

<script>
	var score = document.querySelector(".score");
	var spans = score.querySelectorAll("span");
	spans = Array.from(spans);//把spans转换为数组
	// 给score添加单击事件
	score.addEventListener("click",function(event){
		console.log(event.target);
		// 查找event.target是第几个（第几个心被点击了）
		var index = spans.indexOf(event.target);
		// alert(index)
		// 遍历spans 如果i的值小于index 添加active
		for(var i=0;i<spans.length;i++){
			if(i<=index){
				spans[i].classList.add('active');
			}else{
				spans[i].classList.remove('active');
			}
		}
			})

</script>

事件的传递

事件的传递有两种情况

1   冒泡   最具体元素最先捕捉到事件,传递给最不具体的元素（document）

默认的事件传递方法

2   捕获   最不具体的元素先捕获到事件,传递给最具体的元素

利用elem.addEventListener("click",doit,true)里的true判断该函数是否是捕获函数

阻止事件传递

event.stopPropagation()

阻止默认事件

event.preventDefault()

a.addEventListener("click",function(e){
	e.stopPropagation(); //阻止事件冒泡
	e.preventDefault();//阻止默认事件
	alert("哇,中奖了");
})

键盘事件

keypress 按下弹起   keyup  键盘弹起  keydown 键盘按下

键盘事件的参数

event.keyCode 键对应数字编码         event.key键盘的名称    event.which等于keyCode

鼠标事件

mouseover 鼠标移入        mouseout 鼠标移出     mousedown 鼠标按下
mouseup 鼠标弹起           mousemove 鼠标移动
click 单击        dblclick双击

表单事件

change 值发生变化      input 正在输入

focus 获取焦点        blur 失去焦点

页面事件

load加载     resize 窗口变化       scroll滚动

事件相关案列会在下一篇详解