事件基础 属性的操作

目录

一、事件基础

1、事件概述

2、事件概述

3、执行事件步骤

4、常见的鼠标事件

二、属性的操作

1、获取属性值

2、设置属性值

3、移除属性

4、案例 Tab栏切换

---

一、事件基础

1、事件概述

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。

简单理解： 触发--- 响应机制。

  网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按

钮时产生一个 事件，然后去执行某些操作。

2、事件概述

① 事件源 （谁）

② 事件类型 （什么事件）

③  事件处理程序 （做啥）

页面中有一个按钮，当鼠标点击按钮的时候，弹出 “ 你好 ” 警示框。

 分析：

① 获取事件源（按钮）

② 注册事件（绑定事件），使用 onclick

③ 编写事件处理程序，写一个函数弹出 alert 警示框

3、执行事件步骤

① 获取事件源

②  注册事件（绑定事件）

③  添加事件处理程序（采取函数赋值形式）

4、常见的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

二、属性的操作

1、获取属性值

在DOM对象中可以使用“element.属性”的方式来获取内置的属性值，但是DOM对象并不能直接使用点语法获取到自定义属性的值，那么如何获取自定义属性值呢？

在DOM中，可以使用getAttribute('属性')方法来返回指定元素的属性值。

<div id="demo" index="1" class="nav"></div>
  <script>
    var div = document.querySelector('div'); 
    console.log(div.id);                               // 结果为：demo
     console.log(div.getAttribute('id'));     // 结果为：demo
    console.log(div.getAttribute('index')); // 结果为：1
  </script>

2、设置属性值

在DOM对象中可以使用“element.属性= '值'”的方式来设置内置的属性值，并且针对于自定义属性，提供了“element.setAttribute('属性', '值')”的方式进行获取。

<div></div>
  <script>
    var div = document.querySelector('div');
    div.id = 'test';                        // 设置id值为test
    div.className = 'navs';        // 设置class类名为navs
    div.setAttribute('index', 2);  // 设置属性名为index，值为2
  </script>

效果图如下

 另外，也可以使用setAttribute()方式设置元素的类名。

div.setAttribute('class', 'footer');

【class 是属性  footer 是类名】

3、移除属性

在DOM中使用“element.removeAttribute('属性')”的方式来移除元素属性。 

<div id="test" class="footer" index="2"></div>
  <script>
    var div = document.querySelector('div');   
    div.removeAttribute('id');        // 移除div元素的id属性
    div.removeAttribute('class');   // 移除div元素的class属性                        
    div.removeAttribute('index'); // 移除div元素的index属性
  </script>

4、案例 Tab栏切换

案例要求：标签栏在网站中的使用非常普遍，它的优势在于可以在有限的空间内展示多块的内容，用户可以通过标签在多个内容块之间进行切换。

（1）编写HTML代码：

<div class="tab">
  <div class="tab_list">
 </div> // 标签部分
  <div class="tab_con">            // 标签内容部分
    <div class="item" style="display: block;">商品介绍模块内容</div>
    <div class="item">规格与包装模块内容</div>
    <div class="item">售后保障模块内容</div>
    <div class="item">商品评价（50000）模块内容</div>
    <div class="item">手机社区模块内容</div>
  </div>
</div>

（2）编写CSS样式代码

<style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .tab {
            width: 1000px;
            margin: 100px auto;
        }

        .tab_list {
            height: 40px;
            border: 1px solid gray;
            background-color: rgb(233, 235, 233);
        }

        .tab_list li {
            float: left;
            height: 40px;
            line-height: 40px;
            padding:0 55px;
            cursor: pointer;
        }
        .tab_list .current{
            background-color: red;
            color: honeydew;
        }
        .items{
            display: none;
        }
    </style>

（3）编写JS代码，获取标签部分和内容部分的对象元素 

<script>
     // 获取标签部分的所有元素对象
     var tab_list = document.querySelector('.tab_list');
     var lis = tab_list.querySelectorAll('li');
     // 获取内容部分的所有内容对象
     var items = document.querySelectorAll('.item');
</script>

（4）编写JS代码，for循环绑定单击事件 

for (var i = 0; i < lis.length; i++) {        // for循环绑定点击事件
    lis[i].setAttribute('index', i);	   // 开始给5个小li设置索引号
    lis[i].onclick = function () {  // 清除所有li的class类，给自己设置current类
      for (var i = 0; i < lis.length; i++) {  lis[i].className = ''; }
      this.className = 'current';
      // 2. 下面的显示内容模块
      var index = this.getAttribute('index');
      for (var i = 0; i < items.length; i++) { items[i].style.display = 'none'; }
      items[index].style.display = 'block';
    }
 };

展示效果：

 案例分析：

① Tab栏切换有2个大的模块

② 上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类

名的方式

③ 下面的模块内容，会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面。

④ 规律：下面的模块显示内容和上面的选项卡一一对应，相匹配。

⑤ 核心思路： 给上面的 tab_list 里面的所有小 li 添加自定义属性，属性值从 0 开始编号。

⑥ 当我们点击 tab_list 里面的某个小 li ，让 tab_con 里面对应序号的 内容显示，其余隐藏（排他

思想）