js之 matches (可以取代jq的 delegate 方法)
问题:请给#wrap 下面的子元素添加点击事件!
<div id="wrap">
<a class="btn" href="http://www.lyblog.net">点击代码</a>
<span class="btn">不可点击按钮</span>
</div>
jq的写法
//jQueryObject.on( events [, selector ] [, data ], handler )
$('#wrap').on('click', 'a.btn', function (e) {
console.log(1111);
})
js 写法
document.querySelector('#wrap').addEventListener("click", function (e) {
if (e.target.matches('a.btn')) {
console.log(111);
}
});
由于 'matches'支持情况也不太尽人意
通常在开发阶段兼容IE 8+及移动端,我更偏向于脱离jq等重量级的库。所以有了以下的兼容写法:
function matchesSelector(element, selector){
if(element.matches){
return element.matches(selector);
} else if(element.matchesSelector){
return element.matchesSelector(selector);
} else if(element.webkitMatchesSelector){
return element.webkitMatchesSelector(selector);
} else if(element.msMatchesSelector){
return element.msMatchesSelector(selector);
} else if(element.mozMatchesSelector){
return element.mozMatchesSelector(selector);
} else if(element.oMatchesSelector){
return element.oMatchesSelector(selector);
}
}
但主要IE 8正好不支持msMatchesSelector
方法,可以用如下方法处理以上函数,以便支持IE 8,完善之后的代码如下:
function matchesSelector(element,selector){
if(element.matches){
return element.matches(selector);
} else if(element.matchesSelector){
return element.matchesSelector(selector);
} else if(element.webkitMatchesSelector){
return element.webkitMatchesSelector(selector);
} else if(element.msMatchesSelector){
return element.msMatchesSelector(selector);
} else if(element.mozMatchesSelector){
return element.mozMatchesSelector(selector);
} else if(element.oMatchesSelector){
return element.oMatchesSelector(selector);
} else if(element.querySelectorAll){
var matches = (element.document || element.ownerDocument).querySelectorAll(selector),
i = 0; while(matches[i] && matches[i] !== element) i++;
return matches[i] ? true: false;
}
throw new Error('Your browser version is too old,please upgrade your browser');
}
第二部分 替换jquery的 closest
Closest 获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上。
//jquery
$("selector").closest();
//js
function closest(el,selector){
const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
while (el){
if(matchesSelector.call(el,selector)){
return el;
}else {
el = el.parentElement;
}
}
return null;
}
本文参考:http://www.lyblog.net/detail/601.html
https://github.com/oneuijs/You-Dont-Need-jQuery/blob/master/README.zh-CN.md
js之 matches (可以取代jq的 delegate 方法)的更多相关文章
- (GoRails) 用app/decorators来取代app/helpers; delegate()方法
视频:https://gorails.com/episodes/decorators-from-scratch?autoplay=1 装饰设置风格:把Model层变的干净,但不使用app/helper ...
- Js(DOM) 和Jq 对象的相互转换
JQuery 对象不能使用DOM对象中的方法,同样,Dom对象 不能使用JQuery 中的方法,但有时候 ,我们不得不使用JQuery的方法或者 Dom对象的方法,该怎么办呢? 下面介绍一下 jq对象 ...
- 【转】第4篇:Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告:委托回调方法分析
作者: 牛A与牛C之间 时间: 2013-11-18 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第4篇:Xilium CefGlue 关于 CLR Object 与 JS ...
- jQuery delegate方法实现Ajax请求绑定事件不丢失
给元素绑定click事件后 ,遇到一个问题:当执行一些ajax请求,再次调用此页面,里面的这个click事件就失效了 比如说:我的分页是一个ajax请求 但我点下一页时 后生成的元素a就没有了clic ...
- JQuery笔记(一)jq的使用方法
我用的jq版本是支持pc版为主的最高1版本里最高的1.124版本 官网的链接是只有最新的3下载,我把我在官网下载的jq代码链接发出来,如下 点我获取jq代码 和js不同的是,jq开发者封装了一些方法 ...
- JQ的ready()方法与window.onload()的区别与联系
JQ的ready()与window.onload()方法都是在文档加载完毕之后才会被触发的方法,但它们之间的区别也是很明显的. 1.区别与联系: $(document).ready() windo ...
- jQuery 事件 - delegate() 方法
<html><head><script type="text/javascript" src="/jquery/jquery.js" ...
- jquery delegate()方法 语法
jquery delegate()方法 语法 作用:delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数.使用 delegate( ...
- JS提交对象数组到服务端的方法总结(C#实例)
*转载请注明出处: 作者:willingtolove: 本文链接:http://www.cnblogs.com/willingtolove/p/4741549.html 正文: 1. 方法一:利用aj ...
随机推荐
- Eclipse部署项目的原理简介eclipse,wtpwebapps,tomcat
转载请注明出处! http://www.cnblogs.com/libingbin/ 感谢您的阅读.如果文章对您有用,那么请轻轻点个赞,以资鼓励.
- python-list tuple dict set
1:删除一个列表末尾的元素 pop方法 >>> a [1, 'Jack', 2, 3, 2] >>> a.pop() >>> a [1, 'Jac ...
- EntityFramework 数据库连接可用代码动态设定
摘自:http://blog.csdn.net/dyllove98/article/details/9289553 数据库生成位置可控制(其实主要就是DbContext的构造函数) 1.使用DbCon ...
- MongoDB-分片片键
1.分片 分片是什么?分片就是将数据存储在多个机器上.当数据集超过单台服务器的容量,服务器的内存,磁盘IO都会有问题,即超过单台服务器的性能瓶颈.此时有两种解决方案,垂直扩展和水平扩展(分片). ...
- ORACLE会话连接进程三者总结
概念介绍 通俗来讲,会话(Session) 是通信双方从开始通信到通信结束期间的一个上下文(Context).这个上下文是一段位于服务器端的内存:记录了本次连接的客户端机器.通过哪个应用程序.哪个用户 ...
- Symantec Backup Exec Remote Agent 2010在Redhat Enterprise 6.6上启动问题
在Red Hat Enterprise Linux Server release 6.6 (Santiago)上安装了Symantec Backup Exec Remote Agent 2010后,启 ...
- C#winfrom播放器动态加载歌词
上周我们进行了结业项目答辩,是播放器项目.有一个关于播放器变唱歌边加载歌词的方法特别有意思,像酷狗那样子歌词和歌曲同步滚播的样子. 这里的工具是Visual Studio 2013,使用语言是C#和. ...
- java中遍历map的两种方式
1.先将map对象转成set,然后再转为迭代器 Iterator iterator = map.entrySet().iterator(); while(iterator.hasNext()){ En ...
- IIS+域组策略+hosts:禁止访问指定网站
一.简介 禁止访问网站可以通过多种方式实现,在网络设备上实现大概是性能最好的方式.本文在域服务器上实现该功能,优点是配置简单.可自定义跳转页面,缺点也很明显,遇到熟悉操作系统的用户,修改hosts文件 ...
- 某墙尼妹,用个Response.Filter来解决StackExchange.Exceptional中google cdn的问题
某墙墙了古古路,一些开源的东东里用了古古路CDN,比如Exceptional,Opserver ,导致服务要么慢要么用不了 必须要替换之 Exceptional就只要用Response.Filter替 ...