Mouse and key events

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
	}
}

Use Cases:

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

The following is a sorted out key-value code correspondence table...

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 = Prior
keyCode 34 = Next
keyCode 35 = End
keyCode 36 = Home
keyCode 37 = Left
keyCode 38 = Up
keyCode 39 = Right
keyCode 40 = Down
keyCode 41 = Select
keyCode 42 = Print
keyCode 43 = Execute
keyCode 45 = Insert
keyCode 46 = Delete
keyCode 47 = Help
keyCode 48 = 0 equal braceright
keyCode 49 = 1 exclam onesuperior
keyCode 50 = 2 quotedbl twosuperior
keyCode 51 = 3 section threesuperior
keyCode 52 = 4 dollar
keyCode 53 = 5 percent
keyCode 54 = 6 ampersand
keyCode 55 = 7 slash braceleft
keyCode 56 = 8 parenleft bracketleft
keyCode 57 = 9 parenright bracketright
keyCode 65 = a A
keyCode 66 = b B
keyCode 67 = c C
keyCode 68 = d D
keyCode 69 = e E EuroSign
keyCode 70 = f F
keyCode 71 = g G
keyCode 72 = h H
keyCode 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 = acute grave
keyCode 188 = comma semicolon
keyCode 189 = minus underscore
keyCode 190 = period colon
keyCode 192 = numbersign apostrophe
keyCode 210 = plusminus hyphen macron
keyCode 211 =
keyCode 212 = copyright registered
keyCode 213 = guillemotleft guillemotright
keyCode 214 = masculine ordfeminine
keyCode 215 = ae AE
keyCode 216 = cent yen
keyCode 217 = questiondown exclamdown
keyCode 218 = onequarter onehalf threequarters
keyCode 220 = less greater bar
keyCode 221 = plus asterisk asciitilde
keyCode 227 = multiply division
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 cedilla currency
keyCode 241 = agrave Agrave atilde Atilde
keyCode 242 = egrave Egrave
keyCode 243 = igrave Igrave
the keyCode 244 = ograve Ograve otilde Otilde
the keyCode 245 = ugrave Ugrave
the keyCode 246 = adiaeresis Adiaeresis
the keyCode 247 = ediaeresis Ediaeresis
the keyCode 248 = idiaeresis Idiaeresis
the keyCode 249 = odiaeresis Odiaeresis
the keyCode 250 = udiaeresis Udiaeresis
the keyCode 251 = ssharp Question backslash The
the keyCode 252 = asciicircum Degree
the keyCode 253 = 3 sterling
keyCode 254 = Mode_switch
uses the keyCode attribute of the event object to determine the entered key value
eg: if(event.keyCode==13)alert("enter!");
key value correspondence table
A 0X65 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 0X53
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 ENTER 0XD
If you want to use a combination of keys, you can determine whether these keys are pressed at the same time. For example, the combination of ctrl, shift, and alt keys can determine whether you have pressed the ctrl, shift, and alt keys more.

 

 

 

Guess you like

Origin blog.csdn.net/jia13475881149/article/details/114266302