JS 事件绑定、事件监听、事件委托详细介绍


Posted in Javascript onSeptember 28, 2016

在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定、事件监听、事件委托(事件代理)等。这些名词是什么意思呢,有什么作用呢?

事件绑定

要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称。

在JavaScript中,有三种常用的绑定事件的方法:

  1. 在DOM元素中直接绑定;
  2. 在JavaScript代码中绑定;
  3. 绑定事件监听函数。

在DOM中直接绑定事件

我们可以在DOM元素上绑定onclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeypress、onkeyup等。好多不一一列出了。如果想知道更多事件类型请查看, DOM事件 。

<input type="button" value="click me" onclick="hello()">

<script>
function hello(){
 alert("hello world!");
}
</script>

在JavaScript代码中绑定事件

在JavaScript代码中(即 script 标签内)绑定事件可以使JavaScript代码与HTML标签分离,文档结构清晰,便于管理和开发。

<input type="button" value="click me" id="btn">

<script>
document.getElementById("btn").onclick = function(){
 alert("hello world!");
}
</script>

使用事件监听绑定事件

绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。下面详细介绍,事件监听。

事件监听

关于事件监听,W3C规范中定义了3个事件阶段,依次是捕获阶段、目标阶段、冒泡阶段。

起初Netscape制定了JavaScript的一套事件驱动机制(即事件捕获)。随即IE也推出了自己的一套事件驱动机制(即事件冒泡)。最后W3C规范了两种事件机制,分为捕获阶段、目标阶段、冒泡阶段。IE8以前IE一直坚持自己的事件机制(前端人员一直头痛的兼容性问题),IE9以后IE也支持了W3C规范。

W3C规范

语法:

element.addEventListener(event, function, useCapture)

event : (必需)事件名,支持所有 DOM事件 。

function:(必需)指定要事件触发时执行的函数。

useCapture:(可选)指定事件是否在捕获或冒泡阶段执行。true,捕获。false,冒泡。默认false。

注:IE8以下不支持。

<input type="button" value="click me" id="btn1">

<script>
document.getElementById("btn1").addEventListener("click",hello);
function hello(){
 alert("hello world!");
}
</script>

IE标准

语法:

element.attachEvent(event, function)

event:(必需)事件类型。需加“on“,例如:onclick。

function:(必需)指定要事件触发时执行的函数。

<input type="button" value="click me" id="btn2">

<script>
document.getElementById("btn2").attachEvent("onclick",hello);
function hello(){
 alert("hello world!");
}
</script>

事件监听的优点

1、可以绑定多个事件。

<input type="button" value="click me" id="btn3">

<script>
var btn3 = document.getElementById("btn3");
btn3.onclick = function(){
 alert("hello 1"); //不执行
}
btn3.onclick = function(){
 alert("hello 2"); //执行
}
</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、可以解除相应的绑定

<input type="button" value="click me" id="btn5">

<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.attachEvent("on"+type,fn);
 }
}

//移除监听事件
function removeEventHandler(target,type,fn){
 if(target.removeEventListener){
 target.removeEventListener(type,fn);
 }else{
 target.detachEvent("on"+type,fn);
 }
}

//测试
var btn5 = document.getElementById("btn5");
addEventHandler(btn5,"click",hello1);//添加事件hello1
addEventHandler(btn5,"click",hello2);//添加事件hello2
removeEventHandler(btn5,"click",hello1);//移除事件hello1

事件委托

事件委托就是利用冒泡的原理,把事件加到父元素或祖先元素上,触发执行效果。

<input type="button" value="click me" id="btn6">

var btn6 = document.getElementById("btn6");
document.onclick = function(event){
 event = event || window.event;
 var target = event.target || event.srcElement;
 if(target == btn6){
 alert(btn5.value);
 }
}

上面只是个例子,代码尽可能的简化了。在实际的代码中 我们可能用到jQuery的live()、delegate()、bind()、on()等。

事件委托优点

1、提高JavaScript性能。事件委托可以显著的提高事件的处理速度,减少内存的占用。 实例分析JavaScript中的事件委托和事件绑定 ,这篇文章写得还不错。

传统写法

<ul id="list">
 <li id="item1" >item1</li>
 <li id="item2" >item2</li>
 <li id="item3" >item3</li>
</ul>

<script>
var item1 = document.getElementById("item1");
var item2 = document.getElementById("item2");
var item3 = document.getElementById("item3");

item1.onclick = function(){
 alert("hello item1");
}
item2.onclick = function(){
 alert("hello item2");
}
item3.onclick = function(){
 alert("hello item3");
}
</script>

事件委托

<ul id="list">
 <li id="item1" >item1</li>
 <li id="item2" >item2</li>
 <li id="item3" >item3</li>
</ul>

<script>
var item1 = document.getElementById("item1");
var item2 = document.getElementById("item2");
var item3 = document.getElementById("item3");

