获取滑动条位置，动态调整对话框显示位置；为动态添加的button添加click事件

1.获取滑动条位置，动态调整对话框显示位置

应用场景：页面上有三个按钮，所处位置高度不同，有的按钮需要移动滑动条才能看到，各个按钮点击后要弹出同一个对话框，为了保证对话框始终显示在当前视野的中央位置，需要先获取滑动条位置，再设置对话框弹出位置，然后再显示对话框。

代码如下：

//点击上传文件按钮，打开上传文件对话框function onClickBtn(inputElementId){    document.getElementById("inputElementId").value = inputElementId;    //根据input元素ID确定对话框中的文字提示    var str = "";    if(inputElementId == "type1"){        str = "btn_tip1";    }else if(inputElementId == "type2"){        str = "btn_tip2";    }else if(inputElementId == "type3"){        str = "btn_tip3";    }else{        str = "btn_tip";    }    //根据点击的按钮的不同 对话框做不同的提示    $("#dialogTipInfo").html(str);    var scrollXYArr = getPageScroll();    var scrollX = scrollXYArr[0];    var scrollY = scrollXYArr[1];    var windowSize = getWindowSize();    var windowSizeX = windowSize.w;    var windowSizeY = windowSize.h;    var left = scrollX + windowSizeX*0.4 + 'px';    var top = scrollY + windowSizeY*0.3 + 'px';    //根据当前滚动条的位置和窗口大小动态设置对话框的位置    document.getElementById("dlgBody").style.left = left;    document.getElementById("dlgBody").style.top = top;    //alert("left: " + left + "; top: " + top);    //清空之前文件输入    document.getElementById("attachment").value = "";    $("#dlg").css("display","");} //获取滚动条的位置function getPageScroll() {    var xScroll, yScroll;    if (self.pageYOffset) {        yScroll = self.pageYOffset;        xScroll = self.pageXOffset;    } else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict        yScroll = document.documentElement.scrollTop;        xScroll = document.documentElement.scrollLeft;    } else if (document.body) { // all other Explorers        yScroll = document.body.scrollTop;        xScroll = document.body.scrollLeft;    }    var arrayPageScroll = new Array(xScroll, yScroll);    return arrayPageScroll;}//取当前浏览器width heightfunction getWindowSize(){    var w = 0;    var h = 0;    if(document.documentElement && document.documentElement.clientHeight) {        w = document.documentElement.clientWidth;        h = document.documentElement.clientHeight;    } else if (document.body && document.body.clientHeight) {        w = document.body.clientWidth;        h = document.body.clientHeight;    } else if(window.innerHeight) {        w = window.innerWidth;        h = window.innerHeight;    }    return {        w: w,        h: h    };}

2.通过js动态添加的button，不能直接在添加button语句后，直接定义click事件,必须按照下面语句添加click响应事件

//不能在追加元素后 绑定$(document).on('click','.myBtnCls',function(){      var eleId = this.parentNode.children[0].id;      onClickBtn(eleId);});

对于以下两种绑定click事件的方式：

$(document).on('click','.classname',function(){});$('.classname').on('click',function(){});

区别为：
$(document).on是把事件委托到document上，$('className').on是把事件绑定到.className元素上。效率方面，直接绑定在元素上会更为高效，绑定在document上，每次document有点击动作，浏览器都会判断当前点击的对象，如果匹配，再决定要不要执行，多了一个判断的环节。但在目前开发中，JS渲染效率很高，所以此异同基本可以忽略不计。
此外，针对$(document).on的触发特点，延伸一下，$("className").on为onclick绑定，只有在页面onload的时候执行一次，当页面重画(比如js动态添加的一些元素)后，新加载的具有className的元素便没有事件绑定到上面了，相反$(document).on这种方法会刷新和重新赋予绑定操作，所以一定程度上更为全面。
这就对标题二提出的解决方案给出了完美的解释。