JavaScript 事件绑定与解绑，事件委托

B站关联视频教程：https://www.bilibili.com/video/BV1RA41137yd?p=20

目录：

一、事件的构成 （事件源  事件动作   事件处理动作）

二、常见常用事件

    1、鼠标

    2、键盘

    3、文档

    4、表单

三、事件绑定与解绑

    1、在标签上编写

    2、对象绑定

    3、addEventListener事件侦听绑定 为同一个对象的同一个事件绑定多个事件处理程序

    4、for/event属性方式定义【废弃，不推荐】

四、事件委托

事件委托原理： 利用冒泡的原理，把事件加到父级上，触发执行效果。
事件委托的好处：
1、实现对未来元素事件的绑定
未来元素：绑定事件时，页面上还不存在的元素
2、减少事件绑定，提高性能。

内容：

一、事件源  事件动作   事件处理动作

<a onClick="abc();">onClick点击</a>
<script>
    function abc(){
        alert('iT问答网欢迎您');
    }
</script>
复制尝试一下

<a>就是事件源

onClick就是事件动作

abc就是处理动作【注：这里abc是自定义函数】

二、常见常用事件

1、鼠标

onClick 单击 alert("hello");
onDblClick双击
contextmenu文本菜单  只有火狐支持
onMouseOver
onMouseOut

<a onClick="alert('iT问答网欢迎您');">onClick点击</a>
复制尝试一下

2、键盘

onkeypress //兼容性不太好，如ie10不行
onkeyup		//键盘弹起
onkeydown   	//键盘按下
<script>
document.onkeydown=function(){
	alert("it问答网");
}
</script>

如下：按键盘"任意键"都会弹出 it问答网

<script>
document.onkeydown=function(){
    alert("it问答网");    
}
</script>
复制尝试一下

如下：只有按下键盘”回车键“会弹出 it问答网

<script>
    document.onkeydown=function(e){ //e参数必填项
    	if(e.keyCode==13){
    	    alert("it问答网:你已经按下回车键盘了");
    	}
    }
</script>
复制尝试一下

3、文档

onload   //文档加载完成之后就会触发该事件
onunload //关闭当前页面前执行的动作
beforeunload //替换当前页之前执行的动作，提醒问你是不是要离开这个页面
提示：onunload、beforeunload浏览器兼容性不好，测试火狐不行，ie10可以
window.onload=function(){
		//alert("dd");
}
//window.onload是一个事件，当文档加载完成之后就会触发该事件

4、表单

onFocus 		获得焦点时发生的事件
onBlur   		失去焦点
onSubmit		提交(事件会在表单中的确认按钮被点击时发生)
onChange		改变（select标签值改变）

onFocus

做一个输入框，给输入框绑定一个onFocus事件，当用户触发事件的时候将输入框的背景变为黄色，代码如下：

<input type="text" name="itwenda" 
    onfocus="this.style='background:#cccccc;'"
/>
复制尝试一下

onBlur

针对上述的案例，用户失去对input操作的时候激发一个事件

<input type="text" name="itwenda" 
    onfocus="this.style='background:#cccccc;'"
    onblur="this.style='background:none;'"
/>
<input type="text" name="itwenda.com"/>
<br/>
你先点击第一个input，会看到背景色变灰色；
然后点击第二个input，你会发现第一个背景色就没了。
复制尝试一下

输入完信息后，我们希望紧跟着就进行判断数据格式是否满足等。也可以用onBlur事件。

三、事件绑定与解绑

1、在标签上编写

绑定：

<a  onClick="abc();">学习js-onClick</a>

 function abc(){
	 alert("标签上写的");
 }

 解绑：

取消绑定：document.getElementById("id名").onclick=null;
提示：标签上写的类似js语法，所以结尾加;，当然省略也是可以的。

<h1>绑定与解绑</h1>
<a onClick="fangfa1();" id="b1">标签内绑定</a><br/>
<a onClick="document.getElementById('b1').onclick=null;alert('解绑成功');">标签内绑定-解绑</a>
<script>
    function fangfa1(){
        alert("标签内绑定"); 
    }
</script>
复制尝试一下

2、对象绑定

绑定:

<a  id="ab">对象绑定</a><br/>

 var ab2=document.getElementById("ab");
 ab2.onclick=function(){
	alert("对象绑定"); 
 }

解绑：

取消绑定：ab2.onclick=null;

<h1>对象绑定与解绑</h1>
<div id="b2">对象b2绑定</div><br/>
<div id="b22">对象b2解绑</div>
<script>
    document.getElementById("b2").onclick=function(){
        alert("对象b2绑定");
    }   
    document.getElementById("b22").onclick=function(){
        document.getElementById("b2").onclick=null;
        alert("解绑成功");
    }   
