Event事件
妙味課堂-Event事件
1、焦點：當一個元素有焦點的時候，那么他就可以接受用戶的輸入(不是所有元素都能接受焦點)
給元素設置焦點的方式：
1、點擊
2、tab
3、js
2、（例子：輸入框提示文字）
onfocus:當元素獲取焦點時觸發：
1 element.onfocus = function(){};
onblur:當元素失去焦點時觸發：
1 element.onblur = function(){};
obj.focus() 給指定的元素設置焦點
obj.blur() 取消指定元素的焦點
obj.select()選擇指定元素里面的文本內容
3、（例子：方塊隨著鼠標移動）
event: 事件對象。
當一個事件發生時，和當前這個對象發生的事件所有有關的信息都會臨時保存在一個指定的地方-event對象，供我們需要時調用。就像是飛機的黑匣子。
事件對象必須在一個對象的事件調用函數中使用才有內容。
事件函數：事件調用的函數，一個函數是不是事件函數，不在定義時決定而是在調用的時候決定
4、兼容
1 element.onclick = fn1;
IE/Chrome瀏覽器:event是一個內置的全局對象（可以直接使用）
1 function fn1(){
2 alert(event);
3 }
標準下：事件對象是通過事件函數的第一個參數傳入
1 function fn1(ev){
2 alert(ev);
3 }
兼容寫法：
1 function fn1(ev){
2 var ev = ev || event;
3 }
clientX[Y]:當一個事件發生的時候，鼠標到頁面可視區的距離
5、事件流（例子：仿select控件）
● 事件冒泡：當一個元素接受到事件的時候，會把他接受到的事件傳播給他的父級，一直到頂層window。
● 事件捕獲:一個元素要想接受到事件，它的父元素會首先接受到該事件，然后再傳給它。
注意：在ie下是沒有的事件捕獲的。在事件綁定中，標準下有
6、事件綁定
● 第一種：
1 element.onclick = fn1;
注意：oDiv.onclick = fn1;
oDiv.onclick = fn2;
這樣fn2會覆蓋fn1;
● 第二種：
IE:obj.attachEvent(事件名稱，事件函數)
1、沒有捕獲
2、事件名稱有on
3、事件函數的執行順序：標準》正序 非標準》倒序
4、this指向window
1 element.attachEvent(onclick,fn1);
標準：obj.addEventListener(事件名稱，事件函數，是否捕獲)
1、有捕獲
2、事件名稱沒有on
3、事件的執行順序是正序
4、this指向觸發該事件的對象
1 element.addEventListener(click,fn1,false);
bind函數
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(事件名稱，事件函數);
1 document.detachEvent('onclick',fn1);
標準：obj.removeEventListener(事件名稱，事件函數，是否捕獲)；
1 document.removeEventListener('click',fn1,false);
8、鍵盤事件(例子：留言本)
● onkeydown : 當鍵盤按鍵按下的時候觸發
● onkeyup : 當鍵盤按鍵抬起的時候觸發
● event.keyCode : 數字類型 鍵盤按鍵的值 鍵值
ctrlKey，shiftKey，altKey布爾值
當一個事件觸發的時候，如果shift || ctrl || alt鍵沒有按下，則返回false，否則返回true;
9、默認事件(例子：自定義右鍵菜單、鍵盤控制div運動)
● 事件默認行為 : 當一個事件發生的時候瀏覽器默認會做的事。
● 阻止默認事件：return false;
oncontextmenu : 右鍵菜單事件，當右鍵菜單（環境菜單）顯示出來的時候觸發。
案例：
▓▓▓▓▓▓ 方塊隨著鼠標移動：
onmouseover:當鼠標在一個元素上移動時觸發
注意：觸發的頻率不是像素，而是間隔時間。在一個間隔時間內不論鼠標移動了多遠只觸發一次
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 // 如果當滾動條滾動了（頁面的頭部部分隱藏了），方塊是以頁面定位的，而鼠標是以可視區定位的，這樣就會產生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="請輸入內容"/>
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 == '請輸入內容'){
11 this.value = '';
12 }
13 }
14 oText.onblur = function(){
15 if(this.value == ''){
16 this.value = '請輸入內容';
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>
總結
- 上一篇： 图文博主也能玩转直播带货 雪梨3亿带货背
- 下一篇： 06-老马jQuery教程-jQuery