事件大全

時間  2019-11-13
標籤 事件 大全 简体版
原文   原文鏈接

     你們好，在學習H5的過程當中，咱們接觸了許許多多不一樣的事件，它們各自都有本身獨到的用途，且在本身的領域發揮了重要的做用，下面就跟隨我一塊兒看看它們都作了些啥，Let's go!!!javascript

鼠標事件、鍵盤事件css

      首先在這裏咱們要注意到獲取鼠標事件、鍵盤事件的時候，火狐瀏覽器是一個特殊的存在，其餘的瀏覽器能夠經過window.event拿到對象，但火狐瀏覽器在函數裏須要傳遞一個參數e/ev/event,其中嚴謹的是eventhtml

1.火狐兼容問題解決方案java

document.onmousedown = function (e) {
   var ev = e || window.event; 
   console.log(ev);
}

    對象（鼠標、鍵盤）獲取到了以後，接下來就能夠執行一些鼠標和鍵盤能執行的事了，你們想一想在平常生活中購物、玩遊戲、微博留言啥的，鼠標和鍵盤是否是都是咱們達到目的的得利助手？瀏覽器

2. 鼠標事件函數

    ev.clientX  可視區中，鼠標的X座標；學習

    ev.clientY  可視區中，鼠標的Y座標；   this

case-one:  onmousemove(鼠標移動)spa

實現幾個div的鼠標移動跟隨

//css樣式：注意須要絕對定位
div{width: 100px;height: 100px;border: 1px solid #ccc;border-radius: 50%;
	position: absolute;top: 0;left: 0;background-color: red;
   }

//body代碼：幾個相同的div（大小能夠自定，建議相同，後面的js定位在div中心，好看而已）

	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>

//js代碼：
<script type="text/javascript">
	var adiv=document.getElementsByTagName("div");
	document.onmousemove=function(e){
		var ev=e||window.event;
		var l=ev.clientX;
		var t=ev.clientY;
		for (var i = 0; i<adiv.length; i++) {
			function move(i){
				setTimeout(function(){
					adiv[i].style.left=(l-50)+"px";
					adiv[i].style.top=(t-50)+"px";
				},i*30)
			}
			move(i);
		}
	}
</script>

case-two:  onmousedown、onmouseup(按下，擡起)code

實現一個div的點擊拖拽

//css樣式：
*{margin: 0;padding: 0;}  //通配符
#box{width: 20px;height: 20px;background-color: red;position: absolute;}

//body代碼：
<div id="box"></div>


//js代碼：
var box=document.getElementById("box");
box.onmousedown=function(e){
	var ev=e||window.event;
	var x=ev.clientX-box.offsetLeft;
	var y=ev.clientY-box.offsetTop;
	document.onmousemove=function(e){
		var ev=e||window.event;
		box.style.left= ev.clientX-x+"px";
		box.style.top= ev.clientY-y+"px";
	}
	document.onmouseup=function(){
		document.onmousemove=null;
	}
}

case-three:  ondblclick(鼠標左鍵雙擊)

case-four:  oncontextmenu(鼠標右擊)

document.oncontextmenu = function (){
     alert('a'); 
     return false; //阻止默認事件即右鍵的菜單事件
  }

case-five:  onmousewheel、DOMMouseScroll (滾輪事件)

function wheel(target,upfn,downfn){
		//獲取的兼容性寫法
		var Firefox=window.navigator.userAgent.indexOf("Firefox");
		//是==-1,沒有 
		if (Firefox==-1) {
			target.onmousewheel=fn;
		}else{
			target.addEventListener("DOMMouseScroll",fn,false);
		}

		function fn(e){
			var ev=e||window.event;
				
			if (ev.detail) {
				// 火狐
				if (ev.detail>0) {
					// alert("向上");
					upfn();
				}else{
					// alert("向下");
					downfn();
				}
			}else{
				//谷歌
				if (ev.wheelDelta>0) {
					// alert("向下");
					downfn();
				}else{
					// alert("向上");
					upfn();
				}				
			}
		}
	}
// 滾輪事件封裝函數
		function wheel(obj,upFn,downFn) {

		    if(arguments.length < 3){
		        alert('Sorry,你輸入的參數不夠');
		    }
		    obj.onmousewheel = fn;  
		    obj.addEventListener && obj.addEventListener('DOMMouseScroll',fn,false);
		    function fn(ev){
		        var ev = ev || window.event;
		        var bool = true;
		        if(ev.wheelDelta){
		            bool = ev.wheelDelta > 0 ? true : false;
		        }else if(ev.detail){
		            bool = ev.detail < 0 ? true : false;
		        }
		        bool && upFn();
		        (!bool) && downFn();
		        //prevent(ev);
		    }
		}

3. 鍵盤事件

case:  onkeydown(按下鍵盤)、onkeyup(擡起鍵盤)   

實現一個div鍵盤控制上下左右運動（此處不考慮碰壁檢測）

//css樣式和body代碼如上case-two相同

