js相关笔记（十六）
1.同时设置html，body，ul，li的width:100%;height:100%，会让li继承占满一整页空间，因为这个时候html、body、ul、li的宽度和高度都是默认占满一整页，无论怎么放大缩小，都是默认占满一整页。
2.在触发dom上的某个事件的时候，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持event，但支持的方式不同。例如操作鼠标时，就会添加鼠标位置的相关信息到事件对象中，普通浏览器支持event（传参数），但是IE678只支持 window.event(不传参数)【
document.onclick=function(event){
//兼容性写法
event=event||window.event
console.log(event);
}
】,在IE678中，通过传参数的方式是无法获取到event对象的，只能够使用window.event，但是在一些主流浏览器上可以通过传递参数的方式获取event对象，所以以上的兼容性写法由此而来。
3.pageY和pageX是以页面文档(0,0)为基准的，screenY和screenX是以屏幕(0,0)点为基准，clientY和clientX是以浏览器（浏览器可视区域）的(0,0)点为基准，屏幕就是你的显示器里的桌面，页面文档就是html区域，浏览器指的也是html区域，但是不同的地方在于，页面文档指的是整个html区域，无论html有多长，而浏览器指的html区域是指当前可见的那部分的html区域，所以，当页面被卷去的距离为0时，pageY和pageX与clientY和clientX是一样的，但是当页面被卷去的距离不为0时，pageY=clientY+scroll().scrollTop,pageX=clientX+scroll().scrollLeft，这就是以页面为基准和以浏览器为基准的区别，在IE678中不支持pageX和pageY这两个属性，所以只能通过pageY=clientY+scroll().scrollTop,pageX=clientX+scroll().scrollLeft来实现兼容，获取鼠标位于页面文档的真实坐标的兼容性写法是：【
var pageX=event.pageX||event.clientX+scroll().scrollLeft;
var pageY=event.pageY||event.clientY+scroll().scrollTop;
】。
3.图片放大的比例计算公式：
◆（大图片的实际宽度-大盒子的实际宽度）/(小盒子的实际宽度-遮盖层的实际宽度)，使用的原理是，让多余的部分进行对比，这样才能够更加准确的获取比例。
4.event对象的属性
◆timeStamp：返回事件生成的日期和时间。
◆bubbles：返回布尔值，指示事件是否是起泡事件类型。
◆button：返回当事件被触发时，哪个鼠标按钮被点击。
◆pageX：光标相对于该网页的水平位置（ie无）
◆pageY：光标相对于该网页的垂直位置（ie无）
◆screenX：光标相对于该屏幕的水平位置
◆screenY：光标相对于该屏幕的垂直位置
◆target：该事件被传送到的对象
◆type：事件的类型
◆clientX：光标相对于该网页的水平位置 （当前可见区域）
◆clientY：光标相对于该网页的垂直位置
5.清除选中的内容
◆window.getSelection().removeAllRanges();在IE9及以上等其它主流浏览器支持这种清除选中内容的方式，如IE9、Firefox、Safari、Chrome和Opera支持window.getSelection().removeAllRanges();
◆document.selection.empty();IE9以下支持这种清除选中的内容的方式。
★兼容性写法：window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();
6.动态设置滚动条的滑块儿的长度，公式：可见的内容的高度/内容的高度*可见的内容的高度。
2.在触发dom上的某个事件的时候，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持event，但支持的方式不同。例如操作鼠标时，就会添加鼠标位置的相关信息到事件对象中，普通浏览器支持event（传参数），但是IE678只支持 window.event(不传参数)【
document.onclick=function(event){
//兼容性写法
event=event||window.event
console.log(event);
}
】,在IE678中，通过传参数的方式是无法获取到event对象的，只能够使用window.event，但是在一些主流浏览器上可以通过传递参数的方式获取event对象，所以以上的兼容性写法由此而来。
3.pageY和pageX是以页面文档(0,0)为基准的，screenY和screenX是以屏幕(0,0)点为基准，clientY和clientX是以浏览器（浏览器可视区域）的(0,0)点为基准，屏幕就是你的显示器里的桌面，页面文档就是html区域，浏览器指的也是html区域，但是不同的地方在于，页面文档指的是整个html区域，无论html有多长，而浏览器指的html区域是指当前可见的那部分的html区域，所以，当页面被卷去的距离为0时，pageY和pageX与clientY和clientX是一样的，但是当页面被卷去的距离不为0时，pageY=clientY+scroll().scrollTop,pageX=clientX+scroll().scrollLeft，这就是以页面为基准和以浏览器为基准的区别，在IE678中不支持pageX和pageY这两个属性，所以只能通过pageY=clientY+scroll().scrollTop,pageX=clientX+scroll().scrollLeft来实现兼容，获取鼠标位于页面文档的真实坐标的兼容性写法是：【
var pageX=event.pageX||event.clientX+scroll().scrollLeft;
var pageY=event.pageY||event.clientY+scroll().scrollTop;
】。
3.图片放大的比例计算公式：
◆（大图片的实际宽度-大盒子的实际宽度）/(小盒子的实际宽度-遮盖层的实际宽度)，使用的原理是，让多余的部分进行对比，这样才能够更加准确的获取比例。
4.event对象的属性
◆timeStamp：返回事件生成的日期和时间。
◆bubbles：返回布尔值，指示事件是否是起泡事件类型。
◆button：返回当事件被触发时，哪个鼠标按钮被点击。
◆pageX：光标相对于该网页的水平位置（ie无）
◆pageY：光标相对于该网页的垂直位置（ie无）
◆screenX：光标相对于该屏幕的水平位置
◆screenY：光标相对于该屏幕的垂直位置
◆target：该事件被传送到的对象
◆type：事件的类型
◆clientX：光标相对于该网页的水平位置 （当前可见区域）
◆clientY：光标相对于该网页的垂直位置
5.清除选中的内容
◆window.getSelection().removeAllRanges();在IE9及以上等其它主流浏览器支持这种清除选中内容的方式，如IE9、Firefox、Safari、Chrome和Opera支持window.getSelection().removeAllRanges();
◆document.selection.empty();IE9以下支持这种清除选中的内容的方式。
★兼容性写法：window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();
6.动态设置滚动条的滑块儿的长度，公式：可见的内容的高度/内容的高度*可见的内容的高度。
