首先对于事件绑定，可以采用惰性加载的方法。

    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就当我没有说！