Event事件
妙味課堂-Event事件
1、焦點：當(dāng)一個元素有焦點的時候，那么他就可以接受用戶的輸入(不是所有元素都能接受焦點)
給元素設(shè)置焦點的方式：
1、點擊
2、tab
3、js
2、（例子：輸入框提示文字）
onfocus:當(dāng)元素獲取焦點時觸發(fā)：
1 element.onfocus = function(){};
onblur:當(dāng)元素失去焦點時觸發(fā)：
1 element.onblur = function(){};
obj.focus() 給指定的元素設(shè)置焦點
obj.blur() 取消指定元素的焦點
obj.select()選擇指定元素里面的文本內(nèi)容
3、（例子：方塊隨著鼠標(biāo)移動）
event: 事件對象。
當(dāng)一個事件發(fā)生時，和當(dāng)前這個對象發(fā)生的事件所有有關(guān)的信息都會臨時保存在一個指定的地方-event對象，供我們需要時調(diào)用。就像是飛機的黑匣子。
事件對象必須在一個對象的事件調(diào)用函數(shù)中使用才有內(nèi)容。
事件函數(shù)：事件調(diào)用的函數(shù)，一個函數(shù)是不是事件函數(shù)，不在定義時決定而是在調(diào)用的時候決定
4、兼容
1 element.onclick = fn1;
IE/Chrome瀏覽器:event是一個內(nèi)置的全局對象（可以直接使用）
1 function fn1(){
2 alert(event);
3 }
標(biāo)準(zhǔn)下：事件對象是通過事件函數(shù)的第一個參數(shù)傳入
1 function fn1(ev){
2 alert(ev);
3 }
兼容寫法：
1 function fn1(ev){
2 var ev = ev || event;
3 }
clientX[Y]:當(dāng)一個事件發(fā)生的時候，鼠標(biāo)到頁面可視區(qū)的距離
5、事件流（例子：仿select控件）
● 事件冒泡：當(dāng)一個元素接受到事件的時候，會把他接受到的事件傳播給他的父級，一直到頂層window。
● 事件捕獲:一個元素要想接受到事件，它的父元素會首先接受到該事件，然后再傳給它。
注意：在ie下是沒有的事件捕獲的。在事件綁定中，標(biāo)準(zhǔn)下有
6、事件綁定
● 第一種：
1 element.onclick = fn1;
注意：oDiv.onclick = fn1;
oDiv.onclick = fn2;
這樣fn2會覆蓋fn1;
● 第二種：
IE:obj.attachEvent(事件名稱，事件函數(shù))
1、沒有捕獲
2、事件名稱有on
3、事件函數(shù)的執(zhí)行順序：標(biāo)準(zhǔn)》正序 非標(biāo)準(zhǔn)》倒序
4、this指向window
1 element.attachEvent(onclick,fn1);
標(biāo)準(zhǔn)：obj.addEventListener(事件名稱，事件函數(shù)，是否捕獲)
1、有捕獲
2、事件名稱沒有on
3、事件的執(zhí)行順序是正序
4、this指向觸發(fā)該事件的對象
1 element.addEventListener(click,fn1,false);
bind函數(shù)
1 function bind(obj,evname,fn){
2 if(obj.addEventListener){
3 obj.addEventListener(evname,fn,false);
4 }else{
5 obj.attachEvent('on' + evname,function(){
6 fn.call(obj);
7 });
8 }
9 }
7、事件取消綁定
● 第一種
1 element.onclick = null;
● 第二種
IE:obj.detachEvent(事件名稱，事件函數(shù));
1 document.detachEvent('onclick',fn1);
標(biāo)準(zhǔn)：obj.removeEventListener(事件名稱，事件函數(shù)，是否捕獲)；
1 document.removeEventListener('click',fn1,false);
8、鍵盤事件(例子：留言本)
● onkeydown : 當(dāng)鍵盤按鍵按下的時候觸發(fā)
● onkeyup : 當(dāng)鍵盤按鍵抬起的時候觸發(fā)
● event.keyCode : 數(shù)字類型 鍵盤按鍵的值 鍵值
ctrlKey，shiftKey，altKey布爾值
當(dāng)一個事件觸發(fā)的時候，如果shift || ctrl || alt鍵沒有按下，則返回false，否則返回true;
9、默認(rèn)事件(例子：自定義右鍵菜單、鍵盤控制div運動)
● 事件默認(rèn)行為 : 當(dāng)一個事件發(fā)生的時候瀏覽器默認(rèn)會做的事。
● 阻止默認(rèn)事件：return false;
oncontextmenu : 右鍵菜單事件，當(dāng)右鍵菜單（環(huán)境菜單）顯示出來的時候觸發(fā)。
案例：
▓▓▓▓▓▓ 方塊隨著鼠標(biāo)移動：
onmouseover:當(dāng)鼠標(biāo)在一個元素上移動時觸發(fā)
注意：觸發(fā)的頻率不是像素，而是間隔時間。在一個間隔時間內(nèi)不論鼠標(biāo)移動了多遠(yuǎn)只觸發(fā)一次
1 <style>
2 body{
3 height: 2000px;
4 }
5 #div{
6 100px;
7 height: 100px;
8 background:red;
9 position: absolute;
10 }
11 </style>
12 <body>
13 <div id="div1"></div>
14 </body>
15 <script>
16 var oDiv = document.getElementById('div1');
17 document.onmouseover = function(ev){
18 var ev = ev || event;
19 // 如果當(dāng)滾動條滾動了（頁面的頭部部分隱藏了），方塊是以頁面定位的，而鼠標(biāo)是以可視區(qū)定位的，這樣就會產(chǎn)生bug。所以我們要加上滾動條滾動的距離
20 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
21 oDIv.style.top = ev.clientX + scrollTop + 'px';
22 oDIv.style.left = ev.clientY + 'px';
23 }
24 </script>
▓▓▓▓▓▓ 輸入框文字提示:
1 <style></style>
2 <body>
3 <input type="text" id="text1" value="請輸入內(nèi)容"/>
4 <input type="button" id="btn" value="全選" />
5 </body>
6 <script>
7 var oText = document.getElementById('text1');
8 var oBtn = document.getElementById('btn');
9 oText.onfocus = function(){
10 if(this.value == '請輸入內(nèi)容'){
11 this.value = '';
12 }
13 }
14 oText.onblur = function(){
15 if(this.value == ''){
16 this.value = '請輸入內(nèi)容';
17 }
18 }
19 oBtn.onclick = function(){
20 oText.select();
21 }
22 </script>
▓▓▓▓▓▓仿select控件：
1 <style>
2 #div1{
3 100px;
4 height: 200px;
5 border: 1px solid red;
6 display: none;
7 }
8 </style>
9 <body>
10 <input type="button" value="按鈕" id="btn" />
11 <div id="div1"></div>
12 <p>ppppppppp</p>
13 <p>ppppppppp</p>
14 <p>ppppppppp</p>
15 <p>ppppppppp</p>
16 <p>ppppppppp</p>
17 </body>
18 <script>
19 window.onload = function(){
20 var oBtn = document.getElementById('btn');
21 var oDiv = document.getElementById('div1');
22 oBtn.onclick = function(ev){
23 var ev = ev || event;
24 ev.cancelBubble = true;
25 oDiv.style.display = 'block';
26 }
27 document.onclick = function(){
28 oDiv.style.display = 'none';
29 }
30 }
31 </script>
▓▓▓▓▓▓ 留言本:
1 <style></style>
2 <body>
3 <input type="text" id="con"/>
4 <ul id="box"></ul>
5 </body>
6 <script>
7 var oUl = document.getElementById('box');
8 var oText = document.getElementById('con');
9
10 document.onkeyup = function(ev){
11 var ev = ev || even;
12 if(ev.keyCode != ''){
13 if(ev.keyCode == 13){
14 var oLi = document.createElement('li');
15 oLi.innerHTML = oText.value;
16 if(oUl.children[0]){
17 oUl.insertBefore(oLi,oUl.children[0]);
18 }else{
19 oUl.appendChild(oLi);
20 }
21 }
22 }
23 }
24 </script>
▓▓▓▓▓▓ 自定義右鍵菜單:
1 <style>
2 body{
3 height: 2000px;
4 }
5 #box{
6 100px;
7 height: 200px;
8 background: red;
9 display: none;
10 position: absolute;;
11 }
12 </style>
13 <body>
14 <div id="box"></div>
15 </body>
16 <script>
17 var oBox = document.getElementById('box');
18 document.oncontextmenu = function(ev){
19 var ev = ev || event;
20 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
21 var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
22 oBox.style.display = 'block';
23 oBox.style.top = scrollTop + ev.clientY + 'px';
24 oBox.style.left = scrollLeft + ev.clientX + 'px';
25
26 return false;
27 }
28 document.onclick = function(){
29 oBox.style.display = 'none';
30 }
31 </script>
▓▓▓▓▓▓ 鍵盤控制div運動:
1 <style>
2 #box{
3 100px;
4 height: 100px;
5 background: red;
6 position: absolute;
7 }
8 </style>
9 <body>
10 <div id="box"></div>
11 </body>
12 <script>
13 var oBox = document.getElementById('box');
14 var timer = null;
15 var oLeft = false;
16 var oTop = false;
17 var oRight = false;
18 var oBottom = false;
19
20
21 // 運動一直就緒，等待按鍵操作
22 timer = setInterval(function(){
23 if(oLeft){
24 oBox.style.left = oBox.offsetLeft - 10 + 'px';
25 }else if(oTop){
26 oBox.style.top = oBox.offsetTop - 10 + 'px';
27 }else if(oRight){
28 oBox.style.left = oBox.offsetLeft + 10 + 'px';
29 }else if(oBottom){
30 oBox.style.top = oBox.offsetTop + 10 + 'px';
31 }
32 // 防止溢出
33 limit();
34 },10);
35
36 // 按鍵按下，開始運動
37 document.onkeydown = function(ev){
38 var ev = ev || even;
39 switch (ev.keyCode){
40 case 37:
41 oLeft = true;
42 break;
43 case 38:
44 oTop = true;
45 break;
46 case 39:
47 oRight = true;
48 break;
49 case 40:
50 oBottom = true;
51 break;
52 }
53 }
54
55 // 按鍵抬起，停止運動
56 document.onkeyup = function(ev){
57 var ev = ev || even;
58 switch (ev.keyCode){
59 case 37:
60 oLeft = false;
61 break;
62 case 38:
63 oTop = false;
64 break;
65 case 39:
66 oRight = false;
67 break;
68 case 40:
69 oBottom = false;
70 break;
71 }
72 }
73
74 function limit(){
75 // 控制左邊
76 if(oBox.offsetLeft <= 0){
77 oBox.style.left = 0;
78 }
79 // 控制上邊
80 if(oBox.offsetTop <= 0){
81 oBox.style.top = 0;
82 }
83 // 控制右邊
84 if(document.documentElement.clientWidth - oBox.offsetLeft - oBox.offsetWidth < 0){
85 oBox.style.left = document.documentElement.clientWidth - oBox.offsetWidth + 'px';
86 }
87 // 控制下邊
88 if(document.documentElement.clientHeight - oBox.offsetTop - oBox.offsetHeight < 0){
89 oBox.style.top = document.documentElement.clientHeight - oBox.offsetHeight + 'px';
90 }
91 }
92 </script>
總結(jié)
- 上一篇： 图文博主也能玩转直播带货 雪梨3亿带货背
- 下一篇： 06-老马jQuery教程-jQuery