JavaScript学习——事件监听

JavaScript中事件监听

有三种类型的事件处理程序：

①HTML事件处理程序（不建议使用）
②传统的DOM事件处理
③第二级DOM监听器

1.HTML事件处理程序

不符合代码规范，所以不建议使用，只需要知道有这种写法即可。

<div οnclick="test()">111</div>
<script type="text/javascript">
	function test(){
		alert(1);
	}
</script>

2.传统的DOM事件处理

<div id="root">111</div>
<script type="text/javascript">
var a = document.getElementById('root');
a.onclick = function(){
	alert(1);
}
</script>

3.第二级DOM监听器

DOM2 级事件” 定义了两个方法，用于处理指定和删除事件处理程序的操作

addEventListener()和 removeEventListener()

1. 事件的绑定：
   addEventListener()用于绑定事件。
   语法：element.addEventListener(event, function, useCapture);

2. 参数解释：
   event代表要处理的事件名，例如:click等
   function作为事件处理程序的函数
   useCapture传入的是布尔值，false代表冒泡阶段调用事件处理程序，ture代表捕获阶段调用事件处理程序。

3. JS事件流原理图如下：
   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Nj7ytL55-1581992225004)(img/1.png)]

addEventListener方法第三个参数默认是false,此时是按照冒泡过程的顺序触发。若为true,则是按照捕获过程的顺序触发

　<div id='id1' style="position: absolute;top:20px;left: 40px;background: blue;width: 120px;height: 120px;">
	<div id="id2" style="position: absolute;top:20px;left: 40px;background: green;width: 120px;height: 120px;">
		<div id="id3" style="position: absolute;top:20px;left: 40px;background: red;width: 120px;height: 120px;"></div>
	</div>
</div>
	<script type="text/javascript">
		document.getElementById('id1').addEventListener('click',function(){console.log("id1")},false);
 
		document.getElementById('id2').addEventListener('click',function(){console.log("id2")},false);
 
		document.getElementById('id3').addEventListener('click',function(){console.log("id3")},false);
	</script>
　

可以通过改变这三个事件监听的第三个参数来验证.

---

事件监听的优点

1. 可以绑定多个事件
   例如：常规方式绑定:

<input type='button' value='click me' id='btn2' />
<script>
document.getElementById('btn2').attachEvent('onclick',hello);
function hello(){
alert('hello world!');
};
</script>

**注意：常规事件绑定只执行最后绑定的事件。**  
用监听的方法来绑定：  

<input type='button' value='click me' id='btn4' />
<script>
var btn4 = document.getElementById('btn4');
btn4.addEventListener('click',hello1);
btn4.addEventListener('click',hello2);
function hello1(){
alert('hello 1');
};
function hello2(){
alert('hello 2');
};
</script>

这样两个事件都执行了。  

2. 可以解除相应绑定
   例如：

<script>
var btn5 = document.getElementById('btn5');
btn5.addEventListener('click',hello1); //执行了
btn5.addEventListener('click',hello2); //不执行
btn5.removeEventListener('click',hello2);
function hello1(){
alert('hello 1');
};
function hello2(){
alert('hello 2');
};
</script>

封装事件监听：

	<input type='button' value='click me' id='btn5' />
	//绑定监听事件
	function addEventHandler(target,type,fn){
	if(target.addEventListener){
	target.addEventListener(type,fn);
	}else{
	target.addEventListener('on'+type,fn);
	};
	};
	//移除监听事件
	function removeEventHandler(target,type,fn){
	if(target.removeEventListener){
	target.removeEventListener(type,fn);
	}else{
	target.detachEvent('on'+type,fn);
	};
	};

	````