JavaScript原生事件委托以及JQuery事件委托on()的代码片段

最新推荐文章于 2024-08-16 19:02:09 发布
最新推荐文章于 2024-08-16 19:02:09 发布
阅读量231 收藏
点赞数
分类专栏： 个人笔记 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40172562/article/details/77917505
版权
<!DOCTYPE html>
<html>
<head>
<title></title>
  <style type="text/css">
    .container{
      width:100%;
      display:-webkit-box;
      display: -moz-box;
      display:-webkit-flex;
      display: flex;
    }
    .left {
        -webkit-flex:1;
        -ms-flex:1;
        -webkit-box-flex:1;
        -moz-flex:1;
        flex:1;
        width:100%;
    }
    .main{
        width:200px;
    }
    .right{
        width:300px;
    }
  </style>
</head>
<body>
<input type="button" id="btn" value="添加"/>
<ul id="ul">
  <li>aaaaaaaa</li>
  <li>bbbbbbbb</li>
  <li>cccccccc</li>
</ul>
<div class="container">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<script type="text/javascript">


// 不用事件委托的方式，动态添加的li不会改变背景颜色
// window.onload = function(){
//   var oUl = document.getElementById("ul");
//   var aLi = oUl.getElementsByTagName("li");
//   var oBtn = document.getElementById("btn");
//   var iNow = 4;
//   for(var i=0; i<aLi.length; i++){
//     aLi[i].onmouseover = function(){
//       this.style.background = "red";
//     }
//     aLi[i].onmouseout = function(){
//       this.style.background = "";
//     }
//   }


//   oBtn.onclick = function(){
//     iNow ++;
//     var oLi = document.createElement("li");
//     oLi.innerHTML = 1111 *iNow;
//     oUl.appendChild(oLi);
//   }
// }




