事件绑定,事件冒泡和事件代理详解
来源:互联网 发布:opengl es shader编程 编辑:程序博客网 时间:2024/05/22 20:34
这三个名词听起来很高大上,其实来了解之后你会发现在平时做项目中经常发生。
1.绑定事件.
JS通过addEvent和 addEventLisenter来绑定事件:(可以为同一元素绑定多个事件)
<script> function addEvent(target, type, handler) { if (target.addEventListener) { target.addEventListener(type, handler, false); } else { target.attachEvent('on' + type, handler) } } addEvent(document, 'click', function() { alert(this === document) }); addEvent(document, 'click', function() { alert(this === document) });</script>
注意:不要写在html里边(混乱,和上边的方法冲突)
不要用 e.onlick = function(){}(只能绑定一个事件)
jq通过bind() 和 on() 来绑定事件:
不再赘述,很常见。
解除事件绑定:(用命名空间指定的事件)
$(document).unbind(‘click.handler2’); // 解除指定的
2. 事件冒泡
大部分事件会沿着事件触发的目标元素往上传播。比如:body>div>p>span 如果他们都注册了点击事件,那么在 span 元素上触发点击事件后 p,div,body 各自的点击事件也会按顺序触发。
防止事件冒泡的方法:
<script> function stopPropagation(event) { event = event || window.event; if (event.stopPropagation) { event.stopPropagation() } else {// IE event.cancelBubble = true } } addEvent('ele', 'click', function(e) { // click handler stopPropagation(e); });</script>
3.事件代理
给动态添加的元素添加事件绑定,一般绑定的逻辑会在渲染前执行,绑定的时候找不到元素所以并不能成功,当然你也可以把绑定事件的代码放在 Ajax 请求之后。这样做在一些事件逻辑简单的应用里面没问题,但是会加重数据渲染逻辑和事件处理的逻辑耦合。一但事件处程序特别多的时候,我们通常建议将把
事件的逻辑和其它代码逻辑分离。
这样方便维护。
一般做法:
<ul id="list"></ul><script> function bindEvent(el, n) { addEvent(lis[i], 'click', function() { console.log(i); }); } // 用 setTimeout 模拟 Ajax 伪代码 setTimeout(function() { var ajaxData = '<li id="item-1">item1</li> <li id="item-2">item2</li> <li id="item-3">item3</li> <li id="item-4">item4</li> <li id="item-5">item5</li>'; var ul = document.getElementById('list') ul.innerHTML(ajaxData); var lis = ul.getElementsByTagName('li'); for (var i = 0; i < lis.length; i++) { bindEvent(lis[i], i); } }, 1000);</script>
事件代理方法:
<ul id="list"></ul><script>function delegateEvent(el, eventType, fn) { addEvent(el, eventType, function(event) { event = event || window.event; var target = event.target || event.srcElement; fn(target); });}var el = document.getElementById('list');// 用 setTimeout 模拟 Ajax 伪代码setTimeout(function() { var ajaxData = '<li id="item-1">item1</li> <li id="item-2">item2</li> <li id="item-3">item3</li> <li id="item-4">item4</li> <li id="item-5">item5</li>'; el.innerHTML(ajaxData)}, 1000);delegateEvent(el, 'click', function(target) { console.log(target.id);});</script>
阅读全文
0 0
- 事件绑定,事件冒泡和事件代理详解
- js的事件代理和事件冒泡
- 冒泡和捕获:事件代理
- JS-事件冒泡、事件捕获 和 事件代理
- 浅谈事件委托(事件代理)和事件冒泡
- JS事件冒泡和事件捕获详解
- js事件冒泡和事件捕获详解
- 事件委托,事件绑定,事件冒泡原理
- 详解事件冒泡和捕获
- js事件冒泡、事件捕获和阻止默认事件详解
- javascript 绑定事件 阻止冒泡和默认事件
- javascript中的事件绑定、事件冒泡、事件捕获和事件执行顺序
- 浅谈事件冒泡和事件捕获的应用场景——事件代理/事件委托
- 绑定事件、阻止默认事件、阻止冒泡
- 事件绑定与事件捕获/冒泡
- 事件传播和冒泡事件
- 事件冒泡和事件捕获
- 事件对象和事件冒泡
- C++学习笔记7 : 变量命名规则及类型
- 根据url获取请求中的cookie
- ActiveMQ高可用集群方案
- Linux中的定时任务
- 安卓AppBarLayout和Toolbar和CollapsingToolbarLayout详解及设置图片透明状态栏
- 事件绑定,事件冒泡和事件代理详解
- Qt中遇到的一些问题总结
- 修复IE浏览器的常用方法
- [QA] Ceph-deploy 安装 Ceph 环境报错分析
- 用户注册登录案例分析以及简单实现
- 【Unity技巧】四元数(Quaternion)和旋转
- iOS 后台运行实现总结
- 加解密、PKI与CA基础
- Android 自定义键盘输入内容监听