JavaScript事件与属性操作详解-优快云博客

鼠标事件	触发条件
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';
    }
 };

展示效果：