JavaScript事件绑定的三种方法(行内绑定|动态绑定|事件监听)、区别和移除事件

js事件是一种触发到响应的机制；事件三要素相信大家都耳熟能详:

1、事件源（用谁去触发这个事）

一般为名词，即事件的发起者

谁去干?

2、事件（如何发生这件事）

一般为动词，如鼠标经过，点击后，按键盘等

何时干?

3、事件处理程序（响应发生了什么事）

干什么?

js事件语法:

事件源.事件 = function(){ 事件处理函数 }


//绑定事件思路&步骤    
	//1.找标签    
	var d = document.getElementById('t');    
	//2.绑定事件  标签.on事件名称 = 函数    
	d.onchange = function(){    
		//3.具体的处理 --触发事件后要做的事情    
	}

了解事件绑定的三种方法和区别

html

<input type="button" name="" onclick="f();" value="按钮">    
<input type="button" id="btn" value="js中绑定">    
<input type="button" id="btn2" value="事件监听方式">

1.行内事件绑定

//<input type="button" name="" onclick="f();" value="按钮"> 

function f(){
        alert(123);
        console.log(456);
        console.log(this);
    }

行内绑定事件，事件函数中的this，是window对象

如果同一个标签同一个事件，绑定了多次，始终执行第一次绑定的事件

2、动态绑定;标签事件属性绑定

 //<input type="button" id="btn" value="js中绑定">    
    document.getElementById('btn').onclick = function(){
        alert('js中通过标签的事件属性');
        console.log('js中通过标签的事件属性,哈哈哈');
    }

js动态绑定和事件监听绑定事件，事件函数中的this,是触发事件的标签本身

如果同一个标签同一个事件，绑定了多次，始终执行最后一次绑定的事件

 3、事件监听方式绑定

//<input type="button" id="btn2" value="事件监听方式">

  document.getElementById('btn2').addEventListener('click', function(){
        alert('事件监听方式');
        console.log('事件监听方式,哈哈哈');
    });

js动态绑定和事件监听绑定事件，事件函数中的this,是触发事件的标签本身  

如果同一个标签同一个事件，绑定了多次，都会执行（按照绑定的先后顺序执行）

事件监听是唯一可以改变[事件的传播]方式的绑定方法,只用在第三个参数加上true,这样默认在冒泡阶段执行就会变为在捕获阶段执行

例:

d2.addEventListener('click',function(){
        alert('22')
     },true)  //默认的冒泡

总结:

1. 行内事件绑定  不推荐 js和html混在一起，不方便后期维护

2. js中事件属性方式绑定  自己写简单效果，可以使用（不进行多次绑定）

3. 事件监听方式  推荐 复杂的html页面（js非常多），推荐使用（可以多次绑定） jq也用的此方式,而且还可以改变js事件传播的方式

移除事件方式

行内绑定、js中事件属性绑定  直接重新设置值  btn.onclick = '';即可移除

事件监听的方式；移除就用removeEventListener 参数和绑定时必须完全一致

var f = function(){
        alert('第二次绑定');
        console.log('第二次绑定,哈哈哈');
    };

    document.getElementById('btn2').addEventListener('click', f);

    document.getElementById('btn2').removeEventListener('click', f);