0
点赞
收藏
分享

微信扫一扫

JavaScript DOM基础知识（十一）

骑在牛背上看书 2022-04-01 阅读 55
javascript前端开发语言

事件

  • 事件指的是文档或者浏览器窗口中发生的一些特定行为瞬间
  • 事件是可以被 JavaScript 侦测到的行为
  • 事件可以提高网页的交互性
  • 事件通常与函数配合使用，当事件发生时执行对应的函数
  • 事件驱动（事件触发时，驱动函数执行）

常见的事件类型

分割线分类记

  • click 鼠标左键点击某个对象（鼠标左键按下并抬起事件（左击事件））

  • dblclick 鼠标双击某个对象（）

  • contextmenu 鼠标点击右键（鼠标右键按下抬起事件（右击事件））

  • blur 元素失去焦点，有blur()方法

  • focus 元素获得焦点，有focus()方法

  • input 用户输入时触发

  • change 用户改变域的内容（值改变时触发）

  • keydown 键盘某个键被按下(所有键)

  • keypress 键盘某个键被按下(不包括系统功能键，如箭头键，ctrl，F1，F2等)

  • keyup 键盘某个键被松开

  • mousedown 某个鼠标按键被按下（包含鼠标左中右键）

  • mouseup 某个鼠标按键被松开（包含鼠标左中右键）

  • mousemove 鼠标在某元素上移动（高频触发事件）

  • mouseenter 鼠标进入某元素（）

  • mouseleave 鼠标从某元素移开（）

  • mouseover 鼠标移到某元素之上(冒泡)

  • mouseout 鼠标从某元素移开(冒泡)

  • submit form提交时触发（）

  • reset 表单重置事件（）

  • resize 窗口尺寸变化时触发（浏览器可视区窗口尺寸改变事件（高频触发事件））

  • load 某个页面或图像被完成加载（整个页面资源加载完成时触发（html css js img 字体图标。。。））

// 图片加载完成事件
console.log( img.clientWidth,img.clientHeight )// 0 0 
img.onload = function (){
    console.log( img.clientWidth,img.clientHeight )// 2560 1440
}

事件模型

  • 事件模型主要讲的是事件的注册、移除及事件的流向(执行顺序)
  • JavaScript中的两种事件模型：DOM0级事件模型 和 DOM2级事件模型

DOM0级事件模型

  • DOM0级事件模型是早期的事件模型，所有的浏览器都支持
  • 注册事件：在事件类型前面加on，如：onclick、onmouseover …
  • 移除事件：dom.onclick = null
  • 在DOM0级事件模型中，每个DOM对象只能注册一个相同类型的事件，注册多个则会发生覆盖，只执行最后一个

DOM2级事件模型

  • DOM2级事件模型是较新的事件模型，IE678不支持的

  • 注册事件：addEventListener(type,fn,useCapture) 事件监听器

    • type----事件类型，例：click、mouseover…
    • fn----事件处理函数
    • useCapture----布尔值，默认false
    • ( true表示事件捕获，false表示事件冒泡 )

  • 移除事件：removeEventListener(type, fnName, useCapture)

  • 每个DOM对象可以注册多个相同类型的事件，会依次执行，不会发生覆盖

  • IE678不支持addEventListener，但提供自己的实现方式：

  • 注册事件：attachEvent( type , fnName )

    • type----事件类型，例：onclick、onmouseover
    • fn----事件处理函数
    • 没有第三个参数

  • 移除事件：detachEvent( type , fnName )

选项卡切换

  • 选项卡切换效果是页面中最常见、最实用、最广泛的一个效果

  • 熟练掌握其写法，充分理解实现原理！！！

  • 关键思路：

    1. 所有选项都有一个点击事件
    2. 给当前点击的选项添加选中状态，其他选项去掉选中状态（排他法）
    3. 与当前点击选项索引相同的内容块显示，其他内容块隐藏
// 第一种方法
<style>
*{
    margin: 0;
    padding: 0;
}
.tab{
    width: 600px;
    margin: 100px auto 0;
    /* border: 1px solid red; */
}
.header{
    overflow: hidden;
    border-top: 2px solid #06A86E;
}
.header span{
    float: left;
    width: 150px;
    line-height: 40px;
    text-align: center;
    font-size: 16px;
    color: #666;
    background-color: #eee;
}
.content{
    padding-top: 15px;
    height: 200px;
    overflow: hidden;
}
.content div{
    overflow: hidden;
    margin-bottom: 10px;
    display: none;
}
.content div img{
    width: 130px;
    height: 190px;
    margin: 0 10px;
    float: left;
}
/* 选中样式 */
.header .active{
    color: #fff;
    background-color: #06A86E;
}
.content .show{
    display: block;
}
</style>
    
