JavaScript——DOM事件

事件对用户操作做出反应：

1.当用户点击鼠标时
2.当网页已加载时
3.当图像已加载时
4.当鼠标移动到元素上时
5.当输入字段被改变时
6.当提交 HTML 表单时
7.当用户触发按键时

DOM事件-使用方法

方法一：

请点击该文本

方法二（从事件处理器调用一个函数）：

请点击该文本

方法三(使用 HTML DOM 来分配事件）：

document.getElementById(ele).onclick=function(){
    “代码块”
}
function fun1(){
    “代码块”
}
document.getElementById(ele).onclick=function(){fun1() };

窗口事件属性

**onload：**当文档加载后运行脚本。
**onresize：**当试图窗口调整大小时，执行脚本（方法体中的代码）。

例：

监听滚动条

onscroll：当页面内容超出页面试图的大小时，出现滚动条控制。

例：

  
    
    
    
  
  
    
让页面出现滚动条
    
让页面出现滚动条
    
让页面出现滚动条
    
让页面出现滚动条
    
让页面出现滚动条
    
  

鼠标事件

onclick	当用户点击某个对象时调用的事件句柄。
oncontextmenu	在用户点击鼠标右键打开上下文菜单时触发
ondblclick	当用户双击某个对象时调用的事件句柄。
onmousedown	鼠标按钮被按下。
onmouseenter	当鼠标指针移动到元素上时触发。
onmouseleave	当鼠标指针移出元素时触发
onmousemove	鼠标被移动。
onmouseover	鼠标移到某元素之上。
onmouseout	鼠标从某元素移开。
onmouseup	鼠标按键被松开。

onclinck点击事件–常用：
点击事件：是一个累加出发的触发的过程，每次点击都是上次点击后的结果，
基础上进行事件触发的,而不是从初始化进行触发的。
单独封装函数每次启动,执行完毕函数体中内容都会释放掉,

例一：

  
    
    
    
  
  
    

    //方法三：
    
Come On
    
  

例二：

表单事件

onblur	元素失去焦点时触发
onchange	该事件在表单元素的内容改变时触发( , , , 和 )
onfocus	元素获取焦点时触发
onfocusin	元素即将获取焦点时触发
onfocusout	元素即将失去焦点时触发
oninput	元素获取用户输入时触发
onreset	表单重置时触发
onsearch	用户向搜索域输入文本时触发 ( )
onselect	用户选取文本时触发 ( 和 )
onsubmit	表单提交时触发

例一：

    
    
    
    
    


    

        

            用户名
            
        
        

            密　码
            
        
        登录
    
    

例二：

  
    
    
  
  
    
      河南省
      江苏省
      湖南省
    
    
    
  

键盘事件

onkeydown	某个键盘按键被按下。
onkeypress	某个键盘按键被按下并松开。
onkeyup	某个键盘按键被松开

事件对象

CAPTURING-PHASE	当前事件阶段为捕获阶段(1)
AT-TARGET	当前事件是目标阶段,在评估目标事件(1)
BUBBLING-PHASE	当前的事件为冒泡阶段 (3)

什么是事件？

当我们与浏览器中 Web 页面进行某些类型的交互时，事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是 Web 浏览器中发生的事情，比如说某个 Web 页面加载完成，或者是用户滚动窗口或改变窗口大小。
通过使用 JavaScript ，你可以监听特定事件的发生，并规定让某些事件发生以对这些事件做出响应。

DOM事件流

DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素结点与根节点之间按特定的顺序传播，路径所经过的节点都会收到该事件，这个传播过程可称为DOM事件流。
事件顺序有两种类型：事件捕捉 和事件冒泡。

认识事件

事件：是侦测用户行为，和浏览器行为。
作用：可以实现用户，和浏览器之间的交互，js和html，css之间的交互。
交互：一个发出请求，一个作出响应。
事件是事件，事件后绑定的这个函数的作用是：触发事件后要做的事情。

例：

  
    
    
    
  
  
    
点我试试
    
    
  

事件绑定

方法一：元素对象.事件 = function(){};
方式二：在标签内部添加事件，值为触发事件后要做的事情。
方式三：addEventListener(‘事件’，处理函数，boolen)
true为捕获事件，false冒泡事件。w3c标准：IE不兼容。
方式四：attachEvent(‘on事件’.处理函数：false)兼容IE。

例：

绑定事件的封装方法

方法的作用时候：给元素绑定事件
让每一个可变的量为形参；一个对象；一个事件，一个事件处理函数，冒泡或捕获；所以需要四个形参

事件的对象

事件对象的：事件触发是；执行处理函数，将event作为实参传入
开始时候其它浏览器以IE 位参考。会添加一些IE支持的属性
后来有了很多主流浏览器；不是所有的主流浏览器都会把event直接挂在到window对象下；例如火狐就是间接挂在 到window对象的。
this 在IE9以下浏览器指向window对象，
this 指的是当前的对象；谁触发方法 他就指向谁；可以找到指定触发方法的对象。

例：

认识call

call()作用：改变this，指向:参数是谁，this就指向谁。

例：

事件源对象

target:火狐
srcElement:IE浏览器
火狐浏览器：一定有target，可能有srcElement
IE浏览器：一定有srcElement，一定没有target
谷歌浏览器不论什么版本，target，srcElement都有。

例：

事件模型

注：同一个对象只能绑定一个事件模型；要么冒泡要么捕获同一个对象；
既有冒泡；又有捕获，执行顺序先捕获后冒泡
事件的执行顺序 ： 捕获——> 正常触发 ——>冒泡
起点：触发事件的元素对象
捕获冒泡针对：多个对象绑定同一个事件，并且多个对象之间是直系血缘关系（父子关系；子孙关系）
发生事件捕获冒泡情况：以起点为基准，从dom对象往下找，直到找到起点为止，找的过程中如果起点的长辈中绑定和
起点的一样的事件，那么就会发生事件模型，如果没有，那么就不会发生冒泡或者捕获，正常触发

事件模型之冒泡：

代码结构上嵌套，在直系关系中，同一个事件绑定多个元素
（儿子，爹，爷爷都绑定该事件），从子元素到父元素依次触发该事件

事件模型之捕获：

代码结构上嵌套，在直系关系中，同一个事件绑定多个元素
（儿子，爹，爷爷都绑定该事件），从父元素到子元素依次触发该事件

例：

阻止冒泡事件

例：

阻止默认事件

方式一： e.preventDefault()
方式二： return false
方式三：nclick="return false"行内元素设置
方式四：作用阻止a标签；点击时候；页面回到顶部

例：

    
    
    
    
    


    

        
000￥
        
000￥
        
000￥
    
    
    测试a的特点
    
    跳转
        
    百度一下我就知道
    

事件委托

把子元素的事件委托给父级元素让父级元素代替子元素完成这件事
事件委托实现原理：
1：事件冒泡和事件源对象来实现
2：事件冒泡实现委托作用
3：事件源对象作用获取事件目标对象（换句话；获取触发事件的元素对象）

事件委托优点：

1：提高性能了。因为绑定一个处理函数比绑定多个处理函数好
2: 灵活性更好；不用每次添加元素时；都给添加元素添加事件处理函数
3: 减少了对dom的操作

论证过程：

因为事件的作用的实现用户和浏览器交互的过程，没有事件浏览器是不知道用户对浏览器做哪些事情。
所以在使用浏览器时候；浏览器默认情况就会有所有的事件。因而元素中也有很多默认的事件
事件是在用户做了某些操作时候被触发的。而我们给某个元素对象绑定事件目的是为了让用户在触发这个事件时候，告诉浏览器去完成一些事情。
又因为，只要事件被触发；就会出现对应的事件模型，
又因为；事件委托；通常委托给父元素；所以被委托对象为父元素
所以综上所述：证明了事件委托实现的过程，
注意区分：容易混的点，事件只要被触发就会有事件对象记录触发事件的所有信息。是谁触发的，在哪触发；都可以看到，
一个浏览器；只会有一个事件对象。只要有事件处理函数我们就可以看见这个事件对象。那么就可以通过事件源对象看到是谁触发的事件
一个浏览器只会有一个window对象 可以在window对象下看到很多事件，事件是做什么；由事件属性后面的值决定。

例：

    
    
    
    
    


    

        

            
我是标签00001
            
我是标签00002
            
我是标签00003
            
我是标签00004
            
我是标签00005