84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
通常要给很多元素加上事件,比如点击等等。这时候可能就会写很多类型下面的语句
document.querySelector('#id').addEventListener()
可能你要绑定多少元素就会要写多少句,感觉十分的不好看。如果在dom上直接写 onclick = xx函数。 然后js里只需要写上相关的回调函数,这些回调函数可以单独写在一个js文件里,感觉就会优雅一些。
不知道你们一般怎么写事件绑定的。 当然是在不用框架的前提下,不过用框架的话,写法和我上面提到的类似。
小伙看你根骨奇佳,潜力无限,来学PHP伐。
首先对于事件绑定,可以采用惰性加载的方法。
var addListener = null, removeListener = null; if (typeof window.addEventListener === 'function') { addListener = function(el, type, fn) { el.addEventListener(type, fn, false); }; removeListener = function(el, type, fn) { el.removeEventListener(type, fn, false); }; } else if (typeof doc.attachEvent === 'function') { //'IE' addListener = function(el, type, fn) { el.attachEvent('on'+type, fn); }; removeListener = function(el, type, fn) { el.detachEvent('on'+type, fn); }; } else { addListener = function(el, type, fn) { el['on'+type] = fn; }; removeListener = function(el, type, fn) { el['on'+type] = null; }; }
这是能兼容绝大多浏览器的写法。紧接着,你可以通过定义一个存储回调函数的对象EventHandler来把回调函数单独放在一个js文件里,比如
var EventHandler = { confirmBtnClickEvent: function(e){} ... };
最后,进行事件绑定时可以这么写:
addListener(dom, "click", EventHandler.confirmBtnClickEvent);
自己写工具库啊,就比如jQuery就是一个很好的工具库(这类我不喜欢叫它框架)
比如:
function $(ele, event, callback){ document.querySelector(ele).addEventListener(event,callback); }
类似这样,之后你每次就只需要
$('#id','click',function(){ /*xxx*/ });
如果是同种类型的的绑定事件例如一个ul下面的li点击事件可以用事件委托,还有不会随着你li的dom改变而事件失效或是重叠。
关于题主的如何优雅的写代码绑定代码,可以参照jquery源码!至于在dom绑定onclick,不推荐!主要耦合性高,要是代码量多了,你需要绑定N个,难道交给后台帮你循环?onclick,事件单一,不支持多事件。注意页面的表现与行为分离,如果你用MVVM就当我没有说!
首先对于事件绑定,可以采用惰性加载的方法。
这是能兼容绝大多浏览器的写法。
紧接着,你可以通过定义一个存储回调函数的对象EventHandler来把回调函数单独放在一个js文件里,比如
最后,进行事件绑定时可以这么写:
自己写工具库啊,就比如jQuery就是一个很好的工具库(这类我不喜欢叫它框架)
比如:
类似这样,之后你每次就只需要
如果是同种类型的的绑定事件例如一个ul下面的li点击事件可以用事件委托,还有不会随着你li的dom改变而事件失效或是重叠。
关于题主的如何优雅的写代码绑定代码,可以参照jquery源码!至于在dom绑定onclick,不推荐!主要耦合性高,要是代码量多了,你需要绑定N个,难道交给后台帮你循环?onclick,事件单一,不支持多事件。注意页面的表现与行为分离,如果你用MVVM就当我没有说!