<div class="tab">
    <div class="header">
        <span class="active">喜剧</span>
        <span>爱情</span>
        <span>科幻</span>
        <span>动作</span>
    </div>
    <div class="content">
        <div class="show">
            <img src="./imgs/e1.png" alt="">
            <img src="./imgs/e1.png" alt="">
            <img src="./imgs/e1.png" alt="">
            <img src="./imgs/e1.png" alt="">
        </div>
        <div>
            <img src="./imgs/e2.png" alt="">
            <img src="./imgs/e2.png" alt="">
            <img src="./imgs/e2.png" alt="">
            <img src="./imgs/e2.png" alt="">
        </div>
        <div>
            <img src="./imgs/e3.png" alt="">
            <img src="./imgs/e3.png" alt="">
            <img src="./imgs/e3.png" alt="">
            <img src="./imgs/e3.png" alt="">
        </div>
        <div>
            <img src="./imgs/e4.png" alt="">
            <img src="./imgs/e4.png" alt="">
            <img src="./imgs/e4.png" alt="">
            <img src="./imgs/e4.png" alt="">
        </div>
    </div>
</div>

<script>
// 选项卡切换：最基础、最实用、应用最广泛
// 1.每一个选项都有点击事件
// 2.当前选中项有选中状态，其他选项去掉选中状态
// 3.与当前选中项的索引相同的内容块显示，其他内容块隐藏
var spans = document.querySelectorAll('.header span')
var divs = document.querySelectorAll('.content div')

spans[0].onclick = function (){
    spans[0].className = 'active'
    spans[1].className = ''
    spans[2].className = ''
    spans[3].className = ''

    divs[0].className = 'show'
    divs[1].className = ''
    divs[2].className = ''
    divs[3].className = ''
}
spans[1].onclick = function (){
    spans[0].className = ''
    spans[1].className = 'active'
    spans[2].className = ''
    spans[3].className = ''

    divs[0].className = ''
    divs[1].className = 'show'
    divs[2].className = ''
    divs[3].className = ''
}
spans[2].onclick = function (){
    spans[0].className = ''
    spans[1].className = ''
    spans[2].className = 'active'
    spans[3].className = ''

    divs[0].className = ''
    divs[1].className = ''
    divs[2].className = 'show'
    divs[3].className = ''
}
spans[3].onclick = function (){
    spans[0].className = ''
    spans[1].className = ''
    spans[2].className = ''
    spans[3].className = 'active'

    divs[0].className = ''
    divs[1].className = ''
    divs[2].className = ''
    divs[3].className = 'show'
}
</script>


// 第二种方法
<script>
var spans = document.querySelectorAll('.header span')
var divs = document.querySelectorAll('.content div')

function clearClass(){
    spans[0].className = ''
    spans[1].className = ''
    spans[2].className = ''
    spans[3].className = ''

    divs[0].className = ''
    divs[1].className = ''
    divs[2].className = ''
    divs[3].className = ''
}
spans[0].onclick = function (){
    clearClass()// 清除所有类名
    spans[0].className = 'active'
    divs[0].className = 'show'
}
spans[1].onclick = function (){
    clearClass()// 清除所有类名
    spans[1].className = 'active'
    divs[1].className = 'show'
}
spans[2].onclick = function (){
    clearClass()// 清除所有类名
    spans[2].className = 'active'
    divs[2].className = 'show'
}
spans[3].onclick = function (){
    clearClass()// 清除所有类名
    spans[3].className = 'active'
    divs[3].className = 'show'
}
</script>


// 第三种方法
<script>
var spans = document.querySelectorAll('.header span')
var divs = document.querySelectorAll('.content div')

function clearClass(){
    for (var i = 0, len = spans.length; i < len; i++){
        spans[i].className = ''
        divs[i].className = ''
    }
}

for(var i = 0, len = spans.length; i < len; i++){
    spans[i].onclick = function (){// 事件处理函数
        clearClass()// 清除所有类名
        // 遍历找出哪个是当前点击的span
        for (var n = 0; n < spans.length; n++){
            if (spans[n] === this) {
                // n就是当前点击选项的索引
                spans[n].className = 'active'
                divs[n].className = 'show'
            }
        }
    }
}

</script>


// 第四种方法
<script>
var spans = document.querySelectorAll('.header span')
var divs = document.querySelectorAll('.content div')

// 给每一个span添加点击事件
for(var i = 0, len = spans.length; i < len; i++){
    spans[i].onclick = function (){// 事件处理函数
        // 你点击哪个span，this就指向哪个span
        // console.log( this )

        // 只能只给哪个选项添加类名，不知道给哪个内容块显示
        // this.className = 'active' 

        // 遍历找出哪个是当前点击的span
        for (var n = 0; n < spans.length; n++){
            if (spans[n] === this) {
                // n就是当前点击选项的索引
                spans[n].className = 'active'
                divs[n].className = 'show'
            } else {
                spans[n].className = ''
                divs[n].className = ''
            }
        }
    }
}

</script>


// 第五种方法
<body>
<div class="tab">
    <div class="header">
        <span class="active" index="0">喜剧</span>
        <span index="1">爱情</span>
        <span index="2">科幻</span>
        <span index="3">动作</span>
    </div>
    <div class="content">
        <div class="show">
            <img src="./imgs/e1.png" alt="">
            <img src="./imgs/e1.png" alt="">
            <img src="./imgs/e1.png" alt="">
            <img src="./imgs/e1.png" alt="">
        </div>
        ...
    </div>
