マウスとキーイベント

function getsjYuan(ev) {
	/// <summary>
	/// 获取事件源元素
	/// </summary>
	/// <param name="ev" type="Event">事件回调函数的参数</param>
	/// <returns type='Element'/>

	ev = ev || window.event || arguments.callee.caller.arguments[0];
	var target = ev.target || ev.srcElement;
	return target;
}
//获取键盘事件中的按键值
function getJianZhi(ev, gsh) {
	/// <summary>
	/// 获取键盘事件中的按键值
	/// </summary>
	/// <param name="ev">键盘事件回调参数</param>
	/// <param name="gsh" optional='true'>(注意:不完善,比如无法获取功能键不建议使用)true=返回按键字符 false=返回键值(int)默认为false</param>
	/// <returns type="obj"/>
	ev = ev?ev:window.event;
	var kg;


	if (ev.keyCode) {
		if (gsh == null) {
			kg = false;
		}
		else {
			kg = gsh;
		}
		var ls = ev.keyCode;
		if (kg) {

			return String.fromCharCode(ls);
		}

		return ls;
	}




}



function dianJi(ele, fn) {
	/// <summary>
	///绑定鼠标点击事件
	/// </summary>
	/// <param name="ele" type="Element">元素对象</param>
	/// <param name="fn" type="obj">回调函数 function(ev)  回调函数里可用 quShiJianE() quZhuoBiao()</param>
	addShiJian(ele, "click", fn);
}


function shuangJi(ele, fn) {
	/// <summary>
	///绑定鼠标双击事件
	/// </summary>
	/// <param name="ele" type="Element">元素对象</param>
	/// <param name="fn" type="obj">回调函数 function(ev)  回调函数里可用 quShiJianE() quZhuoBiao()</param>
	addShiJian(ele, "dblclick", fn);
}

function getJiaoDian(ele, fn) {
	/// <summary>
	///获取焦点
	/// </summary>
	/// <param name="ele" type="Element">元素对象</param>
	/// <param name="fn" type="obj">回调函数 function(ev)  回调函数里可用 quShiJianE() quZhuoBiao()</param>
	addShiJian(ele, "focus", fn);
}
function shiQuJiaoDian(ele, fn) {
	/// <summary>
	///失去焦点
	/// </summary>
	/// <param name="ele" type="Element">元素对象</param>
	/// <param name="fn" type="obj">回调函数 function(ev)   回调函数里可用 quShiJianE() quZhuoBiao()</param>
	addShiJian(ele, "blur", fn);
}

function yiDao(ele, fn) {
	/// <summary>
	///鼠标被移到某元素之上
	/// </summary>
	/// <param name="ele" type="Element">元素对象</param>
	/// <param name="fn" type="obj">回调函数 function(ev)   回调函数里可用 quShiJianE() quZhuoBiao()</param>
	addShiJian(ele, "mouseover", fn);
}

function liKai(ele, fn) {
	/// <summary>
	///鼠标从某元素移开
	/// </summary>
	/// <param name="ele" type="Element">元素对象</param>
	/// <param name="fn" type="obj">回调函数 function(ev) 回调函数里可用 quShiJianE() quZhuoBiao() </param>
	addShiJian(ele, "mouseout", fn);
}

function yiDong(ele, fn) {
	/// <summary>
	///鼠标从某元素上移动
	/// </summary>
	/// <param name="ele" type="Element">元素对象</param>
	/// <param name="fn" type="obj">回调函数 function(ev) 回调函数里可用 quShiJianE() quZhuoBiao() </param>
	addShiJian(ele, "mousemove", fn);
}

function anXia(fn) {
	/// <summary>
	///键盘按下
	/// </summary>
	/// <param name="fn" type="obj">回调函数 可调用 quJianZhi(ev) 获取键值</param>
	addShiJian(window.document, "keydown", fn);

}
function anZhu(fn) {
	/// <summary>
	///键盘按住
	/// </summary>
	/// <param name="fn" type="obj">回调函数 可调用 quJianZhi(ev) 获取键值
	addShiJian(window.document, "keypress", fn);

}
function songKai(fn) {
	/// <summary>
	///键盘松开
	/// </summary>
	/// <param name="fn" type="obj">回调函数 可调用 quJianZhi(ev) 获取键值</param>
	addShiJian(window.document, "keyup", fn);

}
function chuangKouK(fn) {
	/// <summary>
	///窗口改变 (浏览器的窗口大小改变)
	/// </summary>
	/// <param name="fn" type="obj">回调函数</param>
	addShiJian(window, "resize", fn);
}

