1. 事件冒泡
同种事件同时实现时 子元素优先触发,如以下代码:
...
<input type="button" name="" id="" value="" />
...
var btn = document.querySelector("input");
document.onclick = function () {
console.log("doc点击");
}
btn.onclick = function () {
console.log("btn点击");
}
点击btn时相对于也点击了整个文档,这是会先打印
btn点击,再打印doc点击,在console.log("btn点击");下方添加window.event.cancelBubble = true;,这时只打印btn点击,这就是如何取消事件冒泡.
2.阻止系统的默认事件
鼠标右键时会弹出系统默认的菜单,如果想自己定义一个菜单就要消除系统默认的菜单,在你的右键函数最后写上return false;或者event.preventDefault()即可.但是此方法并不被ie支持，在ie下需要用window.event.returnValue = false;来实现.(我是比较讨厌ie的,大家都懂的...), 下面是我写的右键菜单,比较简单,代码就不写了哈.
3.几个事件兼容
(1)firefox
firefox火狐浏览器中事件为触发函数的第一个参数
其他浏览器为window.event
var evObj = ev || window.event;
(2)兼容ie的事件绑定函数
...
div{
width: 100px;
height: 100px;
background-color: yellow;
}
...
<div></div>
...
var div = document.querySelector('div');
if(window.navigator.userAgent.indexOf() =='IE'){
div.addEventListener('onclick' ,function(){
alert(1)
})
}else{
div.addEventListener('click',function(){
alert(1)
})
}
window.navigator.userAgent.indexOf() ==‘IE’也可以写成window.navigator.userAgent.indexOf(‘IE’) == -1
(3)事件监听兼容
function fn() {
alert(1);
}
if (document.addEventListener) {
document.addEventListener("click", fn);
} else if (document.attachEvent) {
// 兼容ie6-8
// 事件名需要加on
document.addEventListener("onclick", fn)
}
document.attachEvent就是为了兼容IE6-IE8,而且事件名要加on
3.各种宽度
clientWidth包括width和padding
offsetWidth包括width,padding和border
innerWidth 包括width和padding
outerWidth 包括width,padding和border
4.时间获取
getDay()返回表示星期的某一天的数字, 如果今天是周二就返回2
getDate()返回月份的某一天, 如果今天是17号就返回17
getTime()返回距 1970 年 1 月 1 日之间的毫秒数
5.cookie
cookie: 保存在浏览器上的数据
大小: 5kb
数据类型: 数字/字符串
数据格式: 键值对(key-value)
用处: 登录界面,保存用户名和密码
document.cookie = "user1=marry;";
document.cookie = "pwd=123456;";
document.cookie = "user=bibhi;";
// 保存到cookie的数据是一整个字符串
// string.split(分割符) 字符串切割
var cookies = document.cookie.split("; ");
for (var i = 0; i < cookies.length; i++) {
// 把每一个条目通过=切割
// 0位 -> 条目的描述(key)
// 1位 -> 具体的值(value)
var t = cookies[i].split("=");
console.log(t[0]);
console.log(t[1]);
}
保存用户名和密码这种东西可以写一个框架,以后要的时候调用就可以了,框架如下:
function setCookie(name, www) {
document.cookie = name + "=" + www + ";";
}
// 获取
function getCookie(name) {
// 条目数组
var cookies = document.cookie.split("; ")
for (var i = 0; i < cookies.length; i++) {
var a = cookies[i].split("=")
// a中包含两个数据
// 0->name
// 1->www
if (a[0] == name) {
return a[1];
}
}
// 如果没有找到对应内容返回false
return false;
}
function removeCookie(name) {
setCookie(name,"");
}
忘了写cookie的一些注意事项了:
1.字符串切割时 使用"; "切割( 要有空格)
2.cookie中不要保存中文
3.当添加的数据key值不存在时 新建条目 , 如果key值存在 覆盖原数据 覆盖后条目在cookie的末尾
4.一旦保存数据会一直存在
6.图片懒加载
如果一个页面很长,照片很多,当用户打开页面时如果所有照片都加载了会很浪费时间,用户体验较差.所以可以设置当用户向下滑动滚轮时再加载剩余的照片,这就是图片懒加载.
整体思想: 当页面滚动的距离大于图片距顶端的距离与窗口可视高度的差时,图片开始加载
具体写法如下:
简单的设置下图片的样式:
<style type="text/css">
img{
width: 600px;
height: 400px;
background-color: #CCCCCC;
position: absolute;
top: 1000px;
}
</style>
注意图片地址要写在 data-src 里
<body>
<img src="" data-src = "http://img2.zol.com.cn/product/98_940x705/577/ceDYOL5WHbbM.jpg"/>
</body>
js部分:
<script type="text/javascript">
var img = document.querySelector("img");
// 图片距顶端距离
var t = img.offsetTop;
// 窗口可视高度
var h = document.documentElement.clientHeight;
// 显示图片所需要的最小自动距离
var distance = t - h;
// 滑动触发
window.onscroll = function () {
// 滑动时 顶端距离
var scrollTop = document.body.scrollTop || window.pageYOffset ||document.documentElement.scrollTop;
// 懒加载
if (scrollTop >= distance) {
var imPath = img.getAttribute("data-src");
img.setAttribute("src", imPath);
}
}
</script>
这里
scrollTop是一个比较头疼的问题,又涉及到兼容的问题
(1)IE6/IE7/IE8：
对于没有doctype声明的页面里可以使用document.body.scrollTop来获取scrollTop高度 ；
有声明的可以直接使用document.documentElement.scrollTop；
(2)Firefox:
直接用document.documentElement.scrollTop ；
(3)chrome:
document.body.scrollTop和document.documentElement.scrollTop ；可能都取不到值
(4)Safari:
有自己获取scrollTop的函数 ：window.pageYOffset ；
所以保险的写法就是var scrollTop = document.body.scrollTop || window.pageYOffset ||document.documentElement.scrollTop;, 不管你是啥浏览器我都兼容.yi
