DOM2

dom2事件处理程序

1.添加事件：

方式 : xxx.addEventListener(‘click’, function() {}, false)
参数说明：
参数1：要处理的事件名(注意：名称前面没有on) //事件类型（click，mousedown，mousemove，scroll，load）
参数2：作为事件处理程序的函数 //事件发生时做的事情
参数3：是否在捕获阶段处理，true为捕获阶段，false为冒泡阶段，默认为false
好处：可以为一个元素的同一事件，添加多个处理程序，事件触发时调用的顺序，就是处理程序添加的顺序

  1. var div = document.querySelector('div');
  3. div.addEventListener('click', function () {
  4.   console.log('div:click(捕获阶段)');
  5. }, true);

2.删除事件：

方式：xxx.removeEventListener(‘click’, function () {}, false)
参数说明：参数1：要删除的事件处理的事件名//事件类型
参数2：删除的事件处理程序//函数名称
参数3：是否在捕获阶段删除事件(true捕获阶段，false冒泡阶段，默认为false)
注意： 1.删除事件时，第二个参数必须是函数名，不能是匿名函数
2.删除的事件与添加的事件必须在同一个阶段。（都是捕获或都是冒泡）。

  1. functionaaa () {
  2.   console.log('div:click又发生了(捕获阶段)');
  3. }
  4. div.addEventListener('click', aaa, true);
  5. div.removeEventListener('click', aaa, true);

3.特点:

  1. 可以捕获阶段处理事件
  2. 可以为同一个元素的同一个事件重复添加处理程序(DOM0后添加的会将先添加的覆盖)
  3. IE8不兼容
  4. this就是addEventListener前边的元素

    键盘事件

    键盘事件的target，是页面上获得焦点的元素
    div没有默认焦点，可以加上属性tabindex
    1. <div tabindex="8"></div>

onkeydown

当用户按下任意键时触发。如果按住不放，会重复触发

  1. window.onkeydown = function(evt){
  2.   console.log('onkeydown',evt.keyCode)
  3. }
  1. 每个按键都有自己的编码(不是字符编码)，evt.keyCode输出的就是这个编码
  2. 当按下按键时，该事件会连续触发，即摁住不放时

  3. 只要是按下按键，该事件都会触发

    onkeypress

    当用户按下字符键时触发。如果按住不放，会重复触发

    1. window.onkeypress = function(evt){
    2. console.log('onkeypress,keyCode',evt.keyCode);
    3. console.log('onkeypress,charCode',evt.charCode);
    4. }

  4. charCode是按下按键所输出的字符编码//keyCode同样输出的是字符编码

  5. 非字符按键，不触发该事件
  6. 按键按住时，会不断触发该事件

    onkeyup

    当用户释放键盘上的键时触发
    1. window.onkeyup = function(evt){
    2. console.log('onkeyup,松了键');
    3. }
    按住按键时，只有在按键抬起时触发一次

    事件触发顺序

    文本框中事件的触发顺序
    1.keydown
    2.keypress
    3.文本框发生变化
    4.keyup ```javascript var input = document.querySelector(‘input’) input.onkeydown = function(evt){ alert(‘input:onkeydown，keycode’,evt.keyCode) console.log(‘onkeydown’, evt.keyCode); }//第一个弹出这个框

input.onkeypress = function(evt){ alert(‘input:onkeypress,charCode’,evt.charCode) console.log(‘onkeypress,charCode’,evt.charCode) }//第二个弹出这个框

input.onkeyup = function(){ alert(‘input:onkeyup’) } ```

按键信息

1.event.keyCode
2.特殊按键组合：
shift  当按下时，event.shiftKey === true
ctrl  当按下时，event.ctrlKey === true
alt  当按下时，event.altKey === true