JS与Jquery的事件委托
2023-09-27 14:29:05 时间
概念:
http://www.jianshu.com/p/e6336ade4e53
什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。
举个列子:有三个同事预计会在周一收到快递。为签收快递,有两种办法:一是三个人在公司门口等快递;二是委托给前台MM代为签收。现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递)。前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款。这种方案还有一个优势,那就是即使公司里来了新员工(不管多少),前台MM也会在收到寄给新员工的快递后核实并代为签收。
原理:
利用冒泡的原理,把事件加到父级上,触发执行效果。
作用:
1.性能要好
2.针对新创建的元素,直接可以拥有事件(给未来元素加事件)
事件源 :
跟this作用一样(他不用看指向问题,谁操作的就是谁),event对象下的
使用情景:
•为DOM中的很多元素绑定相同事件;
•为DOM中尚不存在的元素绑定事件;
JS的事件委托
<body>
<ul id="ul">
<li red="true">1</li>
<li>2</li>
<li red="true">3</li>
<li>4</li>
</ul>
</body>
<script>
var oUl = document.getElementById('ul');
oUl.onclick = function (ev) {
var oEvent = ev || event;
var oSrc = oEvent.srcElement || oEvent.target;
console.log(oSrc.getAttribute('red'));
if (oSrc.getAttribute('red') == 'true'){
oSrc.style.backgroundColor = 'red';
} else {
oSrc.style.backgroundColor = 'green';
}
}
</script>
把每个li点击一遍结果如图:
Jquery的事件委托
<body>
<ul id="ul1">
<li red="true">1</li>
<li>2</li>
<li red="true">3</li>
<li>4</li>
</ul>
<ul id="ul2">
<li red="true">1</li>
<li >2</li>
<li >3</li>
<li red="true">4</li>
</ul>
</body>
<script src="jquery.js"></script>
<script>
$(function(){
$('#ul1,#ul2').on('click','li',function(){
if($(this).attr('red')) {
$(this).css('background','red');
}else {
$(this).css('background','green');
$(this).removeAttr('red');
}
})
});
</script>
结果如图:
相关文章
- Js-动态控制table的tr、td增加及删除的具体实现
- 常用[js,css,jquery,html]
- jquery动态生成dom(比如append)导致js事件无效
- BlueDream.js(蓝梦)——jQuery网站使用引导插件
- jquery easyui datagrid js获取记录数 页数 当前页
- JS幻灯片,循环播放,滚动导航,jQuery平滑旋转幻灯片
- Vue.js:webpack.config.js配置和package.json配置学习笔记
- js模板引擎-art-template常用总结
- js(jquery)绑定点击事件
- jquery.form.js 让表单提交更优雅
- 使用jquery.form.js的ajaxsubmit方法提交数据的Bug
- 实现与JS相同的Des加解密算法【转】
- js中对String去空格
- Arctext.js - 基于 CSS3 & jQuery 的文本弯曲效果
- Maplace.js – 小巧实用的 jQuery 谷歌地图插件
- 原生js替换jQuery各种方法-中文版
- Node.js从入门到放弃(七)
- Uncaught TypeError: Cannot read property 'call' of undefined jquery.validate.min.js:28
- JavaScript(JS) string.italics( )
- android,java,js,jquery,python入口函数,你的语言呢?
- jQuery全屏滚动插件fullPage.js
- jQuery弹性展开收缩菜单插件gooey.js
- js 关键字 in 的使用方法
- textillate.js 文字动画
- JS知识点
- 用jquery.pager.js实现分页
- 鼠标悬浮事件 -jQuery hover()方法(layer.js)(layer.tips)