博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
e.target与事件委托简例
阅读量:6314 次
发布时间:2019-06-22

本文共 1196 字,大约阅读时间需要 3 分钟。

target定义:

    target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口。

语法:

    event.target

    event.target.nodeName    //获取事件触发元素标签name(li,p...)

    event.target.id       //获取事件触发元素id

    event.target.className  //获取事件触发元素classname

    event.target.innerHTML  //获取事件触发元素的内容(li)

    等。。。

jquery:this 与 e.target区别

    this会冒泡。e.target不冒泡就是指向事件触发的dom。

事件委托:原生js

    事件委托就是事件目标自身不处理事件,而是把处理任务委托给其父元素或者祖先元素,甚至根元素(document)。

    使用事件委托时,如果目标元素上的其他事件处理程序使用.stopPropagation()阻止了事件传播,那么事件委托就会失效。

事件委托简单例子:

    给ul添加监听click事件,利用冒泡机制具体捕获是ul下的哪一个li触发的click事件

HTML:

  • 1
  • 2
  • 3
  • 4
  • 5

 JavaScript:

// 给ul添加监听器document.getElementById("ul").addEventListener("click",function(e) {    // e.target是被点击的元素!    // 筛选触发事件的子元素如果是li执行的事件    if(e.target && e.target.nodeName == "LI") {        // 获取到具体事件触发的li,输出其id        console.log("List item ",e.target.id.replace("post-")," was clicked!");    }});

  

jQuery(1.7版本起,on()代替live(),bind(),delegate()方法)的on()方法,也是事件委托

  on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

  使用 on() 方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)。

  如需移除事件处理程序,请使用 off()方法。如需添加只运行一次的事件然后移除,请使用 one() 方法

如有错误,还请指出以便改正。

 

转载于:https://www.cnblogs.com/tongxuping/p/9008126.html

你可能感兴趣的文章
大厂前端高频面试问题与答案精选
查看>>
我们用5分钟写了一个跨多端项目
查看>>
Visual Studio 15.4发布,新增多平台支持
查看>>
有赞透明多级缓存解决方案(TMC)设计思路
查看>>
如何设计高扩展的在线网页制作平台
查看>>
Git 2.5增加了工作树、改进了三角工作流、性能等诸多方面
查看>>
Swift 5将强制执行内存独占访问
查看>>
中台之上(二):为什么业务架构存在20多年,技术人员还觉得它有点虚?
查看>>
深度揭秘腾讯云低功耗广域物联网LPWAN 技术及应用
查看>>
与Jeff Sutherland谈敏捷领导力
查看>>
More than React(四)HTML也可以静态编译?
查看>>
React Native最佳学习模版- F8 App开源了
查看>>
云服务正在吞噬世界!
查看>>
阅读Android源码的一些姿势
查看>>
Web语义化标准解读
查看>>
一份代码构建移动、桌面、Web全平台应用
查看>>
高性能 Lua 技巧(译)
查看>>
区分指针、变量名、指针所指向的内存
查看>>
异步编程的世界
查看>>
最近话题火爆的四件事你知道不?
查看>>