//js代碼：
<script type="text/javascript">
	var box=document.getElementById("box");
	document.onkeydown=function(e){
		var ev=e||window.event;
		if (ev.keyCode==37) {
			box.style.left=box.offsetLeft-10+"px";
		}else if (ev.keyCode==39) {
			box.style.left=box.offsetLeft+10+"px";
		}else if (ev.keyCode==38) {
			box.style.top=box.offsetTop-10+"px";
		}else if (ev.keyCode==40) {
			box.style.top=box.offsetTop+10+"px";
		}
	}
</script>

 特殊的按鍵：ctrlKey,shiftKey,altKey

 鍵盤數字對應的ASCII碼（keycode代碼）

4.表單事件、阻止默認事件

// 點擊submit按鈕（在form裏提交至百度），彈出提示框

  var form1 = document.querySelector("#form1");
    form1.onsubmit = function (ev){
        alert('a');
        //ev.preventDefault  不兼容ie6-ie8
        //return false   阻止默認事件（此處就不會跳轉至百度窗口了）
    }

5. 輸入框焦點事件

使用onfocus實現輸入框的placeholder效果

var txt=document.getElementById(「txt1");
  txt.onfocus=function(){
     this.value="";
  }
  txt.onblur=function(){
    this.value="用戶名";
  }

6. 事件冒泡

    事件冒泡：是指子標籤發生事件後，一直傳遞到父級，一直追溯到document,如點擊一個在div標籤裏的button標籤，那麼div、body、document的點擊事件會依次觸發

window.onload=function(){
		var box=document.getElementById("box");
		var btn=document.getElementsByTagName("input")[0];

		//點擊後，btn事件觸發
		btn.onclick=function(e){
			box.style.display="block";
			alert("a");
		}
		//btn的父級，也會隨後被觸發
		document.onclick=function(){
			box.style.display="none";
			alert("b")
		}
	}

    取消事件冒泡的作法：

window.onload=function(){
		var box=document.getElementById("box");
		var btn=document.getElementsByTagName("input")[0];

		//點擊後，btn事件觸發
		btn.onclick=function(e){
			var ev=e||window.event;
			box.style.display="block";
			alert("a");
			ev.cancelBubble=true; //取消事件冒泡
            // event.stopPropagation(); 也是取消事件冒泡
            // return false   也能夠取消冒泡，還能夠阻止默認事件
		}
		//因爲取消事件冒泡，btn的父級，不會隨後被觸發
		document.onclick=function(){
			box.style.display="none";
			alert("b")
		}
	}

7. 事件綁定

        除以上所講的綁定方法外，還有一個方法即addEventListener給標籤綁定事件，優勢：能夠綁定多個不一樣的事件。缺點：兼容性問題，    

解決兼容性問題：attachEven 兼容ie8及如下,本次以點擊事件舉例

var Btn = document.getElementById("Btn");
if (Btn.addEventListener) {
    Btn.addEventListener("click", myFunction,false);
    //false指的是不事件捕捉，通常用false
} else if (Btn.attachEvent) {
    Btn.attachEvent("onclick", myFunction);  // 包含on
}
function myFunction() {
    alert("Hello World!");
}

 case-add:

結合下面的 case-remove

var func = function(){};
//例子 addEvent(window,"load",func)
    function addEvent(elem, type, fn){ 
        if(elem.attachEvent){
           elem.attachEvent('on'+type,fn); return; 
        } 
        if(elem.addEventListener){ 
        elem.addEventListener(type,fn,false);
        } 
    }

     注意點：兩者區別是執行的優先級不同

容許向同個元素添加多個事件，也能夠向同個元素添加不一樣類型的事件，且不會覆蓋已存在的事件：

 ele.attachEvent("onclick",method1); 
 ele.attachEvent("onclick",method2);
 ele.attachEvent("onclick",method3);

     執行的順序：method3->method2->method1

 ele.addEventListener("mousedown",method1,false); 
 ele.addEventListener("click",method2,false);
 ele.addEventListener("mouseup",method3,false);

     執行的順序：method1->method2->method3

8. 冒泡和捕獲

事件傳遞有兩種方式：冒泡與捕獲。

事件傳遞定義了元素事件觸發的順序。 若是你將 <p> 元素插入到 <div> 元素中，用戶點擊 <p> 元素, 哪一個元素的 "click" 事件先被觸發呢？

在 冒泡 (false)中，內部元素的事件會先被觸發，而後再觸發外部元素，即： <p> 元素的點擊事件先觸發，而後會觸發 <div> 元素的點擊事件。

在 捕獲(true) 中，外部元素的事件會先被觸發，而後纔會觸發內部元素的事件，即： <div> 元素的點擊事件先觸發 ，而後再觸發 <p> 元素的點擊事件

9. 事件移除

case-remove:

非ie瀏覽器

target.removeEventListener(type,listener,useCapture);

ie瀏覽器

target.detachEvent(on+type, listener);

//下面代碼要結合上述的case-add

 var func = function(){};
 removeEvent(window,"load",func)
 function removeEvent(elem, type, fn) { 
     if(elem.detachEvent){ 
        elem.detachEvent('on' + type, fn); return; 
     } 
     if(elem.removeEventListener){ 
        elem.removeEventListener(type, fn, false);
     } 
 }
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程