//事件委托
window.onload = function(){
  var oUl = document.getElementById("ul");
  var aLi = oUl.getElementsByTagName("li");
  var oBtn = document.getElementById("btn");
  var iNow = 4;


  oUl.onmouseover = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    if(target.nodeName.toLowerCase() == "li"){
    target.style.background = "red";
    }
  }
  oUl.onmouseout = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    
    if(target.nodeName.toLowerCase() == "li"){
    target.style.background = "";
    }
  }
  oBtn.onclick = function(){
    iNow ++;
    var oLi = document.createElement("li");
    oLi.innerHTML = 1111 *iNow;
    oUl.appendChild(oLi);
  }
}
</script>
</body>
</html>
qq_40172562
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于面试中的原生js实现事件代理和事件模型和事件广播的学习
toumingyumaohuiyi的博客
12-13 3582
待补充
JS基础_事件的冒泡
weixin_41804367的博客
08-31 187
事件的冒泡 1、什么是事件的冒泡？ 当某个子类元素的某类型事件被触发时，其父类元素、祖类及以上级元素的相同类型的事件也会产生效果。 2、举例 <html> <!--编码格式--> <meta charset="UTF-8"> <head> <style> #box { width: 200px; height: 200px; backgr
原生js的事件委托
butcher的博客
06-22 942
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>事件委托</title> </head> <body> <ul i
原生的on事件代理
weixin_30888027的博客
01-29 88
<script> // jQuery $('.el').on('event', function() { }); // 原生方法 [].forEach.call(document.querySelectorAll('.el'), function(el) { el.addEventListener('event', funct...
jq 事件委托delegate
weixin_43294560的博客
02-01 382
$('选择器').delegate('子元素选择器','无on的事件',function(){...}) 给选择器下的子元素委派事件 代码示例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic...
一键下载75款常用的jquery特效前端网页代码
09-28
9. **性能优化**：jQuery提供了`$(document).on()`方法进行事件委托，提高性能，减少内存占用，同时避免了多次绑定事件的问题。 10. **学习资源**：这个资源集合不仅可以作为实际项目中的代码参考，也是学习jQuery...
jQuery讲义,课件及代码.zip
09-28
jQuery是一款广泛应用于Web开发的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。这个压缩包“jQuery讲义,课件及代码.zip”提供了全面学习jQuery的资源，包括讲义、课件以及...
jquery手册
02-26
3. **事件处理**：jQuery提供了丰富的事件处理函数，如`click()`, `mouseover()`, `mouseout()`等，简化了原生JavaScript的事件绑定。 4. **动画效果**：jQuery的`animate()`函数可以创建自定义动画，同时还有预定...
李炎恢jQuery在线课堂讲义.pdf
01-30
然而，过度使用jQuery可能导致性能问题，合理使用`$()`的缓存，避免频繁DOM操作，以及结合原生JavaScript方法可以提高页面性能。 综上，《李炎恢jQuery在线课堂讲义》涵盖了jQuery的基本用法和高级应用，是一份全面...
jquery教程
04-07
4. **兼容性与性能优化**: jQuery处理了浏览器差异，但过度使用可能导致性能下降，合理选择原生JavaScript方法或使用`.on()`代替事件委托可优化性能。 ## 四、学习资源与实践 1. **官方文档**: jQuery的官方文档...
javaScript原生的事件委托原因及过程
EM宝宝的博客
06-25 236
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
事件代理on
weixin_33693070的博客
11-15 196
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>on</title> </head> <body> <input type="text"><input type...
原生JS实现事件委托
Essentric_
05-29 7888
什么是事件委托？ 它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。 举个栗子： 有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优...
原生js事件委托具体实现
weixin_52772897的博客
03-24 337
<body> <ul id="ul"> <li>0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <b...
原生js事件批量绑定-事件委托
sinat_32290679的博客
09-20 7381
我们常常会遇到一个需求，就是给表格里面的每个特定的td绑定一个事件.遇到这种需求，很多人基本都是直接上如下代码： var td = document.getElementsByTagName("td"); for( let i =0; i<td.length; i++){ td[i].onclick = function(){ //事件处理 }
原生js事件委托
demiling的博客
10-23 6850
之前面试的时候就被问过，什么是事件委托？ 事件委托：给父元素绑定事件，用来监听子元素的冒泡事件。也就是事件目标（子元素）不处理事件，把事件委托给父元素去处理。 看下图理解事件冒泡： 事件委托的好处：不需要对每一个子元素绑定事件，只需要在父元素上绑定事件，减少了操作DOM节点的次数，从而减少浏览器的重加载，提高代码的性能。 因此当子元素较多，需要对子元素进行监听的时候，可以使用事件委托。 //原生...
.click()与on('click',function())
热门推荐
zhouzy539的博客
10-17 3万+
之前遇到过一次.click()无效，改成on绑定click就好了的情况，看了几篇博客后，发现是自己对click()和on的理解不够，没太在意，最近又遇到了，所以写下这篇博客加深印象。 $(选择器).click(fn)：当选中的选择器被点击时触发回调函数fn。只针对与页面已存在的选择器。而.J_del这个删除按钮是通过append加到页面上的 。所以.click()无效 .$(documen...
jQuery on()方法实现原理（事件委托）
pony的博客
01-14 4710
html> html lang="en"> head> meta charset="UTF-8"> title>jQuery on()方法实现原理（事件委托）title> style> #list li{ margin: 20px; width: 200px; height: 50px;
微信小程序骨架屏
最新发布
djjdjdjdjddjjdjd的博客
08-16 418
⑤ 在onLoad 中页面加载前定义 isLoading.value=true, 在加载完后定义 isLoading.value=false.骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。① 在相应微信小程序页面右下角点生成骨架屏，左侧小程序目录会自动生成 .wxml 、.wxss 文件，⑥ 在生成骨架屏页面中 v-if="isLoading" v-else 定义显示与隐藏。
深入理解JavaScript事件：从原生到jQuery
"本文将深入探讨JavaScript的事件处理，包括原生JavaScript和jQuery的实现方式。我们将重点关注事件框架，常用框架如jQuery、Bootstrap和Zepto，以及如何利用这些框架进行网页开发。此外，我们将以jQuery为例，讲解...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值