web前端 --- js事件

js事件（event）

（js诞生就是基于事件驱动型编程）

（1）事件

用户通过各种行为（按键、鼠标点击、鼠标hover......）行为动作，引起相关 js 代码的执行。

事件的三元素：

• 事件源：事件的被触发者，一般会绑定事件
• 事件对象（event）：这个对象包含了该事件相关的所有信息
• 事件处理函数：处理事件的代码

<1> 定义事件（三种方式）

[1] DOM0模式：需html的标签onxxxx属性来配置

缺点：耦合了js和html，违背了w3c的三层分离原则；这种方式在事件处理函数中，拿不到事件对象；事件函数中的this指针指向winodw对象

ps：

test01(this)        //  绑定事件时，可以将this传递到事件函数中，事件函数需要传递这个this指针；

console.log(this)        //  而在function中的this直接指向了window对象

    
    
    
    
    


    点击一下，你就知道
    

[2] DOM2模式

主要涉及到两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和 removeEventListener()。

• 通过DOM对象，动态绑定事件

    
    
    
    


    美女不在这
    
    可以在这找找看
    可以在这找找看

    你喜欢美女吗
    你喜欢美女吗
    你喜欢美女吗
    你喜欢美女吗
    

• 还有一种事件监听方式，绑定事件

    
    
    
    



    百度
    这里有个祢豆子
    

[3] HTML事件处理程序

直接在HTML代码中添加事件处理程序

<2> 事件流的分类

 

冒泡流：冒泡即事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的节点（文档）

捕获流：捕获即事件最早由不太具体的节点接收，而最具体的节点最后接收到事件。

（2）常见的事件

事件	内容
onabort	图像加载被中断
onblur	元素失去焦点
onchange	用户改变域内容
ondblclick	鼠标双击某个对象
onerror	当加载文档或图像时发生某个错误
onfocus	元素获得焦点
onkeydown	某个键盘的键被按下
onkeypress	某个键盘的键被按下或按住
onkeyup	某个键盘的键被松开
onload	某个页面或图像完成加载
onmousedown	某个鼠标按键被按下
onmousemove	鼠标被移动
onmouseout	鼠标从某元素被移开
onmouseover	鼠标被移到某元素之上
onmouseup	某个鼠标按键被松开
onreset	重置按钮被点击
onresize	窗口或框架被调整尺寸
onselect	文本被选定
onsubmit	提交按钮被点击
onunload	用户退出页面

（3）代码示例：

例1：抽奖

    
    
    
    
    


    

        

            
                小礼品
            
        
        点击开始
    

    

例2：div的拖动