JSスタディノート-イベント

1つは、イベントオブジェクトイベントです。

1. イベントオブジェクト：イベントの応答関数がトリガーされると、ブラウザーはイベントオブジェクトを実際のパラメーターとして毎回応答関数に渡し、現在のイベントに関連するすべての情報（座標など）がイベントにカプセル化されます。マウスの、キーボードのどのボタンを押したときにマウスホイールがスクロールされる方向。
2. マウスの動きの練習：

window.onload=function(){
    
    
				
			//当鼠标在areaDiv中移动时，在showMsg中来显示坐标	
				var areaDiv=document.getElementById("areaDiv");
				var showMsg=document.getElementById("showMsg");
			//onmousemove:该事件将会在鼠标元素中移动时被触发
			areaDiv.onmousemove=function(event){
    
    
				
				//解决浏览器兼容的问题
				if(!event){
    
    
				event=window.event;
				}
				//event=event||window.event;
				
				//clientX可以获取鼠标指针的水平坐标
				//clientY可以获取鼠标指针的垂直坐标
				var x=event.clientX;
				var y=event.clientY;
			   //在showMsg中显示鼠标的坐标
			   showMsg.innerHTML="x="+x+",y="+y;
			}
			}

3. IE8では、応答関数がトリガーされたときにブラウザーはイベントオブジェクトを渡しません。IE8以下のブラウザーでは、イベントオブジェクトはウィンドウオブジェクトのプロパティとして保存されます。

2.マウスでdivを動かします

1.まず、スタイルシートでdivのスタイルを設定するときは、必ず絶対位置を有効にして


ください。2。ClientXとclientYを使用して、現在表示されているウィンドウでマウスの座標を取得します。divのオフセットは同等です。ページ全体に。
3. pageXとpageYは、現在のページ全体に相当するマウスの座標を取得できますが、これら2つの属性はIE8ではサポートされていないため、IE8との互換性が必要な場合は、この方法を使用しないでください。

4. divが常にマウスで移動するように、ページスクロールバーのスクロール距離をdivのオフセットに追加します

var st=document.documentElement.scrollTop;
var sl=document.documentElement.scrollLeft;
box1.style.top=top+st+"px";
box1.style.Left=Left+sl+"px";

三、事件バブルの泡立ち

1. イベントバブリング：いわゆるバブリングとは、イベントの上方送信を指します。子孫要素のイベントがトリガーされると、その祖先要素の同じイベントもトリガーされます。
2. イベントのバブリングが必要ない場合は、イベントオブジェクトを介してバブリングをキャンセルできます。

//可以将事件对象中的cancelBubble设置为true，即可取消冒泡。
event.cancelBubble=true;

第四に、イベントの代表団

1. イベントを一度バインドする場合は、複数の要素に適用できます。要素が後で追加された場合でも、要素の共通の祖先要素にバインドを試みることができます。

//为ul绑定一个单击响应函数
ul.onclick=function(event){
    
    

//target： event中的target表示的是触发事件的对象

//如果触发事件的对象是我们期望的元素，则执行，否则就不执行
  if(event.target.className=="link"){
    
    
   alert("我是ul的单击响应函数");
}
}

2. イベントの委任：イベントを要素の共通の祖先要素に均一にバインドします。これにより、子孫要素のイベントがトリガーされたときに、祖先要素にバブルアップし、イベントをの応答関数で処理できるようになります。祖先要素。
3. イベントの委任ではバブリングを使用します。委任により、イベントバインディングの数を減らし、イベントのパフォーマンスを向上させることができます。

5、イベントバインディング

1. object.event = functionを使用して、応答関数をバインドします。1つの応答関数を1つの要素と1つのイベントに同時にバインドすることはでき、複数のイベントをバインドすることはできません。複数のオブジェクトをバインドする場合は、背面が前面をカバーします。 。

2. addEventListener（）：このメソッドは、応答関数を要素にバインドするためにも使用できます。
   パラメーター：
   ①イベントの文字列は、②
   イベントがトリガーされたときに呼び出されるコールバック関数上にある必要はありません。③イベントかどうか
   キャプチャフェーズでトリガーされるにはブール値が必要です。通常、falseを渡し、
   
   addEventListener（）を使用して、要素の同じイベントに対して複数の応答関数を同時にバインドします。これにより、イベントがトリガーされたときに応答関数が実行されます。関数バインディングの順序で。
   このメソッドはIE8以下のブラウザーをサポートしていません。IE8はattachEvent（）をサポートしています。

3. attachEvent（）：IE8では、attachEvent（）を使用してイベントをバインドできます。
   パラメーター：
   ①イベントの文字列
   。②イベントがトリガーされたときに呼び出されるコールバック関数。
   このメソッドは、複数のバインドにも使用できます。この処理関数の違いは、最初に実行されるようにバインドされており、実行の順序がaddEventListener（）の順序と逆であることです。

4. 指定された要素の応答関数をバインドする関数を定義します。
   パラメーター：
   ①イベントをバインドするobjオブジェクト
   ②eventStrイベント文字列（オンにしない）
   ③コールバックコールバック関数

addEventListener（）のthisは、イベントをバインドするオブジェクトの
attachEvent（）のthisであり
、2つのメソッドを統合する必要があるのはウィンドウのthisです。

