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

2021-05-07 10:32:39 更新

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、减少事件绑定,提高性能