JavaScript DOM 高级事件绑定和事件委托

目录

 HTML DOM 事件

1.事件对象

鼠标事件onmousedown对象

键盘事件对象

 例子：按键盘移动div

2.事件绑定及移除

事件绑定

DOM0级

DOM2级

事件移除

DOM0级

DOM2级

 事件流

4.阻止事件冒泡

5.阻止默认行为

事件委托

实现思路

概念

模拟搜索框

---

 HTML DOM 事件

  HTML DOM 允许 JavaScript 对 HTML 事件作出反应： JavaScript 能够在事件发生时执行，比如    当用户点击某个 HTML 元素时。

   HTML 事件的一些例子：

• 当用户点击鼠标时
• 当网页加载后
• 当图像加载后
• 当鼠标移至元素上时
• 当输入字段被改变时
• 当 HTML 表单被提交时
• 当用户敲击按键时 

1.事件对象

• 事件对象就是当前事件触发的详细信息，浏览器会将这些信息以一个对象的形式当做实参传递给事件处理函数的第一个形参

• 事件对象也会存储在浏览器顶层对象中 window.event

鼠标事件onmousedown对象

//直接给文档绑定
document.onmousedown = function (event) {
    // event:IE8及以下不兼容  浏览器没有传递实参 默认值是undefined
    // 事件对象的兼容处理  
    event = event || window.event;
    console.log(event);

    // 事件对象的属性
    //target 事件源  事件触发的源头   
    // 不兼容 IE8及以下没有这个属性
    // 兼容处理
    var target = event.target || event.srcElement;
    console.log(target);

    // 事件类型
    // type
    console.log(event.type);

    // 位置属性
    // clientX  / clientY  距离可视区域左上角距离
    console.log(event.clientX, event.clientY);

    // pageX / pageY  距离文档(body)的距离 
    // IE8及以下不兼容  没有这个属性
    console.log(event.pageX, event.pageY);  

    // screenX / screenY  距离电脑屏幕(左上角)的距离
    console.log(event.screenX, event.screenY);


    // altKey / ctrlKey / shiftKey    当前事件触发是否按下了对应的键 默认值都是flase,按下了值为true
    console.log(event.altKey, event.ctrlKey, event.shiftKey);
    if (event.altKey) {
        console.log("hello");
    }

键盘事件对象

• onkeydown :键盘按下

• onkeypress:键盘按着

• onkeyup：键盘抬起

键盘事件一般给document 或 表单输入框  

target 事件源  事件触发的源头 

document.onkeydown = function (ev) {
    // 事件对象兼容处理
    // event:IE8及以下不兼容  浏览器没有传递实参 默认值是undefined
    ev = ev || window.event;
    console.log(ev); //KeyboardEvent{...}

    // 事件对象的属性
    //target 事件源  事件触发的源头   
    // 不兼容 IE8及以下没有这个属性
    // 兼容处理
    var target = ev.target || ev.srcElement;
    console.log(target);

    // key 键值  不兼容IE8及以下没有这个属性
    console.log(ev.key);

    // keyCode 键盘码  ASCII值
    // onkeydown 和 onkeyup 不区分大小写 都是大写的ASCII值  onkeypress区分大小写
    console.log(ev.keyCode);

    // altKey / ctrlKey / shiftKey    当前事件触发是否按下了对应的键 默认值都是flase,按下了值为true
    console.log(ev.altKey, ev.ctrlKey, ev.shiftKey);
    if(ev.keyCode == 66 && ev.altKey){
        console.log("alt + b");
    }


    // type  事件类型
    console.log(ev.type);

}

 例子：按键盘移动div

 <div></div>
    <script>
        var div = document.getElementsByTagName("div")[0];

        // 绑定键盘事件
        document.onkeydown = function(ev){
            // 事件对象兼容处理
            ev =ev || window.event;

            console.log(ev.keyCode);

            //w:87
            //s:83
            //a:65
            //d:68
            if(ev.k