</script>
复制尝试一下

ab2.onclick=aa;//aa是函数名

ab2.onclick=bb;//bb是函数名 onclick事件函数会替换

3、addEventListener事件侦听绑定

为同一个对象的同一个事件绑定多个事件处理程序。

绑定：

document.addEventListener("click",quxiaoguanbi);

解绑：

document.getElementById("kf").removeEventListener("click",quxiaoguanbi)

<h1>事件侦听绑定与解绑</h1>
<div id="b3">事件侦听b3绑定</div><br/>
<div id="b32">事件侦听b3解绑</div>
<script>    
    document.getElementById("b3").addEventListener("click",quxiao);
    document.getElementById("b32").addEventListener("click",quxiao2);

    function quxiao(){
        alert(11);  
    }
    function quxiao2(){ 
      document.getElementById("b3").removeEventListener("click",quxiao);
      alert("取消事件侦听b3绑定");
    }
</script>
复制尝试一下

提示：绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。

attachEvent 火狐不支持 ,ie下支持。

var x = document.getElementById("myBtn");

if (x.addEventListener) {  

    //所有主流浏览器，除了 IE 8 及更早 IE版本   

    x.addEventListener("click", myFunction);

}else if (x.attachEvent) {

    // IE 8 及更早 IE 版本

    x.attachEvent("onclick", myFunction);

}

4、for/event属性方式定义

<a  id="a1">for/event属性方式定义一个事件过程</a>
<script type="text/javascript" for="a1" event="onclick">
  alert("t");
</script>
复制尝试一下

提示：

1、兼容性差，有的浏览器不支持，如：火狐、谷歌浏览器不支持。

2、这种形式中定义的函数将无效。

四、事件委托

如何理解事件委托：

有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。

这里其实还有2层意思的：

第一，现在委托前台的同事是可以代为签收的，即程序中的现有的dom节点是有事件的；

第二，新员工也是可以被前台MM代为签收的，即程序中新添加的dom节点也是有事件的。

事件委托原理： 利用冒泡的原理，把事件加到父级上，触发执行效果。
事件委托的好处：
1、实现对未来元素事件的绑定
未来元素：绑定事件时，页面上还不存在的元素
2、减少事件绑定，提高性能。

只在内存中开辟了一个内存空间，节省资源减少DOM操作，提高性能，对于新添加的元素也会有之前的事件（可以把事件绑定给未来元素）

常规写法：

<div id="box">
    <input type="button" id="add" value="添加" />
    <input type="button" id="remove" value="删除" />
    <input type="button" id="move" value="移动" />
    <input type="button" id="select" value="选择" />
</div>

<script>
window.onload = function(){
    var Add = document.getElementById("add");
    var Remove = document.getElementById("remove");
    var Move = document.getElementById("move");
    var Select = document.getElementById("select");
    
    Add.onclick = function(){
        alert('添加');
    };
    Remove.onclick = function(){
        alert('删除');
    };
    Move.onclick = function(){
        alert('移动');
    };
    Select.onclick = function(){
        alert('选择');
    }
}
</script>
复制尝试一下

事件委托写法：

一般都是使用 jquery写法。原生的这里只做了解。

<div id="box">
    <input type="button" id="add" value="添加" />
    <input type="button" id="remove" value="删除" />
    <input type="button" id="move" value="移动" />
    <input type="button" id="select" value="选择" />
</div>

<script>
window.onload = function(){
    var oBox = document.getElementById("box");
    oBox.onclick = function (e) {
        var e = e || window.event;
        var target = e.target || e.srcElement;
        if(target.nodeName.toLocaleLowerCase() == 'input'){
            switch(target.id){
                case 'add' :
                    alert('添加');
                    break;
                case 'remove' :
                    alert('删除');
                    break;
                case 'move' :
                    alert('移动');
                    break;
                case 'select' :
                    alert('选择');
                    break;
            }
        }
    }
}
</script>
复制尝试一下

总结：什么是事件监听、事件绑定、事件委托？

事件监听： 为同一个对象的同一个事件绑定多个事件处理程序
事件绑定： 对DOM元素绑定事件处理函数 一般分为三种
1、在DOM元素中直接绑定
2、在js中绑定
3、绑定事件监听函数
事件委托： 利用冒泡的原理，把事件加到父级上，触发执行效果
事件委托的好处：
1、实现对未来元素事件的绑定
未来元素：绑定事件时，页面上还不存在的元素
2、减少事件绑定，提高性能