JavaScript事件的常见类型、案例、绑定和传播

JavaScript事件的常见类型

调用方式

var d = document.getElementById('d'); //是谁
    d.onmouseenter = function(){ //什么时候干
     console.log('enter'); //干什么
    }

注意:

(1)mouseenter   mouseleave  不区分子元素（鼠标从父元素移动到子元素，不触发）

(2)绑定事件用动态绑定都加上on,如onmouseenter,如果用事件监听方式绑定则不用加on

拓展:JavaScript事件绑定的三种方法

(3)js中绑定事件，其实是将函数 赋值给了标签对象的一个方法

绑定事件案例1:点击下载只下载一次

HTML

<input type="button" value="下载" id="btn">

JS

<script type="text/javascript">
    需求，下载按钮只能点一次
    获取标签
    var btn = document.getElementById('btn');
    绑定事件
    btn.onclick = function(){
     //具体的处理
     console.log('正在下载中...');
     //移除事件
     btn.onclick = '';
    }

    function fn(){
     //具体的处理
     console.log('正在下载中...');
     //移除事件
     btn.removeEventListener('click', fn);
    }
    btn.addEventListener('click', fn);
</script>

绑定事件案例2:点击所有图片变大

HTML

<div>
	<img src="img/1.jpg">
	<img src="img/2.jpg">
	<img src="img/3.jpg">
	<img src="img/4.jpg">
</div>

JS

// 批量绑定事件    
	//给每个图片加上事件，点击弹出对话框    
	var imgs = document.querySelectorAll('img');    
	// console.log(imgs);    
	// 遍历数组    
	for(var i=0; i<imgs.length; i++){    
		//给每一个img标签绑定单击事件    
		// console.log(imgs[i]);    
		imgs[i].onclick = function(){    
			// alert('点我干啥');    
			// 将图片放大  css  width : 800px    
			// this 代表点击的那个img标签    
			this.style.width = '800px';    
		}    
	}

事件的传播

在JS中当一个事件发生执行以后，它会在不同的DOM节点之间传播。

简单理解:一个大DIV里面有几个子DIV,都做同样的事件的执行顺序是从内到外,即冒泡阶段.,js的执行基本都是冒泡阶段

事件传播的阶段

这种传播分成三个阶段：

第一阶段：从window对象传导到目标节点，称为 捕获阶段。

第二阶段：在目标节点上触发，称为 目标阶段。

第三阶段：从目标节点传导回window对象，称为 冒泡阶段。

事件的传播的顺序

事件传播的最上层对象是window；

事件的传播顺序，在捕获阶段依次为window、document、html、body、div；

在冒泡阶段依次为div、body、html、document、window。

注意： 三种事件绑定方式全部 默认 监听冒泡阶段事件；

1. 行内绑定 2.动态绑定 3.addEventListener监听绑定

冒泡事件案例:

//冒泡事件 (在冒泡阶段执行的事件，从内向外依次执行)    
	document.getElementById('div1').onclick = function(){    
		alert('为什么点我--div1');    
	}    
	document.getElementById('div2').onclick = function(){    
		alert('为什么点我--div2');    
	}    
	document.getElementById('div3').onclick = function(){    
		alert('为什么点我--div3');    
	}

冒泡阶段转捕获阶段的方法

捕获阶段很少用,大部分都是冒泡事件

只能以事件监听的方式才能做到,给addEventListener添加第三个参数true,默认可不添加为false

document.getElementById('div1').addEventListener('click', function(){
	 	alert('为什么点我--div1');
	 }, true);