function bind(obj,eventStr,callback){
    
    

if(obj.addEventListener){
    
    
      //大部分浏览器兼容的方式
   obj.addEventListener(eventStr,callback,false);
}else{
    
    


     //IE8及以下
   obj.attachEvent("on"+eventStr,function(){
    
    
      //在匿名函数中调用回调函数
      //this是谁由调用方式决定
      callback.call(obj);
      });
}
 
}
bind(btn01,"click",function(){
    
    
 alert(1);
})

六、事件の広がり

IE8以下のブラウザにはキャプチャフェーズはありません。

セブン、ドラッグ練習

window.onload=function(){
    
    
/* 
拖拽box1元素
拖拽的流程：
1.当鼠标在被拖拽元素上按下时，可以开始进行拖拽 onmousedown
 2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
 3.当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
 */
//获取box1
var box1=document.getElementById("box1");
 //1.当鼠标在被拖拽元素上按下时，可以开始进行拖拽 onmousedown
box1.onmousedown=function(event){
    
    
 //2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
  event=event || window.event;
//div的左偏移量 鼠标.clentX -元素.offsetLeft
 var ol=event.clientX - box1.offsetLeft;
				
//div的上偏移量 鼠标.clentY -元素.offsetTop
	 var ot=event.clientY - box1.offsetTop;
				  
document.onmousemove=function(event){
    
    
					//解决兼容问题
					event=event || window.event;
					//获取到鼠标的坐标
					var left=event.clientX - ol;
					var top=event.clientY - ot;
					//设置div的偏移量
					var st=document.documentElement.scrollTop;
					var sl=document.documentElement.scrollLeft;
					box1.style.top=top+st+"px";
					box1.style.left=left+sl+"px";
				};
				 //3.当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
			    document.onmouseup=function(){
    
    
					//取消document.onmousemove事件
					document.onmousemove=null;
					//取消document.onmouseup事件
					document.onmouseup=null;	
				};
				/* 当我们拖拽一个网页中的内容时，浏览器会默认去搜索
				 引擎中搜索内容，此时会导致拖拽功能的异常，这个是浏览器提供的默认行为
				 如果不希望发生这个行为，则可以通过return false来取消默认行为*/
			return false;
			};
			}

8、ローラー練習

window.onload=function(){
    
    
				/* 当鼠标向下滚动时候，box1变长，向上滚动时，box1变短 */
				var box1=document.getElementById("box1");
				//为box1绑定一个鼠标滚轮滚动的事件
				//onmousewheel鼠标滚轮滚动的事件,会在滚轮滚动时触发,但是火狐不支持该属性
				/* 
				 在火狐中需要使用DOMMouseScroll 来绑定滚动事件
				 注意该事件需要通过addEventListener()函数来绑定
				 */
				box1.onmousewheel=function(event){
    
    
					//event=event || window.event;
					
					//判断鼠标滚轮滚动的方向
					
					//event.wheelDelta可以获取鼠标滚轮滚动的方向
					//向上滚120，向下滚-120，wheelDelta这个不看大小，只看正负
					//alert(event.wheelDelta);
					
					//火狐不支持wheelDelta
					//alert(event.detail);
					if(event.wheelDelta>0 || event.detail<0){
    
    
						//向上滚，box1变短
						box1.style.height=box1.clientHeight-10+"px";
					}else{
    
    
						//向下滚，box1边长
						box1.style.height=box1.clientHeight+10+"px";
					}
					/* 
					当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动，
					 这是浏览器的默认行为，如果不希望发生，则可以取消默认行为
					 */
					
					/* 
					 使用addEventListener()方法绑定响应函数的，取消默认方式不能使用 return false
					 需要使用event取消默认行为,event.preventDefault()
					 但是IE8不支持event.preventDefault()，直接调用会报错
					 */
					event.preventDefault() && event.preventDefault();
					
					return false;
					
				}
				
			bind(box1,"DOMMouseScroll",box1.onmousewheel);
				
			 function bind(obj,eventStr,callback){
    
    
				
				if(obj.addEventListener){
    
    
				      //大部分浏览器兼容的方式
				   obj.addEventListener(eventStr,callback,false);
				}else{
    
    
				//IE8及以下
				   obj.attachEvent("on"+eventStr,function(){
    
    
				      //在匿名函数中调用回调函数
				      //this是谁由调用方式决定
				      callback.call(obj);
				      });
				}
				 
				}
				 
			}

8つのキーボードイベント

1. onkeydown：ボタンが押されます
。onkeydownの場合、離さずに特定のキーを押し続けると、イベントが常にトリガーされます
。onkeydownが連続してトリガーされると、1回目と2回目が分離され、次のようになります。この設計は誤操作を防ぐためです。

2. onkeyup：キーが解放され
ます3.キーボードイベントは通常、フォーカスを取得できるいくつかのオブジェクトまたはドキュメントにバインドされます

4.キーコードはkeyCodeによって取得でき、どのキーが押されたかを判別するために使用できます。

if(event.keyCode===89){
    
    
console.log("y被按下了");
}

keyCodeに加えて5、イベントオブジェクトはまた、いくつかの属性を提供
①altKey
②ctrlKey
③shiftKey
これらの三つは、ALT、CTRL、シフトが押されたかどうかを決定するために使用されている押圧場合、それは、真を返し、それ以外の場合には偽を返します