JavaScript事件委托用法分析


Posted in Javascript onJanuary 24, 2015

本文实例讲述了JavaScript事件委托用法。分享给大家供大家参考。具体分析如下:

一、点击页面任何部分触发事件

创建一个script1.js文件。

(function() {

    eventUtility.addEvent(document, "click", function(evt) {

        alert('hello');

    });

}());

页面部分。

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

</head>

<body>

    

    <script src="eventUtility.js"></script>

    <script src="script1.js"></script>

</body>

</html>

输出结果:点击页面任何一处都会弹出框。

但,我们有时候希望点击document内的某个元素来触发事件。

二、使用委托触发事件

在页面上增加a标签。

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

</head>

<body>

    

    <div>

        <p><a href="#">点我</a></p>

    </div>

    <script src="eventUtility.js"></script>

    <script src="script1.js"></script>

</body>

把script1.js修改为:

(function() {

    eventUtility.addEvent(document, "click", function(evt) {

        //获取点击对象

        var target = eventUtility.getTarget(evt);

        //获取点击对象的tag名称

        var tagName = target.tagName;

        //如果tag是a

        if (tagName === "A") {

            alert("点我了");

            //阻止链接的默认行为

            eventUtility.preventDefault(evt);

        }

    });

}());

输出结果:只有点击页面上的a标签才弹出框。

以上的好处是:无论document内增加多少a标签元素,所有a标签都具有被触发的能力。像这种方式就是事件委托。我们希望为子元素注册事件,却把事件先注册到子元素的父级元素上,这样,在该父元素之内、动态添加的、任何与子元素同类的元素都注册了事件。

如果我们把事件注册到子元素上,在document中再动态添加与子元素同类的元素,都必须为这些刚动态添加的子元素分别注册事件。

另外,事件委托很好地利用了"事件冒泡"。当点击子元素,根据"事件冒泡",该子元素的父级元素捕获了该次点击事件,并触发自己的方法。

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript中万恶的function实例分析
May 25 Javascript
js实现的折叠导航示例
Nov 29 Javascript
js实现表格字段排序
Feb 19 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
Apr 17 Javascript
js键盘事件的keyCode
Jul 29 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
Jan 19 Javascript
获取IE浏览器Cookie信息的方法
Jan 23 Javascript
jQuery is not defined 错误原因与解决方法小结
Mar 19 Javascript
Nginx设置为Node.js的前端服务器方法总结
Mar 27 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
Jun 10 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
Nov 13 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
Dec 20 Javascript
jQuery统计上传文件大小的方法
Jan 24 #Javascript
限制上传文件大小和格式的jQuery插件实例
Jan 24 #Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
Jan 24 #Javascript
使用jQuery实现input数值增量和减量的方法
Jan 24 #Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 #Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 #Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 #Javascript
You might like
[EPIC] Larva vs Flash ZvT @ Crossing Field [2017-10-09]
2020/03/17 星际争霸
PHP新手上路(五)
2006/10/09 PHP
PHP防止注入攻击实例分析
2014/11/03 PHP
PHP实现清除MySQL死连接的方法
2016/07/23 PHP
解决Laravel blade模板转义html标签的问题
2019/09/03 PHP
JS应用之禁止抓屏、复制、打印
2008/02/21 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
node.js解决获取图片真实文件类型的问题
2014/12/20 Javascript
JavaScript通过prototype给对象定义属性用法实例
2015/03/23 Javascript
用AngularJS来实现监察表单按钮的禁用效果
2016/11/02 Javascript
微信小程序文章详情页跳转案例详解
2019/07/09 Javascript
layer设置maxWidth及maxHeight解决方案
2019/07/26 Javascript
在vue+element ui框架里实现lodash的debounce防抖
2019/11/13 Javascript
原理深度解析Vue的响应式更新比React快
2020/04/04 Javascript
Vue 样式切换及三元判断样式关联操作
2020/08/09 Javascript
学习python (1)
2006/10/31 Python
一道python走迷宫算法题
2018/01/22 Python
Python 3.x基于Xml数据的Http请求方法
2018/12/28 Python
Python 调用PIL库失败的解决方法
2019/01/08 Python
python3:excel操作之读取数据并返回字典 + 写入的案例
2020/09/01 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
使用html5实现表格实现标题合并的实例代码
2019/05/13 HTML / CSS
全球航班旅行搜索网站:Cheapflights
2017/05/19 全球购物
西部世纪面试题
2014/12/05 面试题
校园门卫岗位职责
2013/12/09 职场文书
40岁生日感言
2014/02/15 职场文书
会计员岗位职责
2014/03/15 职场文书
计算机专业应届生求职信
2014/04/06 职场文书
科长个人四风问题整改措施思想汇报
2014/10/13 职场文书
2015年世界无烟日活动总结
2015/02/10 职场文书
2015年综治宣传月活动总结
2015/03/25 职场文书
信息技术国培研修日志
2015/11/13 职场文书
广告文案的撰写技巧(实用干货)
2019/08/23 职场文书
详解MySQL InnoDB存储引擎的内存管理
2021/04/08 MySQL
在 SQL 语句中处理 NULL 值的方法
2021/06/07 SQL Server