document.addEventListener("click",function(event){
 var target = event.target;
 if(target == item1){
 alert("hello item1");
 }else if(target == item2){
 alert("hello item2");
 }else if(target == item3){
 alert("hello item3");
 }
})
</script>

2、动态的添加DOM元素,不需要因为元素的改动而修改事件绑定。

传统写法

<ul id="list">
 <li id="item1" >item1</li>
 <li id="item2" >item2</li>
 <li id="item3" >item3</li>
</ul>

<script>
var list = document.getElementById("list");

var item = list.getElementsByTagName("li");
for(var i=0;i<item.length;i++){
 (function(i){
 item[i].onclick = function(){
 alert(item[i].innerHTML);
 }
 })(i)
}

var node=document.createElement("li");
var textnode=document.createTextNode("item4");
node.appendChild(textnode);
list.appendChild(node);

</script>

点击item1到item3都有事件响应,但是点击item4时,没有事件响应。说明传统的事件绑定无法对动态添加的元素而动态的添加事件。

事件委托

<ul id="list">
 <li id="item1" >item1</li>
 <li id="item2" >item2</li>
 <li id="item3" >item3</li>
</ul>

<script>
var list = document.getElementById("list");

document.addEventListener("click",function(event){
 var target = event.target;
 if(target.nodeName == "LI"){
 alert(target.innerHTML);
 }
})

var node=document.createElement("li");
var textnode=document.createTextNode("item4");
node.appendChild(textnode);
list.appendChild(node);

</script>

当点击item4时,item4有事件响应。说明事件委托可以为新添加的DOM元素动态的添加事件。

 通过此文,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
jquery $.ajax入门应用二
Nov 19 Javascript
JavaScript 直接操作本地文件的实现代码
Dec 01 Javascript
用js解决数字不能换行问题
Aug 10 Javascript
JavaScript对象学习经验整理
Oct 12 Javascript
JS实现侧悬浮浮动实例代码
Nov 29 Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 Javascript
JavaScript中的this关键字使用方法总结
Mar 13 Javascript
JS如何实现文本框随文本的长度而增长
Jul 30 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
May 19 Javascript
BootStrap表单控件之文本域textarea
May 23 Javascript
js实现web调用摄像头 js截取视频画面
Apr 21 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
Aug 06 Javascript
js创建对象几种方式的优缺点对比
Sep 28 #Javascript
AngularJS表单验证中级篇(3)
Sep 28 #Javascript
微信公众号 客服接口的开发实例详解
Sep 28 #Javascript
jQuery解析XML 详解及方法总结
Sep 28 #Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
Sep 28 #Javascript
微信小程序 实例应用(记账)详解
Sep 28 #Javascript
JavaScript 闭包详细介绍
Sep 28 #Javascript
You might like
PHP小程序自动提交到自助友情连接
2009/11/24 PHP
php中使用Akismet防止垃圾评论的代码
2011/06/10 PHP
php将html转成wml的WAP标记语言实例
2015/07/08 PHP
Thinkphp5+uploadify实现的文件上传功能示例
2018/05/26 PHP
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
2009/01/30 Javascript
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
JavaScript 面向对象的之私有成员和公开成员
2010/05/04 Javascript
jQuery实现表格行上下移动和置顶效果
2015/06/05 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
2016/05/10 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
2016/08/24 Javascript
Express与NodeJs创建服务器的两种方法
2017/02/06 NodeJs
详解Vue.js之视图和数据的双向绑定(v-model)
2017/06/23 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
2017/10/25 Javascript
js中怎么判断两个字符串相等的实例
2019/01/17 Javascript
微信小程序按钮点击动画效果的实现
2019/09/04 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
2019/11/26 Javascript
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
Python字符串切片操作知识详解
2016/03/28 Python
Python神奇的内置函数locals的实例讲解
2019/02/22 Python
python使用pandas处理大数据节省内存技巧(推荐)
2019/05/05 Python
pytorch使用指定GPU训练的实例
2019/08/19 Python
Python实现名片管理系统
2020/02/14 Python
详解pandas映射与数据转换
2021/01/22 Python
39美元购买一副眼镜或太阳镜:39DollarGlasses.com
2018/06/17 全球购物
Europcar意大利:汽车租赁
2019/07/07 全球购物
护理毕业生自荐信范文
2013/12/22 职场文书
小溪流的歌教学反思
2014/02/13 职场文书
多媒体编辑专业毕业生求职信
2014/06/13 职场文书
大专毕业生自我鉴定范文(2篇)
2014/09/27 职场文书
2015年项目经理工作总结
2015/04/30 职场文书
综治目标管理责任书
2015/05/11 职场文书
校运会广播稿
2015/08/19 职场文书
导游词之塘栖古镇
2019/12/04 职场文书
Win11电源已接通但未充电怎么办?Win11电源已接通未充电的解决方法
2022/04/05 数码科技
Smart 2 车辆代号 HC11 全新谍照曝光
2022/04/21 数码科技