function quZuoBiao(event) {
	/// <summary>
	/// 获取鼠标事件发生时,当前鼠标坐标(相对文档,不是客户区)
	/// </summary>
	/// <param name="event" type="Event">元素对象</param>
	/// <returns type='obj'返回一个具有 x和y 属性的对象/>
	event = event || window.event || arguments.callee.caller.arguments[0];

	return {x:event.pageX,y:event.pageY};

}


function addShiJian(element, e, fn) {
	/// <signature>
	/// <summary>
	///用于指定元素的事件添加
	/// </summary>
	/// <param name="elemen" type="elemen" >操作对象</param>
	/// <param name="e" type="string" >事件名</param>
	/// <param name="fu" type="function" >事件回调函数</param>
	///<returns type = ''/>
	/// </signature>
	if (element.addEventListener) {
		element.addEventListener(e, fn);
	} else {
		element.attachEvent("on" + e, fn);
	}
}
function deleteShiJian(element, ev, fu,u)
{
	/// <summary>
	/// 删除事件
	/// </summary>
	// <param name="element" type="element">指定操作元素</param>
	/// <param name="ev" type="event">要移除的事件名称注意:不要使用 "on" 前缀。 例如,使用 "click" ,而不是使用 "onclick"。</param>
	/// <param name="fu" type="Function">指定要移除的函数。</param>
	/// <param name="u" type="useCapture">	可选。布尔值,指定移除事件句柄的阶段。true - 在捕获阶段移除事件句柄 false- 默认。在冒泡阶段移除事件句柄</param>
	/// <returns />
	if (!u)
	{
		element.removeEventListener(ev, fu);
	}else {
		element.removeEventListener(ev, fu,u);
	}
	

}

function getShuBiao_this(obj) {
	var ev = window.event;
	var _x = ev.clientX - obj.offsetLeft;

	var _y = ev.clientY - obj.offsetTop;

	return {
		x: _x,
		y: _y
	}
}

ユースケース:

  dianJi(getId('di'),function (ev) { 
       //在这里处理点击事件处理函数
       
       });
       shuangJi(getId('di'),function (ev) { 
       //这里写双击事件处理代码
       });
       anXia(getId('di'),function (ev) { 
           var 键值 = quJianZhi(ev);
           if (键值 == 13)
           { 
               alert("你按下了 enter 键");
           }
       
       });

以下は、整理されたKey-Valueコード対応表です...

