JavaScript (2)

目录

• 一 JS常见的事件
• 二 阻止标签的默认事件行为
• 三 获取发生事件的标签
• 四 DOM编程(Document Object Model)
• 五 典型案例

一 JS常见的事件

事件：用户在操作页面元素时可以被JS侦测到行为。
事件绑定：给一个标签绑定在发生特定事件时要执行的代码。

1. 常见事件：
   所有标签都有：
         单击：onclick
         移入：onmouseover
         移出：onmouseout
   body标签独有:
         页面加载完毕：onload
   form组件独有【重点】:
         获取焦点：onfocus
         失去焦点：onblur
         值发生改变：onchange
         提交表单：onsubmit （form标签）
2. 绑定事件：
   

二 阻止标签的默认事件行为

1. 阻止超链接的默认跳转行为
   
2. 阻止表单的默认提交行为
   

三 获取发生事件的标签

1. 在js如何获取到发生事件的标签对象。
   

四 DOM编程(Document Object Model)

DOM编程的步骤：

1. 获取标签DOM对象
   document.getElementById(“标签的id”)返回了一个dom对象
2. 访问属性
   dom对象.属性，一般情况下，标签的属性名是什么xxx，js中就调用dom对象.xxx
   几个特殊的属性：
   innerHTML: 是开始标签和结束标签之间的标签的内容。注意input标签没有innerHTML。
   className属性因为js中class为关键字，那么js操作dom元素的class属性时，要使用className属性。
   复选框的checked属性：html中checked值可以为任意值，js中想让复选框选 中，需要设置checked=true，不选中设置checked=false
3. 修改网页内容
   dom对象.属性=新的值;

五 典型案例

1. 通过点击实现图片的切换
   
2. 鼠标移入div修改css样式
   
3. 修改元素内容
   
4. 通过按钮实现复选框的选中和不选中