DOM的重点核心

DOM的重点核心

document object model 文档对象模型

注册事件（绑定事件）

传统注册事件 有一个唯一性的特点。

同一个注册事件只能设置一个处理函数，最后注册的处理函数会覆盖前面注册的处理函数。

事件监听事件 addEventListener()，

1、里面的事件是字符串，必须加引号

2、同一个元素 同一个事件可以添加多个监听器

			var divs = document.querySelectorAll('div');
			divs[0].addEventListener('click',function(){
				alert('我大羲哇');
			})
			divs[0].addEventListener('click',function(){
				alert('哪里痛');
			})

删除事件

			var divs = document.querySelectorAll('div');
			divs[0].addEventListener('click',fn);		//这里不能使用匿名函数
			function fn(){
				alert('wodaxiwa');
				divs[0].removeEventListener('click',fn);//这里输入要移除的方法 和 函数
			}

DOM事件流

事件按照节点顺序传播，传播的过程叫做事件流

			//dom 事件流三个阶段
			//1、js只能执行捕获或者冒泡中的一个阶段
			//2、onclick 和 attachEvents(ie) 只能得到冒泡阶段。
			//3、捕获阶段 如果 addEvenetListener 第三个参数是 true 那么则处于捕获阶段
			//document -> html -> body -> father -> son
			var son = document.querySelector('#son');
			son.addEventListener('click',function(){
				alert('son');
			},true);
			var father = document.querySelector('#father');
			father.addEventListener('click',function(){
				alert('father');
			},true);
			//js捕获阶段   如果写false或者不写默认是false
			//document <- html <- body <- father <- son

1、js只能执行捕获或者冒泡中的一个阶段
2、onclick 和 attachEvents(ie) 只能得到冒泡阶段。
3、捕获阶段 如果 addEvenetListener 第三个参数是 true 那么则处于捕获阶段
4、document -> html -> body -> father -> son
5、js捕获阶段 如果写false或者不写默认是false
6、有一些事件是没有冒泡的，比如： onblur、onfocus、onmouseenter、onmouseleave

阻止冒泡

e.stopPropagation(); 停止传播冒泡

e.cancelBubble = ture; 兼容标准写法

target 和 this的区别

常见事件对象属性和方法

			var div = document.querySelector('div');
			div.addEventListener('click',function(e){
				console.log(e.target);
				console.log(this);
			})

e.target 返回的是触发事件的对象（元素） this 返回的是绑定事件的对象（元素）

事件委托（事件代理）addEventListener—事件冒泡的用法

原理：不是给每个子节点添加事件监听器，而是事件监听器设置在父节点上，利用冒泡原理影响设置每个子节点。

方法：给父节点添加事件监听

点击小li 因为事件冒泡机制，会传播到父级元素，父级元素有点击监听事件，所以就会指向方法

var ul = document.querySelector('ul');		//事件监听添加在li的父节点上（委托）
ul.addEventListener('click',function(){
	。。。
})

鼠标事件对象 MouseEvent

点击鼠标界面后 返回的事件

clientX/clientY 相对于浏览器窗口可视范围得坐标（滚动窗口依旧位置不变）

			document.addEventListener('click',function(e){
				console.log(e.clientX);
				console.log(e.clientY);
			})

重点记pageX和pageY

跟随鼠标移动的小案例 mouseMove

			document.addEventListener('mousemove',function(e){	//mousemove 鼠标移动1px就触发事件
				var x = e.pageX;
				var y = e.pageY;
				pic.style.left = x +'px';	//小鼠标跟随移动
				pic.style.top = y +'px';
			})

鼠标触发事件

document.addEventListener('onkeyup',function(){
	...
})

三个按键的执行顺序 keydown–keypress–keyup

keycode来判断键盘输入是哪一个值

			document.addEventListener('keyup',function(e){
				console.log(e.keyCode);
			})

注意：如果要区分字母大小写，只能通过keyperss的方法来获取。

获取搜索框的焦点 ***.focus()

			var ser = document.querySelector('.search');
			document.addEventListener('keyup',function(e){
				if(e.keyCode === 83){
					ser.focus();
					console.log('执行了')
				}
			})

注意：最好是选择keyup 当键盘弹起时候再执行，不然按下的键盘会传入输入框内。

ent.addEventListener(‘keyup’,function(e){
if(e.keyCode === 83){
ser.focus();
console.log(‘执行了’)
}
})

**注意**：最好是选择keyup  当键盘弹起时候再执行，不然按下的键盘会传入输入框内。