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 相关文章推荐
js中哈希表的几种用法总结
Jan 28 Javascript
js实现鼠标经过表格行变色的方法
May 12 Javascript
angularjs实现文字上下无缝滚动特效代码
Sep 04 Javascript
jQuery UI Grid 模态框中的表格实例代码
Apr 01 jQuery
JS中关于正则的巧妙操作
Aug 31 Javascript
vue 自定义 select内置组件
Apr 10 Javascript
使用node.js实现微信小程序实时聊天功能
Aug 13 Javascript
vue封装一个简单的div框选时间的组件的方法
Jan 06 Javascript
Nginx设置为Node.js的前端服务器方法总结
Mar 27 Javascript
史上最为详细的javascript继承(推荐)
May 18 Javascript
Vue编程式跳转的实例代码详解
Jul 10 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
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牛逼的面试题分享
2013/01/18 PHP
探讨如何把session存入数据库
2013/06/07 PHP
深入PHP变量存储的详解
2013/06/13 PHP
javascript 事件查询综合 推荐收藏
2010/03/10 Javascript
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
xss文件页面内容读取(解决)
2010/11/28 Javascript
Javascript 面向对象编程(一) 封装
2011/08/28 Javascript
js实现倒计时(距离结束还有)示例代码
2013/07/24 Javascript
JS日期和时间选择控件升级版(自写)
2013/08/02 Javascript
JS之相等操作符详解
2016/09/13 Javascript
Vue.JS入门教程之列表渲染
2016/12/01 Javascript
jQuery插件版本冲突的处理方法分析
2017/01/16 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
Postman模拟发送带token的请求方法
2018/03/31 Javascript
jQuery常见的遍历DOM操作详解
2018/09/05 jQuery
微信小程序之几种常见的弹框提示信息实现详解
2019/07/11 Javascript
vue实现登录、注册、退出、跳转等功能
2020/12/23 Vue.js
JavaScript 中的执行上下文和执行栈实例讲解
2021/02/25 Javascript
[02:36]DOTA2英雄基础教程 帕格纳
2014/01/20 DOTA
[34:27]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第一局
2016/02/26 DOTA
[52:10]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第二场 6.3
2018/06/04 DOTA
Python的Django框架中TEMPLATES项的设置教程
2015/05/29 Python
Python中的sort()方法使用基础教程
2017/01/08 Python
遗传算法python版
2018/03/19 Python
Python爬虫信息输入及页面的切换方法
2018/05/11 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
Python后台管理员管理前台会员信息的讲解
2019/01/28 Python
英国著名的茶叶品牌:Whittard of Chelsea
2016/09/22 全球购物
医院总经理职责
2013/12/26 职场文书
电话客服专员岗位职责
2014/06/28 职场文书
课外小组活动总结
2014/08/27 职场文书
2015年教师新年寄语
2014/12/08 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书
JavaScript声明变量和数据类型的转换
2022/04/12 Javascript
科学家测试在太空中培育人造肉,用于未来太空旅行
2022/04/29 数码科技
Fluentd搭建日志收集服务
2022/09/23 Servers