4、JavaScript事件

JavaScript事件

1、事件介绍

1.1 内联模式(不推荐)

<button onclick="">按钮</button> 

1.2 脚本模式:

​ 脚本模式能将JS代码和HTML代码分离, 符合代码规范.

​ 使用脚本模式我们需要先获取到元素节点对象, 再针对该节点对象添加事件; 如我们可以采用多种方式来获得节点对象: getElementById(), getElementsByTagName(), getElementsByClassName()等

​ 例如:

	var box = document.getElementById('box'); 

​ 添加事件方式一 : 通过匿名函数，可以直接触发对应的代码 (推荐)

	box.onclick = function() {  //给box节点对象添加点击事件onclick         
		console.log('Hello world!'); 
	};

​ 添加事件方式二 : 通过指定的函数名赋值的方式 来执行函数

	box.onclick = func;    //注意这里不能写成
	function func() {        //给box节点对象添加点击事件onclick         
		console.log('Hello world!'); 
	};

2、事件分类

JavaScript 可以处理的事件种类有三种：鼠标事件, 键盘事件和 HTML事件.

2.1 鼠标事件

// 鼠标事件：页面所有元素都可触发鼠标事件;
// click： 当单击鼠标按钮并在松开时触发
	onclick = function() {        
		console.log('单击了鼠标'); 
	};
// dblclick： 当双击鼠标按钮时触发。
	ondblclick = function() {        
		console.log('双击了鼠标'); 
	};
// mousedown：当按下了鼠标还未松开时触发。
	onmousedown = function() {       
		console.log('按下鼠标'); 
	};
// mouseup： 释放鼠标按钮时触发。
	onmouseup = function() {        
		console.log('松开了鼠标'); 
	};
// mousemove：当鼠标指针在某个元素上移动时触发。
	onmousemove = function() {        
		console.log('鼠标移动了'); 
	};  
// mouseenter：当鼠标移入某个元素的那一刻触发。
	onmouseenter = function() {       
		console.log('鼠标移入了'); 
	}; 
// mouseleave：当鼠标刚移出某个元素的那一刻触发。
	onmouseleave = function() {        
		console.log('鼠标移出了'); 
	};

2.2 键盘事件

// 键盘事件，在键盘上按下键时触发的事件;(一般由window对象或者document对象调用)
// keydown：当用户按下键盘上某个键触发，如果按住不放，会重复触发。
	window.onkeydown = function() {        
		console.log(按下了键盘上的某个键); 
	};
// keypress：当用户按下键盘上的字符键触发，如果按住不放，会重复触发
	window.onkeypress = function() {         
		console.log('按下了键盘上的字符键'); 
	};
// keyup：当用户释放键盘上的某个键触发。
	window.onkeyup = function() {        
		console.log(松开键盘上的某个键); 
	};

2.3 HTML事件

// HTML事件，跟HTML页面相关的事件; 
// load：当页面完全加载后触发
	window.onload = function() {         
		console.log('页面已经加载完毕'); 
	};
// change：当文本框(input 或 textarea)内容改变且失去焦点后触发。
	input.onchange = function() {         
		console.log('文本框中内容改变了'); 
	};
// focus：当页面或者元素获得焦点时触发。
	input.onfocus = function() {         
		console.log('文本框获得焦点'); 
	};
// blur：当页面或元素失去焦点时触发。
	input.onblur = function() {         
		console.log('文本框失去焦点'); 
	};
// scroll：当用户滚动带滚动条的元素时触发。
	window.onscroll= function() {        
 		console.log('滚动了滚动条了'); 
	};

3、事件对象及属性

3.1 什么是事件对象

​ 事件对象(event对象)是通过事件的执行函数传入的， 但不是在所有浏览器都有值, 在IE浏览器上event对象并没有传过来, 这里我们要用window.event来获取, 而在火狐浏览器上window.event无法获取, 而谷歌浏览器支持event事件传参和window.event两种, 为了兼容所有浏览器, 我们使用以下方式来得到event事件对象:

box.onclick = function(evt){      
	var e= evt || window.event; //获取到event对象(事件对象)     
	console.log(e);
};

其中window.event中的window可以省略, 最终我们可以写成:

box.onclick = function(evt){      
	var e= evt || event; //获取到event对象(事件对象)     
	console.log(e);
};

注意: evt||event不要倒过来写

3.2 事件对象的属性:

• button: 鼠标按键
• clientX: 浏览器可视区域的x坐标
• clientY: 浏览器可视区域的y坐标
• pageX: 浏览器内容区域的x坐标（重点）
• pageY: 浏览器内容区域的y坐标（重点）
• screenX: 显示器屏幕的x坐标（了解）
• screenY: 显示器屏幕的y坐标（了解）
• offsetX: 鼠标点击的元素位置距离元素左边界的x坐标（重点）
• offsetY: 鼠标点击的元素位置距离元素上边界的y坐标（重点）

4、事件冒泡和浏览器默认行为

4.1 事件冒泡

浏览器事件流一般有两种方式： 事件冒泡和事件捕获，常用主流浏览器都默认采用事件冒泡的传递机制；

举个事件冒泡的例子:

document.onclick=function(){       
	console.log('我是 document'); 
}; 
document.documentElement.onclick=function() {       
	console.log('我是 html'); 
}; 
document.body.onclick = function(){       
	console.log('我是 body'); 
};
document.getElementById('box').onclick=function() {       
	console.log('我是 div'); 
}; 
document.getElementsByTagName('input')[0].onclick= function(){      
	console.log('我是 input'); 
};

阻止事件冒泡

​ 但是一般我们只在指定的节点上添加事件, 而不想让其传递到下层节点触发事件, 这样我们就需要阻止事件冒泡; 阻止事件冒泡有两个方法: ( 在指定不想再继续传递事件的节点的事件执行函数中使用)

​ 1, 取消冒泡(低版本IE)

​ e.cancelBubble = true;

​ 2, 停止传播(非IE和高本版IE)

​ e.stopPropagation();

​ 例如:

	document.getElementsByTagName('input')[0].onclick = function(evt) {     
		var e = evt || window.event;  
      	// 考虑到浏览器兼容问题，可以通过下述两个方法取消事件冒泡     
		if (e.stopPropagation) {	
			e.stopPropagation();     
		} else {     	
			e.cancelBubble = true;      
		}
	};

4.2 浏览器默认行为

阻止浏览器默认行为

if (e.preventDefault) {	
	e.preventDefault();   // 非IE     
}  else {              
	e.returnValue = false;  // IE      
}