文章目錄
一、事件綁定
1.1 爲什麼要使用事件綁定？
在不使用事件綁定的時候，我們無法同時對一個對象處理多個相同的事件。
例如：
<body>
<input type="button" id="btn" value="彈出">
</body>
<script>
window.onload=function(){
var btn=document.getElementById('btn');
btn.onclick=function(){
alert('a');
}
btn.onclick=function(){
alert('b');
}
}
</script>
這個例子只會彈出b,而不會彈出a，因爲頁面會把上一個onclick事件覆蓋了。因此我們可以使用事件綁定解決這個問題。
1.2 addEventListenner() 事件綁定
<script>
window.onload=function(){
var btn=document.getElementById('btn');
if(btn.attachEvent){
//IE6-IE8情況
btn.attachEvent('onclick',function(){
alert('a');
});
btn.attachEvent('onclick',function(){
alert('b');
});
}else{
//Chrome、FireFox模式
//addEventListener(事件名,函數,false)
btn.addEventListener('click',function(){
alert('a');
},false);
btn.addEventListener('click',function(){
alert('b');
},false);
}
}
</script>
並且IE6-IE8下的彈出順序是反的，會先彈出b,再彈出a
可以發現我們的程序稍微的冗長，我們把它給封裝一下：
<script>
function myAddEvent(obj,event,fn){
if(obj.attachEvent){
//IE6-IE8
obj.attachEvent('on'+event,fn);
}else{
//Chrome、火狐
obj.addEventListener(event,fn,false);
}
};
window.onload=function(){
var btn=document.getElementById('btn');
myAddEvent(btn,'click',function(){
alert('a');
});
myAddEvent(btn,'click',function(){
alert('b');
});
}
</script>
看起來還不錯!
1.3 removeaddEventListenner() 解除事件綁定
實例：
<body>
<input type="button" id="btn" value="彈出">
</body>
<script>
window.onload=function(){
var btn = document.getElementById("btn");
var btn = document.getElementById("btn");
var handler = function () {
alert(this.value);
};
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false); //有效！
}
</script>
我們點擊過後可以發現，沒有任何東西彈出！說明成功移除！
注意: addEventListener()添加的匿名函數無法移除
實例：
<body>
<input type="button" id="btn" value="彈出">
</body>
<script>
window.onload=function(){
var btn = document.getElementById("btn");
btn.addEventListener("click", function () {
alert(this.value);
}, false);
btn.removeEventListener("click", function () { //無效！
alert(this.value);
}, false);
}
</script>
運行過後，點擊按鈕可以發現，還是會彈出，可以發現是真的不能移出匿名函數！
二、進階拖動DIV
2.1 在父元素的範圍內拖動DIV 附:GIF
<body style="height: 2000px;">
<div id="div">
<div id="div1"></div>
</div>
</body>
<style>
#div1{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
#div{
margin: 0 auto;
width: 1200px;
height: 600px;
background: #ccc;
position: relative;
}
</style>
<script>
window.onload=function(){
var div=document.getElementById('div1');
var new_div = document.getElementById('div');
disX=0;
disY=0;
div.onmousedown=function(ev){
var event = ev||event;
//鼠標到div左邊的距離
disX=event.clientX-div.offsetLeft;
//鼠標到div頂部的距離
disY=event.clientY-div.offsetTop;
document.onmousemove=function(ev){
var event = ev||event;
//判斷是否拖出可視區
var l = event.clientX-disX;
var t = event.clientY-disY;
//不允許超出左邊界
if(l<0){
//解決角落還可以移出的BUG
l=0;
//不允許超出右邊界
}else if(l>new_div.offsetWidth-div.offsetWidth){
l=new_div.offsetWidth-div.offsetWidth;
//不允許超出上邊界
}
if(t<0){
t=0;
//不允許超出下邊界
}else if(t>new_div.offsetHeight-div.offsetHeight){
t=new_div.offsetHeight-div.offsetHeight;
}
div.style.left=l+'px';
div.style.top=t+'px';
}
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
return false;
}
}
</script>
效果：
2.2 拖動DIV有虛線框 附:GIF
<body style="height: 2000px;">
<div id="div">
<div id="div1"></div>
</div>
</body>
<style>
#div1{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
#div{
margin: 0 auto;
width: 1200px;
height: 600px;
background: #ccc;
position: relative;
}
.box{
border: 1px dashed black;
position: absolute;
}
</style>
<script>
window.onload=function(){
var div=document.getElementById('div1');
var new_div = document.getElementById('div');
disX=0;
disY=0;
div.onmousedown=function(ev){
var event = ev||event;
//鼠標到div左邊的距離
disX=event.clientX-div.offsetLeft;
//鼠標到div頂部的距離
disY=event.clientY-div.offsetTop;
//創建虛線框
var box=document.createElement('div');
box.className='box';
box.style.width=div.offsetWidth-2+'px';
box.style.height=div.offsetHeight-2+'px';
box.style.left=div.style.left;
box.style.top=div.style.top;
new_div.appendChild(box);
document.onmousemove=function(ev){
var event = ev||event;
//判斷是否拖出可視區
var l = event.clientX-disX;
var t = event.clientY-disY;
//不允許超出左邊界
if(l<20){
//解決角落還可以移出的BUG
l=0;
//不允許超出右邊界
}else if(l>new_div.offsetWidth-div.offsetWidth-20){
l=new_div.offsetWidth-div.offsetWidth;
//不允許超出上邊界
}
if(t<20){
t=0;
//不允許超出下邊界
}else if(t>new_div.offsetHeight-div.offsetHeight-20){
t=new_div.offsetHeight-div.offsetHeight;
}
box.style.left=l+'px';
box.style.top=t+'px';
}
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
div.style.left=box.style.left;
div.style.top=box.style.top;
new_div.removeChild(box);
}
// return false;
}
}
</script>
效果：
三、滾動條
3.1 可拖動滾動條 附:GIF
<style>
#parent{
margin: 0 auto;
width: 600px;
height: 20px;
background: #Ccc;
position: relative;
}
#div1{
width: 20px;
height: 20px;
background: red;
position: absolute;
left: 0px;
top: 0px;
}
#div2{
width: 0px;
height: 0px;
background: green;
}
</style>
<script>
window.onload=function(){
var div=document.getElementById('div1');
var parent = document.getElementById('parent');
var div2=document.getElementById('div2');
disX=0;
disY=0;
div.onmousedown=function(ev){
var event = ev||event;
//鼠標到div左邊的距離
disX=event.clientX-div.offsetLeft;
document.onmousemove=function(ev){
var event = ev||event;
//判斷是否拖出可視區
var l = event.clientX-disX;
if(l<0){
l=0;
}else if (l>parent.offsetWidth-div.offsetWidth){
l=parent.offsetWidth-div.offsetWidth;
}
div.style.left=l+'px';
}
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
return false;
}
}
</script>
效果：
3.2 拖動改變DIV大小 附:GIF
<style>
#parent{
margin: 0 auto;
width: 600px;
height: 20px;
background: #Ccc;
position: relative;
}
#div1{
width: 20px;
height: 20px;
background: red;
position: absolute;
left: 0px;
top: 0px;
}
#div2{
width: 0px;
height: 0px;
background: green;
}
</style>
<script>
window.onload=function(){
var div=document.getElementById('div1');
var new_div = document.getElementById('parent');
var div2=document.getElementById('div2');
disX=0;
disY=0;
div.onmousedown=function(ev){
var event = ev||event;
//鼠標到div左邊的距離
disX=event.clientX-div.offsetLeft;
//鼠標到div頂部的距離
disY=event.clientY-div.offsetTop;
document.onmousemove=function(ev){
var event = ev||event;
//判斷是否拖出可視區
var l = event.clientX-disX;
var t = event.clientY-disY;
//不允許超出左邊界
if(l<0){
//解決角落還可以移出的BUG
l=0;
//不允許超出右邊界
}else if(l>new_div.offsetWidth-div.offsetWidth){
l=new_div.offsetWidth-div.offsetWidth;
//不允許超出上邊界
}
if(t<0){
t=0;
//不允許超出下邊界
}else if(t>new_div.offsetHeight-div.offsetHeight){
t=new_div.offsetHeight-div.offsetHeight;
}
div.style.left=l+'px';
div.style.top=t+'px';
var scale=l/(new_div.offsetWidth-div.offsetWidth);
document.title=scale;
div2.style.width=400*scale+'px';
div2.style.height=400*scale+'px';
}
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
return false;
}
}
</script>
效果：
3.3 拖動改變顯示區域(自定義滾動條) 附:GIF
<body>
<div id="parent">
<div id="div1"></div>
</div>
<div id="div2">
<div id="div3">
Google 編輯 討論99+ 上傳視頻
谷歌公司（Google Inc.）成立於1998年9月4日，由拉里·佩奇和謝爾蓋·布林共同創建，被公認爲全球最大的搜索引擎公司。 [1]
谷歌是一家位於美國的跨國科技企業，業務包括互聯網搜索、雲計算、廣告技術等，同時開發並提供大量基於互聯網的產品與服務，其主要利潤來自於AdWords等廣告服務。 [2]
1999年下半年，谷歌網站“Google”正式啓用。 [3] 2010年3月23日，宣佈關閉在中國大陸市場搜索服務。2015年8月10日，宣佈對企業架構進行調整，並創辦了一家名爲Alphabet的“傘形公司”（Umbrella Company），成爲Alphabet旗下子公司。2015年，在2015年度“世界品牌500強”排行中重返榜首，蘋果和亞馬遜分別位居第二和第三名。2016年6月8日，《2016年BrandZ全球最具價值品牌百強榜》公佈，以2291.98億美元的品牌價值重新超越蘋果成爲百強第一。 [4] 2017年2月，Brand Finance發佈2017年度全球500強品牌榜單，排名第一。 [5] 2017年6月，《2017年BrandZ最具價值全球品牌100強》公佈，谷歌公司名列第一位。 [6]
2017年12月13日，谷歌正式宣佈谷歌AI中國中心（Google AI China Center）在北京成立。 [7]
2018年1月，騰訊和谷歌宣佈雙方簽署一份覆蓋多項產品和技術的專利交叉授權許可協議。 [8] 2018年5月29日，《2018年BrandZ全球最具價值品牌100強》發佈，谷歌公司名列第一位。12月18日，世界品牌實驗室編制的《2018世界品牌500強》揭曉，Google排名第2位。 [9] 2019年度全球最具價值100大品牌榜第二位。 [10]
1998年，拉里·佩奇和謝爾蓋·布林在美國斯坦福大學的學生宿舍內共同開發了谷歌在線搜索引擎，並迅速傳播給全球的信息搜索者；8月7日，谷歌公司在美國加利福尼亞州山景城以私有股份公司的型式創立。 [3] 同年，發明Google PageRank專利。 [13]
2001年9月，谷歌的網頁評級機制PageRank被授予了美國專利。專利正式地被頒發給斯坦福大學，拉里·佩奇作爲發明人列於其中。
2004年2月，因爲雅虎放棄使用谷歌搜索引擎而決定獨立開發自己的搜索引擎，谷歌的市場份額較前跌落。
2004年8月19日，谷歌公司在納斯達克上市，成爲公有股份公司。 [3]
2005年7月19日，谷歌宣佈在中國設立研發中心。
谷歌總部
谷歌總部
2005年12月20日，谷歌宣佈斥資10億美元收購互聯網服務供應商“美國在線”5%的股權。
2006年2月15日，谷歌在臺灣地區登記成立分公司“美商科高國際有限公司”，並作爲臺灣服務器的域名運營商。
2006年4月12日，谷歌公司行政總裁埃裏克·施密特在北京宣佈公司的全球中文名字爲“谷歌”。 [14]
2006年10月，谷歌以16.5億美元收購影音內容分享網站YouTube，這是谷歌公司成立以來最大筆的併購。 [15]
2007年11月05日，谷歌宣佈開發基於Linux平臺的開源手機操作系統並命名爲Android。
2008年9月7日，谷歌地圖衛星發射升空，爲谷歌地圖服務提供50釐米分辨率高清照片。 [16]
2010年3月23日3時3分，谷歌高級副總裁、首席法律官大衛·德拉蒙德公開發表聲明，宣佈谷歌關閉在中國大陸市場搜索服務，並將搜索服務由中國內地轉至香港。 [17]
2012年12月12日，谷歌在向中國地區合作伙伴發出的通知中表示，宣佈於今天正式在中國市場關閉購物搜索服務。 [18] 不過此次調整之後，谷歌也表示將停止通過Google Merchant Center幫助中心提供中文電子郵件支持服務。 [18]
2012年5月，谷歌以125億美元收購摩托羅拉移動。
2012年6月28日，Google I/O開發者大會在美國舊金山開幕，併發布代號爲“果凍豆”的操作系統安卓4.1、谷歌首款自主品牌平板電腦Nexus7、社交流媒體播放器NexusQ以及概念智能眼鏡“谷歌眼鏡”。
2012年9月，谷歌中國宣佈停止在中國市場提供音樂搜索服務。此後，在“Google.cn”上提供的服務入口僅包括時惠、翻譯、購物三個。 [18] 8日，谷歌收購網絡安全創業公司VirusTotal，旨在增強針對自身互聯網服務的保護措施。 [19]
Google的中文頁面
Google的中文頁面
2012年10月2日，谷歌超越微軟，成爲市值全球第二大科技公司，當日，谷歌市值擴大至約2499億美元。
2012年12月2日，谷歌斥資1700萬美元收購一家名爲BufferBox的電商儲物服務公司，該公司的服務主要解決購物包裹遞送“最後一公里”的問題。 [20]
2013年3月，谷歌進軍電商行業，推動購物快遞服務。同年，谷歌中國臺灣數據中心開始運營，總建造成本約爲3億美元；谷歌中國香港數據中心正在建設中。谷歌表示，從整體能耗來看，該公司的數據中心將比其他競爭對手的數據中心節能50%。Google的數據中心主要爲Facebook、亞馬遜、微軟、雅虎等數十家公司的產品提供服務。 [21]
2013年6月11日，谷歌宣佈收購導航軟件公司Waze，成爲谷歌較大的一次收購行爲。 [22] [23]
谷歌洛杉磯辦公室
谷歌洛杉磯辦公室(7張)
2013年6月15日，谷歌名爲“潛鳥計劃”（Project Loon）項目的30個氣球於15日在新西蘭的南島發射升空。 [24]
2013年10月3日，谷歌收購Flutter，該公司的主要業務是手勢識別技術。 [25]
2013年10月31日，谷歌正式宣佈推出新版旗艦式手機Nexus 5，此款手機搭載該公司自己的最新操作系統KitKat Android，這款操作系統也是針對全球用戶設計，谷歌旨在通過這一系列措施來制止全球智能手機市場因不同版本軟件引發的碎片化現象。 [26]
2014年1月6日，谷歌與通用汽車、本田、奧迪、現代和Nvidia聯合成立“開放汽車聯盟”，將谷歌開源系統Android應用於汽車領域。 [27] 25日，谷歌的Gmail服務發生全球大範圍停擺故障，另外Google+和YouTube也出現了訪問困難。谷歌尚未公佈原因。 [28]
2014年5月27日，谷歌在華遭遇大規模屏蔽，包括極爲重要的HTTPS搜索服務和谷歌登錄服務，且所有相關的谷歌服務都受到影響。
2014年7月1日，早在2013年白色情人節就已確定的谷歌掃除計劃兌現，GreaderRSS閱讀被關閉。
2014年8月12日，谷歌宣佈與其他5家公司合作，建設價值3億美元的太平洋海底光纜系統，從而幫助亞洲用戶獲得更快的網速。 [29]
2014年10月13日，谷歌進軍日趨熱門的遠程醫療領域。 [30]
2014年11月22日，歐洲議會正準備通過一項動議案，要求拆分谷歌，剝離搜索業務。 [31-32] 該議案建議將谷歌的搜索引擎與該公司的其他服務分開，以遏制谷歌在高科技行業統治地位，這項動議案獲得了歐洲議會兩個主要政黨——歐洲人民黨和社會黨的支持。 [32-33]
2014年12月12日，谷歌證實將關閉設在俄羅斯的工程部，近百名工程師將被安排到其他國家從事新工作。除工程部外，谷歌在俄羅斯的其他部門將照常運營。 [34] 17日，因西班牙立法機構最近通過的《著作權法》，谷歌退出該國市場 [35] 。
劇透屏蔽系統示意圖
劇透屏蔽系統示意圖
2015年1月27日，谷歌宣佈公司的高速光纖網絡項目將再覆蓋四座城市，包括亞特蘭大、納什維爾、夏洛特和羅利-達勒姆。 [36]
2015年2月4日，谷歌宣佈剛收購了兒童卡通應用開發商Launchpad Toys，希望藉此拓展兒童移動應用市場 [37] ，谷歌稱，這是“首款以兒童爲設計初衷的谷歌產品”。 [38] 24日，谷歌正式發佈Android版和iOS版YouTube。
</div>
</div>
</body>
<style>
#parent{
margin: 0 auto;
width: 600px;
height: 20px;
background: #Ccc;
position: relative;
}
#div1{
width: 20px;
height: 20px;
background: red;
position: absolute;
left: 0px;
top: 0px;
}
#div2{
width: 400px;
height: 300px;
border: 1px solid black;
position: relative;
overflow: hidden;
}
#div3{
position: absolute;
left: 0px;
top: 0px;
}
</style>
<script>
window.onload=function(){
var div=document.getElementById('div1');
var div2=document.getElementById('div2');
var div3=document.getElementById('div3');
var parent = document.getElementById('parent');
disX=0;
div.onmousedown=function(ev){
var event = ev||event;
//鼠標到div左邊的距離
disX=event.clientX-div.offsetLeft;
//鼠標到div頂部的距離
disY=event.clientY-div.offsetTop;
document.onmousemove=function(ev){
var event = ev||event;
//判斷是否拖出可視區
var l = event.clientX-disX;
var t = event.clientY-disY;
//不允許超出左邊界
if(l<0){
//解決角落還可以移出的BUG
l=0;
//不允許超出右邊界
}else if(l>parent.offsetWidth-div.offsetWidth){
l=parent.offsetWidth-div.offsetWidth;
//不允許超出上邊界
}
if(t<0){
t=0;
//不允許超出下邊界
}else if(t>parent.offsetHeight-div.offsetHeight){
t=parent.offsetHeight-div.offsetHeight;
}
div.style.left=l+'px';
div.style.top=t+'px';
var scale=l/(parent.offsetWidth-div.offsetWidth);
document.title=scale;
div3.style.top=-scale*(div3.offsetHeight-div2.offsetHeight)+'px';
}
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
return false;
}
}
</script>
效果：