keyCode 8 = BackSpace BackSpace
keyCode 9 = Tab Tab
keyCode 12 = Clear
keyCode 13 = Enter
keyCode 16 = Shift_L
keyCode 17 = Control_L
keyCode 18 = Alt_L
keyCode 19 = Pause
keyCode 20 = Caps_Lock
keyCode 27 = Escape Escape
keyCode 32 = space
keyCode 33 =前の
keyCode34 =次の
keyCode35 =終了
keyCode36 =ホーム
keyCode37 =左
keyCode38 =上
keyCode39 =右
keyCode40 =下
keyCode41 =選択
keyCode42 =印刷
keyCode43 =実行
keyCode45 =挿入
keyCode46 =削除
keyCode 47 =ヘルプ
keyCode 48 = 0等しいbracerightkeyCode
49 = 1感嘆符
onesuperiorkeyCode 50 = 2 quotedbl twosuperior
keyCode 51 = 3セクション
threesuperiorkeyCode 52 = 4ドル
keyCode53 = 5パーセント
keyCode54 = 6アンパサンド
keyCode55 = 7スラッシュ
braceleftkeyCode 56 = 8 parenleftブラケット
キーコード57 = 9パレンライト
ブラケット右キーコード65 = aAキー
コード66 =
bBキーコード67 =
cCキーコード68 =
dDキーコード69 = eE
ユーロ記号キーコード70 = fFキー
コード71 =
gGキーコード72 =
hHキーコード73 = i I
keyCode 74 = j J
keyCode 75 = k K
keyCode 76 = l L
keyCode 77 = m M mu
keyCode 78 = n N
keyCode 79 = o O
keyCode 80 = p P
keyCode 81 = q Q at
keyCode 82 = r R
keyCode 83 = s S
keyCode 84 = t T
keyCode 85 = u U
keyCode 86 = v V
keyCode 87 = w W
keyCode 88 = x X
keyCode 89 = y Y
keyCode 90 = z Z
keyCode 96 = KP_0 KP_0
keyCode 97 = KP_1 KP_1
keyCode 98 = KP_2 KP_2
keyCode 99 = KP_3 KP_3
keyCode 100 = KP_4 KP_4
keyCode 101 = KP_5 KP_5
keyCode 102 = KP_6 KP_6
keyCode 103 = KP_7 KP_7
keyCode 104 = KP_8 KP_8
keyCode 105 = KP_9 KP_9
keyCode 106 = KP_Multiply KP_Multiply
keyCode 107 = KP_Add KP_Add
keyCode 108 = KP_Separator KP_Separator
のkeyCode 109 = KP_Subtract KP_Subtract
のkeyCode 110 = KP_Decimal KP_Decimal
のkeyCode 111 = KP_Divide KP_Divide
のkeyCode 112 = F1
のkeyCode 113 = F2
のkeyCode 114 = F3
のkeyCode 115 = F4
のkeyCode 116 = F5
のkeyCode 117 = F6
のkeyCode 118 = F7
のkeyCode 119 = F8
keyCode 120 = F9
keyCode 121 = F10
keyCode 122 = F11
keyCode 123 = F12
keyCode 124 = F13
keyCode 125 = F14
keyCode 126 = F15
keyCode 127 = F16
keyCode 128 = F17
keyCode 129 = F18
keyCode 130 = F19
keyCode 131 = F20
keyCode 132 = F21
keyCode 133 = F22
keyCode 134 = F23
keyCode 135 = F24
keyCode 136 = Num_Lock
keyCode 137 = Scroll_Lock
keyCode 187 =急性墓
keyCode188 =コンマセミコロン
keyCode189 =マイナスアンダースコア
keyCode190 =ピリオドコロン
keyCode192 =番号記号アポストロフィ
keyCode210 =プラスマイナスハイフンマクロン
keyCode211 =
keyCode 212 =著作権登録
keyCode213 = guillemotleft guillemotright
keyCode 214 =男性の
ordfemininekeyCode 215 = ae AE
keyCode 216 =セント円
keyCode217 =クエスチョンダウン
exclamdownkeyCode 218 = 1/4の半分の
keyCode220 =小さいバー
keyCode 221 =プラスアスタリスクasciitilde
のkeyCode 227 =多重分割
のkeyCode 228 = acircumflex Acircumflex
のkeyCode 229 = ecircumflex Ecircumflex
のkeyCode 230 = icircumflex Icircumflex
のkeyCode 231 = ocircumflex Ocircumflex
のkeyCode 232 = ucircumflex Ucircumflex
のkeyCode 233 = ntilde Ntilde
のkeyCode 234 = yacute Yacute
のkeyCode 235 = oslash Ooblique
keyCode 236 = aring Aring
keyCode 237 = ccedilla Ccedilla
keyCode 238 = thorn THORN
keyCode 239 = eth ETH
keyCode 240 = diaeresisセディーユ通貨
keyCode241 = agrave Agrave atilde Atilde
keyCode 242 = egrave Egrave
keyCode 243 = igrave Igrave
keyCode 244 = ograve Ograve otilde Otilde
のkeyCode 245 = ugrave Ugrave
のkeyCode 246 = adiaeresis Adiaeresis
のkeyCode 247 = ediaeresis Ediaeresis
のkeyCode 248 = idiaeresis Idiaeresis
のkeyCode 249 = odiaeresis Odiaeresis
のkeyCode 250 = udiaeresis Udiaeresis
のkeyCode 251 = ssharp質問バックスラッシュ
keyCode252 = asciicircum Degree
keyCode 253 = 3 sterling
keyCode 254 = Mode_switch
は、イベントオブジェクトのkeyCode属性を使用して、入力されたキー値を決定します。
例:if(event.keyCode == 13)alert( "enter!") ;
キー値対応表
A0X65 U 0X85
B 0X66 V 0X86
C 0X67 W 0X87
D 0X68 X 0X88
E 0X69 Y 0X89
F 0X70 Z 0X90
G 0X71 0 0X48
H 0X72 1 0X49
I 0X73 2 0x50を
J 0X74 3 0X51
K 0X75 4 0X52
L 0X76 5 $ 53
M 0X77 6が0x54
N 0x78と7は0x55
O 0X79 8 0X56
P 0X80 9 0X57
Q 0x81とESCとして0x1B
R 0x82とCTRL 0x84の
S 0x83の
SHIは0xDのENTER
場合をキーの組み合わせを使用したい場合は、Ctrlキー、Shiftキー、Altキーの組み合わせなど、これらのキーが同時に押されているかどうかを判断できます。Ctrlキー、Shiftキー、Altキーの組み合わせかどうかを判断できます。もっと押されている

 

 

 

おすすめ

転載: blog.csdn.net/jia13475881149/article/details/114266302