在jQuery中,一个金桥对象能一直连续调用各种方法,因为jQuery把这些方法挂载他自定义的一个对象中,但是使用原生的js获取的DOM对象,只能使用一次<强> 强方法添加事件,如果要接着添加事件,还得再调用addEventLisenter。
var=document.querySelector区域(“.area”);
区域。addEventListener (mouseenter,函数(){
控制台。日志(“鼠标输入”);
}）;
区域。addEventListener(“点击”,函数(){
控制台。日志('点击');
}）;
之前
可是如果我想在地区绑定mouseenter事件后,接着绑定点击事件呢。我们也可以参考下jQuery的实现思路,但是jQuery这没么完善。
;(函数(){
窗口。G=function(选择){
返回新_G(选择);
}
函数_G(选择){
这一点。元素=document.querySelector(选择);
返回;
}
_G。原型={
构造函数:_G,
方法:函数(名称、fn) {
如果(this.elements) {
this.elements。addEventListener(名称、fn假);
}
返回;
}
}
}）（）;
之前
这样我们就能实现一个简单的链式调用了,给。区同时绑定两个事件:
G (“.area”)。方法(mouseenter,函数(){
控制台。日志(“鼠标输入”);
})。方法(“点击”,函数(){
控制台。日志('点击');
}）
之前
实现原理相信大家看到代码也非常的清楚:
<李>输出一下他返回的就是一个_G的实例对象,李
<李>在_G的内部,把DOM对象存储在元素上,然后原型上实现了方法方法,就是给元素添加对应的事件,每次调用后,都把这返回,供下次使用,李
<李> G (“.area”)就能使用使用方法来添加事件了,同时每次方法都会把这返回,这样就能连续添加事件
李
上面的代码我们只是实现了如何为DOM对象连续添加事件,当然我们还可以在_G。原型中添加别的方法,不过别忘记了:
_G。原型={
构造函数:_G,
方法:函数(名称、fn) {
如果(this.elements) {
this.elements。addEventListener(名称、fn假);
}
返回;
}，
显示:函数(){
this.elements.style.display=";
返回;
}，
隐藏:函数(){
this.elements.style.display='没有';
返回;
}
}
之前
这样G()就能使用显示()和隐藏()了:
//隐藏
G (.area) hide ();//显示并且绑定点击事件
G (“.area”),告诉()。方法(“点击”,函数(){
控制台。日志(Date.now ());
}）
之前
<强>注意:强不是原生的DOM对象,不能直接操作DOM对象上的属性与方法,比如我想隐藏。面积:
G (.area) .style.display='没有';//错误
是不能这么操作的.DOM对象存储在元素中,如果想直接在DOM对象上操作,可以:
G (.area) .elements.style.display='没有';//正确
总结一下,这里我们也只是用原生js简单的实现了下链式操作,更复杂的功能,比如对象缓存,异常处理等等,都需要后续再完善处理。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
