JavaScript-DOM（事件高级）——含案例源码

目录

1、注册事件（绑定事件）

1.1、注册事件概述

1.2、addEventListener 事件监听方式

1.3、attachEvent事件监听方式(了解)

1.4、注册事件兼容性解决方案

 2、删除事件（解绑事件）

2.1、删除事件的方式

 2.2、删除事件兼容性解决方案

 3、DOM事件流

  4、事件对象

4.1、事件对象概念

 4.2、事件对象的使用语法

 4.3、事件对象的兼容性方案

​编辑

 4.4、事件对象的常见属性和方法

4.4.1、this和e.targer的区别

 4.4.2、事件对象阻止默认行为

5、阻止事件冒泡

5.1、阻止事件冒泡的两种方式

 5.2、阻止事件冒泡的兼容性解决方案

 6、事件委托（代理、委派）

 7、常用的鼠标事件

7.1、常用的鼠标事件

 7.2、鼠标事件对象

7.3、案例：跟随天使

8.常用的键盘事件

8.1、常用的键盘事件

 8.2、keyCode判断用户按下哪个键

8.3、案例：模拟京东按键输入内容

8.4、案例：模拟京东快递单号查询

---

1、注册事件（绑定事件） 1.1、注册事件概述

1.2、addEventListener 事件监听方式

    传统注册事件
    方法监听注册事件
    

1.3、attachEvent事件监听方式(了解)

    attachEvent
    

1.4、注册事件兼容性解决方案

 2、删除事件（解绑事件） 2.1、删除事件的方式

 2.2、删除事件兼容性解决方案

    
    
    
    
    


    1
    2
    3
    

 3、DOM事件流

    
    
    
    
    


    
        盒子
    
    

  4、事件对象 4.1、事件对象概念

 4.2、事件对象的使用语法

 4.3、事件对象的兼容性方案

    
    
    
    
    


    123
    

 4.4、事件对象的常见属性和方法

4.4.1、this和e.targer的区别

    
    
    
    
    


    123
    
        abc
        abc
        abc
    
    

 4.4.2、事件对象阻止默认行为

    
    
    
    


    123
    百度
    
    

5、阻止事件冒泡 5.1、阻止事件冒泡的两种方式

 5.2、阻止事件冒泡的兼容性解决方案

 6、事件委托（代理、委派）

    
        前端工程师
        前端工程师
        前端工程师
        前端工程师
    
    

 7、常用的鼠标事件 7.1、常用的鼠标事件

 7.2、鼠标事件对象

7.3、案例：跟随天使

 图片想与鼠标居中，根据图片大小，坐标减半（图片大小：500×355）

修改其中的值就可以了

 pic.style.left=x-250 + 'px';
 pic.style.top=y-125 + 'px';

8.常用的键盘事件 8.1、常用的键盘事件

事件除了使用鼠标触发，还可以使用键盘触发

 

 8.2、keyCode判断用户按下哪个键

8.3、案例：模拟京东按键输入内容

 在京东页面按住s键，焦点自动在搜索框

body>
    
    

8.4、案例：模拟京东快递单号查询

 

    
    
    
    
    



    
        123