84669 Lernen von Personen
152542 Lernen von Personen
20005 Lernen von Personen
5487 Lernen von Personen
7821 Lernen von Personen
359900 Lernen von Personen
3350 Lernen von Personen
180660 Lernen von Personen
48569 Lernen von Personen
18603 Lernen von Personen
40936 Lernen von Personen
1549 Lernen von Personen
1183 Lernen von Personen
32909 Lernen von Personen
通常要给很多元素加上事件,比如点击等等。这时候可能就会写很多类型下面的语句
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就当我没有说!