JS事件

JacaScript 常用事件

HTML DOM

1. 当网页被加载时，浏览器会创建页面的文档对象模型(Document Object Model)
   

2. DOM 简介:

   • JavaScript 能改变页面中的所有HTML元素
   • JavaScript 能改变页面中的所有HTML属性
   • JavaScript 能改变页面中的所有CSS样式
   • JavaScript 能够应对页面中的所有事件做出反应

3. DOM 操作HTML:

   • 改变HTML输出流:

     • 绝对不要在文档加载完成之后使用document.wrie()会覆盖该文档

   • 寻找元素:

     • 通过id找到HTML元素
     • 通过标签名找到HTML元素

   • 改变HTML内容:

     • 使用属性:innerHTML
       语法

         var nav = document.getElementById("id").innerHTml = "container"
       }```
       
       ```document.getElentmentByTagName("p"); //匹配相同元素标签名的第一个

   • 改编HTML属性:

     • 使用属性:attribute
       语法
       document.getElementById("herfid").href="#"
document.getElementById("srcid").src="#"......

4. DOM 操作CSS:

   • 通过DOM对象改变CSS
     语法
     • document.getElementById("id").style.property = new style;
     • document.getElementById("id").style.coler= red;

5. DOM EventListener

   • 方法:

       addEventListener();
       removeEventListener();

   • addEventListener();

DOM

JS事件详解-事件流

• 事件流
  • 事件冒泡:由最具体的元素接收，然后逐级向上传播至最不具体的元素节点(DOM文档)
  • 事件捕获:最不具体的节点先接收事件，而最具体的节点应该是最后接受的事件

JS事件详解-事件处理

• HTML事件处理
  • 直接添加到HTMl结构中
• DOM0级事件处理 //会被覆盖
  • 把一个函数值赋值给一个事件处理程序属性
• DOM2级事件处理 //不会覆盖
  • addEventListener(“事件名”,”事件处理函数”,”布尔值”)
  • true:事件捕获
  • false:事件冒泡
  • removeEventListener();
• IE事件处理程序
  • attachEvent
  • detachEvent

JS事件详解-事件对象

• 事件对象:
  • 在触发DOM事件的时候都会产生一个对象
• 事件对象envent:
  • type: 获取事件类型
  • target: 获取事件元素目标
  • stopPropagation():阻止事件冒泡
  • preventDefault():阻止事件默认行为

JS内置对象

• 对象
• String字符串对象
• Data日期对象
• Array数组对象
• Math对象