1. 事件冒泡
同種事件同時(shí)實(shí)現(xiàn)時(shí) 子元素優(yōu)先觸發(fā),如以下代碼:
...
<input type="button" name="" id="" value="" />
...
var btn = document.querySelector("input");
document.onclick = function () {
console.log("doc點(diǎn)擊");
}
btn.onclick = function () {
console.log("btn點(diǎn)擊");
}
點(diǎn)擊btn時(shí)相對(duì)于也點(diǎn)擊了整個(gè)文檔,這是會(huì)先打印
btn點(diǎn)擊,再打印doc點(diǎn)擊,在console.log("btn點(diǎn)擊");下方添加window.event.cancelBubble = true;,這時(shí)只打印btn點(diǎn)擊,這就是如何取消事件冒泡.
2.阻止系統(tǒng)的默認(rèn)事件
鼠標(biāo)右鍵時(shí)會(huì)彈出系統(tǒng)默認(rèn)的菜單,如果想自己定義一個(gè)菜單就要消除系統(tǒng)默認(rèn)的菜單,在你的右鍵函數(shù)最后寫上return false;或者event.preventDefault()即可.但是此方法并不被ie支持，在ie下需要用window.event.returnValue = false;來實(shí)現(xiàn).(我是比較討厭ie的,大家都懂的...), 下面是我寫的右鍵菜單,比較簡單,代碼就不寫了哈.
3.幾個(gè)事件兼容
(1)firefox
firefox火狐瀏覽器中事件為觸發(fā)函數(shù)的第一個(gè)參數(shù)
其他瀏覽器為window.event
var evObj = ev || window.event;
(2)兼容ie的事件綁定函數(shù)
...
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)事件監(jiān)聽兼容
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.時(shí)間獲取
getDay()返回表示星期的某一天的數(shù)字, 如果今天是周二就返回2
getDate()返回月份的某一天, 如果今天是17號(hào)就返回17
getTime()返回距 1970 年 1 月 1 日之間的毫秒數(shù)
5.cookie
cookie: 保存在瀏覽器上的數(shù)據(jù)
大小: 5kb
數(shù)據(jù)類型: 數(shù)字/字符串
數(shù)據(jù)格式: 鍵值對(duì)(key-value)
用處: 登錄界面,保存用戶名和密碼
document.cookie = "user1=marry;";
document.cookie = "pwd=123456;";
document.cookie = "user=bibhi;";
// 保存到cookie的數(shù)據(jù)是一整個(gè)字符串
// string.split(分割符) 字符串切割
var cookies = document.cookie.split("; ");
for (var i = 0; i < cookies.length; i++) {
// 把每一個(gè)條目通過=切割
// 0位 -> 條目的描述(key)
// 1位 -> 具體的值(value)
var t = cookies[i].split("=");
console.log(t[0]);
console.log(t[1]);
}
保存用戶名和密碼這種東西可以寫一個(gè)框架,以后要的時(shí)候調(diào)用就可以了,框架如下:
function setCookie(name, www) {
document.cookie = name + "=" + www + ";";
}
// 獲取
function getCookie(name) {
// 條目數(shù)組
var cookies = document.cookie.split("; ")
for (var i = 0; i < cookies.length; i++) {
var a = cookies[i].split("=")
// a中包含兩個(gè)數(shù)據(jù)
// 0->name
// 1->www
if (a[0] == name) {
return a[1];
}
}
// 如果沒有找到對(duì)應(yīng)內(nèi)容返回false
return false;
}
function removeCookie(name) {
setCookie(name,"");
}
忘了寫cookie的一些注意事項(xiàng)了:
1.字符串切割時(shí) 使用"; "切割( 要有空格)
2.cookie中不要保存中文
3.當(dāng)添加的數(shù)據(jù)key值不存在時(shí) 新建條目 , 如果key值存在 覆蓋原數(shù)據(jù) 覆蓋后條目在cookie的末尾
4.一旦保存數(shù)據(jù)會(huì)一直存在
6.圖片懶加載
如果一個(gè)頁面很長,照片很多,當(dāng)用戶打開頁面時(shí)如果所有照片都加載了會(huì)很浪費(fèi)時(shí)間,用戶體驗(yàn)較差.所以可以設(shè)置當(dāng)用戶向下滑動(dòng)滾輪時(shí)再加載剩余的照片,這就是圖片懶加載.
整體思想: 當(dāng)頁面滾動(dòng)的距離大于圖片距頂端的距離與窗口可視高度的差時(shí),圖片開始加載
具體寫法如下:
簡單的設(shè)置下圖片的樣式:
<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;
// 顯示圖片所需要的最小自動(dòng)距離
var distance = t - h;
// 滑動(dòng)觸發(fā)
window.onscroll = function () {
// 滑動(dòng)時(shí) 頂端距離
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是一個(gè)比較頭疼的問題,又涉及到兼容的問題
(1)IE6/IE7/IE8：
對(duì)于沒有doctype聲明的頁面里可以使用document.body.scrollTop來獲取scrollTop高度 ；
有聲明的可以直接使用document.documentElement.scrollTop终抽；
(2)Firefox:
直接用document.documentElement.scrollTop 易猫；
(3)chrome:
document.body.scrollTop和document.documentElement.scrollTop ；可能都取不到值
(4)Safari:
有自己獲取scrollTop的函數(shù) ：window.pageYOffset 晾匠；
所以保險(xiǎn)的寫法就是var scrollTop = document.body.scrollTop || window.pageYOffset ||document.documentElement.scrollTop;, 不管你是啥瀏覽器我都兼容.yi
