DOM

DOM

1. 定义: 提供了一系列的模型和对象,让我们可以方便的来操作Web页面。

事件监听

1. 定义: 在web当中,事件在浏览器窗口中被处罚,并且通过绑定到某些元素上或者浏览器窗口本身,那么我们就可以给这些元素或者window窗口来绑定事件的处理程序,来对事件进行监听

2. 方式:
   (1) 在script中直接监听
   (2) 通过元素的on来监听事件

   <div onclick=" console.log('被点击了') " id="div1" > 点击 </div>    
   <div onclick=" onClick() " > 点击 </div>    
   
   <script>
     function onClick( ){ console.log( '被点击了' ) }
     const div1 = document.querySelect(' #div1 ')
     div1.onclick = onClick
   </script>

   注意: 这两种方式一次只能监听一个事件,后一个会覆盖前一个

   (3) 通过EvnetTarget中的addEventListener来监听

   <div id="div1"> 点击 </div>    
   
   
   <script>
     function onClick( ){ console.log( '被点击了' ) }
     const div1 = document.querySelect(' #div1 ')
     div1.addEventListener( 'click', onClick ,false)
   </script>

   备注: 可以监听多个相同事件

事件流

1. 定义: 事件冒泡和事件捕获

2. 事件冒泡
   (1) 定义: 从内部元素到外部元素

3. 事件捕获
   (1) 定义: 从外部元素到内部元素

注意: 先捕获再冒泡

事件对象(event)

1. 定义:获取触发事件的对象

2. event.target 和event.currentTarget 区别:
   (1) event.target 指向发生事件时操作的元素
   (2) event.currentTarget 一直指向绑定发生事件的元素

3. 常见方法
   (1) 阻止默认行为

    i. event.preventDefault()
   

   (2) 阻止事件传递( 捕获&冒泡 )

    i. event.stopPropagation()