Web APIS 第二天

事件监听

　　绑定事件 , 注册事件 , 事件监听

　　　　事件源 . addEventListener( '事件' , 事件处理函数 )

 

 

1. 随机点名案例

　　// 数据数组

let arr = ['马超', '黄忠', '赵云', '关羽', '张飞']
function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min
}

// 1.获取元素 两个按钮 + qs
let start = document.querySelector('.start');
let end = document.querySelector('.end');
let qs = document.querySelector('.qs');
//timer 要是全局变量
let timer = 0;
let random =0;

// 2. 给开始按钮注册事件
start.addEventListener('click',function () {
    //随机抽数据 --- 快速不断的抽取 间歇函数
    timer = setInterval(function () {
        random = getRandom(0,arr.length - 1);
　　　　　　//名字写入qs
        qs.innerHTML = arr[random]
    },100);

    //如果到了最后一个, 就禁用两个按钮
    if (arr.length === 1){
        start.disabled = true;
        end.disabled = true;
    }
})

// 3. 给结束按钮注册事件 本质是停止定时器
end.addEventListener('click',function () {
    clearInterval(timer);
    //删除数组元素
    arr.splice(random , 1);
})


2.小米搜索框案例

<script>
    let search = document.querySelector('input');
    let list = document.querySelector('.result-list');
    // 2. 事件监听 获得光标 focus
    search.addEventListener('focus',function () {
        //显示下拉菜单
        list.style.display = 'block';
        //文本框变色
        search.classList.add('search');
    })

    // 3. 失去光标事件 blur
    search.addEventListener('blur',function () {
        //隐藏下拉菜单
        list.style.display = 'none';
        //文本框变色
        search.classList.remove('search');
    })

</script>

3. 微博发布案例,

　　需求：用户输入文字，可以计算用户输入的字数

　　

<script>
  // 1. 获取元素 文本域  count
  let area = document.querySelector('#area')
  let useCount = document.querySelector('.useCount')
  // 2. 绑定事件  用户输入事件 input
  area.addEventListener('input',function () {
    useCount.innerHTML = area.value.length;
  })
</script>

4. 全选, 反选案例

<script>
  // 1. 获取元素 全选 和 ck 小复选框
  let all = document.querySelector('#checkAll');
  let cks = document.querySelectorAll('.ck');
  let span = document.querySelector('.all')

  // 2. 事件监听  全选按钮
  all.addEventListener('click',function () {
    //all.checked true
    //我们需要做的就是把 all.checked给下面三个小按钮
    //因为三个按钮在伪数组里面,我们需要用遍历的方式,爱着取出来, 依次给值
    for (let i = 0 ; i < cks.length ; i++){
      cks[i].checked = all.checked;
    }
    if(all.checked){
      span.innerHTML = '取消';
    }else {
      span.innerHTML = '全选';
    }
  })

  for (let i = 0 ; i < cks.length ; i++){
    cks[i].addEventListener('click',function () {
      //只要点击任何一个小按钮, 都要遍历所有的小按钮
      for (let j = 0 ; j < cks.length ; j++){
        //都来看看是不是有人没有选中
        if (cks[j].checked === false){
          all.checked = false;
          span.innerHTML = '全选'
          return;
        }
      }
      //当我们循环结束, 如果代码走到这里说明 没有false
      all.checked = true;
      span.innerHTML = '取消'
    })
  }

</script>

5. 购物车加减

<script>
    // 1.获取元素
    let total = document.querySelector('#total');
    let add = document.querySelector('#add');
    let reduce = document.querySelector('#reduce');

    //2. 点击加号 事件侦听
    add.addEventListener('click',function () {
        total.value++;
        reduce.disabled = false;
    })

    reduce.addEventListener('click',function () {
        total.value--;
        if (total.value <= 1){
            reduce.disabled = true;
        }
    })
</script>

6. 综合案例 tab栏切换

<script>
  let lis = document.querySelectorAll('.tab .tab-item');
  let box = document.querySelectorAll('.main');
  for (let i = 0 ; i <= lis.length ; i++){
    lis[i].addEventListener('click',function () {
      //找到以前的active 类 移除掉
      document.querySelector('.tab .tab-item.active').classList.remove('active');
      // 当前元素添加
      this.classList.add('active');

      document.querySelector('.products .active').classList.remove('active');
      box[i].classList.add('active');
    })
  }
</script>