</div>

<script>
var spans = document.querySelectorAll('.header span')
var divs = document.querySelectorAll('.content div')
var prevIndex = 0 // 记录上次选中项的索引

// 给每一个span添加点击事件
for(var i = 0, len = spans.length; i < len; i++){
    // 给每一个span添加一个属性index，用于保存它的索引
    spans[i].index = i
    // spans[0].index = 0
    // spans[1].index = 1
    // spans[2].index = 2
    // spans[3].index = 3
    spans[i].onclick = function (){// 事件处理函数
        // console.log( this )

        // 如何知道上次选中项是谁？
        // spans[prevIndex]

        // 去掉上次选中项的类名
        spans[prevIndex].className = ''
        divs[prevIndex].className = ''

        // 如何知道当前点击的选项的索引？
        // console.log( this.index )
        // console.log( this.getAttribute('index') )

        // 给当前选中项添加类名
        spans[this.index].className = 'active'
        divs[this.index].className = 'show'

        // 更新上次选中项的索引
        prevIndex = this.index
    }
}
</script>
</body>


// 第六种方法
<body>
    
<div class="tab">
    <div class="header">
        <span class="active" onclick="tab(0)">喜剧</span>
        <span onclick="tab(1)">爱情</span>
        <span onclick="tab(2)">科幻</span>
        <span onclick="tab(3)">动作</span>
    </div>
    <div class="content">
        <div class="show">
            <img src="./imgs/e1.png" alt="">
            <img src="./imgs/e1.png" alt="">
            <img src="./imgs/e1.png" alt="">
            <img src="./imgs/e1.png" alt="">
        </div>
        ...
    </div>
</div>

<script>
var spans = document.querySelectorAll('.header span')
var divs = document.querySelectorAll('.content div')
var prevIndex = 0 // 记录上次选中项的索引

function tab(index){
    // index 点击选项的索引
    // 去掉上次选中项的类名
    spans[prevIndex].className = ''
    divs[prevIndex].className = ''

    // 给当前选中项添加类名
    spans[index].className = 'active'
    divs[index].className = 'show'

    // 更新上次选中项的索引
    prevIndex = index
}
</script>
</body>


// 第七种方法
<body>
    
<div class="tab">
    <div class="header">
      <!-- <span>科幻</span> -->
    </div>
    <div class="content">
      <!-- <img src="./imgs/e1.png" alt=""> -->
    </div>
</div>

<script>
var data = {
    titles: ['喜剧','爱情','科幻','动作'],
    contents: [
        ['./imgs/e1.png','./imgs/e1.png','./imgs/e1.png','./imgs/e1.png'],
        ['./imgs/e2.png','./imgs/e2.png','./imgs/e2.png','./imgs/e2.png'],
        ['./imgs/e3.png','./imgs/e3.png','./imgs/e3.png','./imgs/e3.png'],
        ['./imgs/e4.png','./imgs/e4.png','./imgs/e4.png','./imgs/e4.png']
    ]
}

var spans = document.querySelectorAll('.header span')
var divs = document.querySelectorAll('.content div')

// 根据数据初始化(默认选中第一项)
    data.titles.forEach(function (val, index) {
      var newSpan = document.createElement('span');
      newSpan.innerHTML = val;
      header.appendChild(newSpan);
    });
    header.firstElementChild.className = 'active';
    data.contents[0].forEach(function (val, index) {
      var newImg = document.createElement('img');
      newImg.src = val;
      content.appendChild(newImg);
    });
    var spans = document.querySelectorAll('.header span');
    var prevIndex = 0;

    // 给每项添加点击事件
    for (var i = 0; i < spans.length; i++) {
      spans[i].index = i;
      spans[i].onclick = function () {
        // this.index 当前点击选项的索引
        // 1. 去掉上次选中项的类名
        spans[prevIndex].className = '';
        // 2. 给当前选项添加类名
        this.className = 'active';
        // 3. 更新上次选中项的索引
        prevIndex = this.index;

        content.innerHTML = '' // 清空原来的数据
        data.contents[this.index].forEach(function (val, index) {
          var newImg = document.createElement('img')
          newImg.src = val
          content.appendChild(newImg)
        })
      }
    }
</script>
</body>
举报

相关推荐

Javascript基础知识

javascript数据类型数组JavaScript前端开发

javascript 基础知识

javascriptViewUI表单列表框动态添加JavaScript前端开发

JavaScript 基础知识

html字符串数组JavaScript前端开发

JavaScript基础知识

javascript前端开发语言

JavaScript学习---JavaScript基础知识

JavaScript学习字符串javascript首字母

JavaScript基础知识（1）

jspjavajavascript客户端服务器

JavaScript 基础知识总结

数组字符串返回结果Html/CSS前端开发

前端：javaScript基础知识

c语言开发语言物联网后端嵌入式硬件二维指针

JavaScript 对象基础知识

剪贴板javascript构造函数JavaScript前端开发

JavaScript基础知识总结（1）

javascript前端
0 条评论