JavaScript (2)

目录

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

一 JS常见的事件

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

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

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

  1. 阻止超链接的默认跳转行为
    JavaScript (2)_第2张图片
  2. 阻止表单的默认提交行为
    JavaScript (2)_第3张图片

三 获取发生事件的标签

  1. 在js如何获取到发生事件的标签对象。
    JavaScript (2)_第4张图片

四 DOM编程(Document Object Model)

JavaScript (2)_第5张图片
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. 通过点击实现图片的切换
    JavaScript (2)_第6张图片
  2. 鼠标移入div修改css样式
    JavaScript (2)_第7张图片
  3. 修改元素内容
    JavaScript (2)_第8张图片
  4. 通过按钮实现复选框的选中和不选中
    JavaScript (2)_第9张图片

你可能感兴趣的:(笔记)