事件

什么时候改变DOM结构？用JS操作的时机是何时？事件！任何的变化，改变、、、

• 鼠标点击
• 触发按键
• 图片已加载
• 网页已加载、、、

事件流

事件的产生和传播：

• 事件的捕获：
  点击div,事件触发：从手机屏幕开始，最外层的document最先听到；然后往内依次传递，，，html,body,最后div。
• 事件冒泡：
  点击div,div先听到，事件想向上传播，然后body,html,document。

事件为什么要传播？
因为，传播就是用的嵌套，用的元素间的父子关系，可以区分各个元素。所以事件针对的对象必须要明确啊，如何确定事件的对象，就要传播起来，一层一层地确定对象。否则，事件都在一个平面上作用，不知道是哪个元素了。

• 标准事件流
  就是先捕获，再冒泡，结合起来。

事件使用方式

事件处理程序就是事件侦听器。

• HTML内联方式

老写法不推荐


//this代表的是当前的元素btnClick。原始的写法。
绑定执行是同步的，绑定对应的元素；事件触发执行后续是异步的，放到任务队列里的。

绑定多个事件会不会覆盖？

  
  
  


click me


   
//运行得到：
click me
click me




  
  
  


click me


     //hello，会，就是赋值，肯定覆盖。

DOM2事件处理

• 1 addEventListener
• 2 removeEventListener
  后面有三个参数——
• 事件类型
• 处理方法
• 布尔值，true是在捕获阶段处理， false是在冒泡阶段。

  
  
  


click me


   
 //  hello
haha     不再覆盖了，这时候不是属性添加值了，而是成了一个函数了，
函数内部赋予什么无所谓，函数可以执行多次。
事件是click而不是onclick。

冒泡与捕获

  
  
  



click me
  

    container
    

      box
      

        target
      
    
  
 



//默认冒泡模型：
点击target:"target clicking..."
"box clicking..."
"container clicking..."
点击box:"box clicking..."
"container clicking..."
也就是让事件的发生很有针对性，可控性，这才是意义所在。到了哪个元素，那个元素就触发了。

把上述的改成捕获阶段，加上第三个参数true值：
"container clicking..."
"box clicking..."
"target clicking..."   //根本就是传到哪，哪里执行，而传递顺序是可以操作的，事件作用对象也是可选的。