JavaScript中的DOM2级事件及键盘事件和事件代理

1. DOM2级事件

1.1 addEventListenter

div.addEventListener("click",function () {
        console.log("22");
},true);

• 参数一: 事件类型(不能加on)

• 参数二: 事件处理程序

• 参数三: 布尔值,true表示捕获阶段,false表示冒泡阶段,不写代表冒泡阶段

注意:点击哪个区域哪个就是目标阶段,处于目标阶段,加true或false,不会影响其顺序

一个元素可以加多个同一事件类型

1.2 removeEventListenter

 var fun = function () {
        console.log("click...");
    }
    div.addEventListener("click",fun);
    div.removeEventListener("click",fun);
    p.addEventListener("click",function () {
        console.log("hhh");
    })

删除一个事件必须传递参数类型,事件处理程序函数名

2. 键盘事件

1. keydown

   表示键盘按下了,使用事件对象.keyCode可以查看按下去的那个键的编码

   不区分大小写,都是以大写为准 按下a是65

shift 16 ctrl 17 alt 18 空格32 左键37 上键38 右键39 下键40

不清楚编码可以使用"w".charCodeAt(0);

1. keyup

   表示键盘松开了

2. keypress

   只能监听到字符,像shift ctrl alt都不能监听到 区分大小写 a是97 A是65

3. 事件代理

事件代理的原理:

假设现在要处理多个具有并列关系元素的 click 事件，当我点击这些元素中的任何一个元素，则事件

一定会通过冒泡的方式，冒泡到他的上层的父节点元素然后一直冒到 window ,

所以这个时候我们就可以在他的上层元素中添加事件处理程序，来统一处理这些事件，在处理的过程

中可以通过获取target的id来知道是点击的哪个具体的元素。

这种方式就称之为事件委托。

例 : 实现点击按钮添加li 然后点击li区域弹出li内的文字

ul1.onclick = function (e) {
        //target表示点击区域最内侧的元素
        var target = e.target;
        //判断点击区域是否为LI
        if(target.tagName =="LI"){
            alert(target.innerHTML);
        }
    }
    btn.onclick = function () {
        var newLi = document.createElement("li");
        newLi.innerHTML = "新增的li";
        ul1.appendChild(newLi);
    }