js为元素添加监听事件

语法

element.addEventListener(event, function, useCapture)

第一个参数是事件的类型（比如 "click" 或 "mousedown"）。

第二个参数是当事件发生时我们需要调用的函数。

第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。

注意：请勿对事件使用 "on" 前缀；请使用 "click" 代替 "onclick"。

addEventListener可以对一个dom添加多个监听器，并且会顺序执行。

开发中，会遇到多个js文件都使用window.onload，然而只有最后一个绑定的生效，如下：

window.onload = func1()

window.onload = func2()

这时可以用addEventListener来解决：

window.addEventListener('load', func1)

window.addEventListener('load', func2)

键盘的每个键都有对应的事件值，用按键按下或抬起事件，就可以绑定了，事件和对应值如下：

1、keydown()

keydown事件会在键盘按下时触发.

2、keyup()

keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件

3、keypress()

keypress事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键

对应值：

keycode 8 = BackSpace BackSpace

keycode 9 = Tab Tab

keycode12 = Clear

keycode13 = Enter

keycode16 = Shift_L

keycode17 = Control_L

keycode18 = Alt_L

keycode19 = Pause

keycode20 = Caps_Lock

keycode27 = Escape Escape

keycode32 = space space

keycode33 = Prior

keycode34 = Next

keycode35 = End

keycode36 = Home

keycode37 = Left

keycode38 = Up

keycode39 = Right

keycode40 = Down

keycode41 = Select

keycode42 = Print

keycode43 = Execute

keycode45 = Insert

keycode46 = Delete

keycode47 = Help

keycode48 = 0 equal braceright

keycode49 = 1 exclam onesuperior

keycode50 = 2 quotedbl twosuperior

keycode51 = 3 section threesuperior

keycode52 = 4 dollar

keycode53 = 5 percent

keycode54 = 6 ampersand

keycode55 = 7 slash braceleft

keycode56 = 8 parenleft bracketleft

keycode57 = 9 parenright bracketright

keycode65 = a A

keycode66 = b B

keycode67 = c C

keycode68 = d D

keycode69 = e E EuroSign

keycode70 = f F

keycode71 = g G

keycode72 = h H

keycode73 = i I

keycode74 = j J

keycode75 = k K

keycode76 = l L

keycode77 = m M mu

keycode78 = n N

keycode79 = o O

keycode80 = p P

keycode81 = q Q at

keycode82 = r R

keycode83 = s S

keycode84 = t T

keycode85 = u U

keycode86 = v V

keycode87 = w W

keycode88 = x X

keycode89 = y Y

keycode90 = z Z

keycode96 = KP_0 KP_0

keycode97 = KP_1 KP_1

keycode98 = KP_2 KP_2

keycode99 = 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

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 question backslash

keycode 252 = asciicircum degree

keycode 253 = 3 sterling

keycode 254 = Mode_switch

目的 : 监听移动端键盘展开事件

工具 : 移动端, js

思路 : 可以通过监听窗口大小的改变来实现,当端键盘展开时,窗口的大小发生改变,依据此基础进行判断.

js 移动端关于页面布局，如果底部有position:fixed的盒子，又有input，当软键盘d出收起都会影响页面布局。这时候Android可以监听resize事件，代码如下，而iOS没有相关事件。

方法一实现代码:

//获取当前页面高度

var winHeight = $(window).height()   

$(window).resize(function(){

   var thisHeight=$(this).height()

    if(winHeight - thisHeight >50){

        //窗口发生改变(大),故此时键盘d出

         //当软键盘d出，在这里面 *** 作

    }else{

        //窗口发生改变(小),故此时键盘收起

        //当软键盘收起，在此处 *** 作

    }

})

方法二:监控键盘

监控的方式其实筛选下来也不过两种：

① 时钟setInterval不停监控

② 系统级别的监控，比如键盘出现时候通知window一个事件，但是很遗憾现在还没有这个事件，但是这个事件等于

input类元素获取焦点 == d出虚拟键盘

input类元素失去焦点 == 收起虚拟键盘

但是我们前面已经说过，上面的原则不一定可靠，所以该种方案也未必可靠了

基于系统监控这点，我们还可以监控resize事件或者scroll事件，但是经过我的测试，setInterval表现比较好.于是，我们简单写一段代码，可靠是否满足需求：

window.alert = function (msg) {

  $('body').append('<div>' + msg + '</div>')

}

function fixedWatch(el) {

  if(document.activeElement.nodeName == 'INPUT'){

    el.css('position', 'static')

  } else {

    el.css('position', 'fixed')

  }

}

setInterval(function () {

  fixedWatch($('#headerview header'))

}, 500)

如上:移动端键盘展开事件即可被监听.

---