js:事件(注册、解绑、DOM事件流、事件对象、事件委托)

1、注册事件

(1)传统方式注册事件


        
        
    

js:事件(注册、解绑、DOM事件流、事件对象、事件委托)_第1张图片

 

 

 js:事件(注册、解绑、DOM事件流、事件对象、事件委托)_第2张图片

 

 

  •  存在唯一性,同一个元素,同一个事件只能设置一个处理函数,后面注册的处理函数会覆盖前面的处理函数

(2)方法监听注册方式(IE9以上)


        
        
    

js:事件(注册、解绑、DOM事件流、事件对象、事件委托)_第3张图片

 

 

  • 注册事件的类型是字符串,必须加引号,且不带on
  • 同一个元素同一个时间可以注册多个监听器

 

2、解绑事件

(1)传统方式

    
        
        
    

点过一次按钮后事件就失效了

(2)方法监听注册事件后解绑事件


        
        
    

 

3、DOM事件流

(1)概念

事件流是从页面中接收事件的顺序

事件发生时会在元素结点之间按照特定的顺序传播,这个传播过程即DOM事件流

从document到html再到元素搜索事件的阶段为捕获阶段,相反,为冒泡阶段

(2)演示

捕获阶段:

"body">
        
        
    

js:事件(注册、解绑、DOM事件流、事件对象、事件委托)_第4张图片

  • js代码中执行捕获或者冒泡中的一个阶段
  • onclick和attachEvent只能得到冒泡阶段
  • 参数为false或者省略则为冒泡阶段捕获

冒泡阶段:

   "body">
        
        
    

js:事件(注册、解绑、DOM事件流、事件对象、事件委托)_第5张图片

 

 

 js:事件(注册、解绑、DOM事件流、事件对象、事件委托)_第6张图片

 

 

阻止冒泡:

"body">
        
        
    
  • 冒泡被阻止后只能点击一次确定,点击后不会再跳出来新的页面
  • event是事件对象

 

4、事件对象

(1)获取事件对象

"body">
        
        
    
  • event就是一个事件对象,写到侦听函数内部的小括号里面当形参来看
  • 事件对象只有有了事件才会存在,是系统自动创建的不需要我们传递参数
  • 事件对象是我们的事件的一系列相关数据的集合,跟事件相关

js:事件(注册、解绑、DOM事件流、事件对象、事件委托)_第7张图片

 

 (2)事件对象的属性和方法


        
        
    

 

 

5、事件委托(代理、委派)

 "body">
        
  • 1
  • 2
  • 3
  • 4
  • 5

js:事件(注册、解绑、DOM事件流、事件对象、事件委托)_第8张图片

不是每一个子结点设置事件监听器,而是将事件的监听器设置到父节点上,然后利用冒泡原理影响到设置的子结点上

事件委托的作用:只操作了一次dom,提高了程序的性能

 

你可能感兴趣的:(js:事件(注册、解绑、DOM事件流、事件对象、事件委托))