携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第15天，点击查看活动详情

实现非空判断

非空判断:获取用户输入的数据,然后判断数据是否为空

作用:减小服务器的压力, 空的数据不去传输,只传输有内容的数据,减小了服务器压力,

逐个判断

如果数据较少时,我们可以用单独判断,或者用逻辑或判断是否为空

单独判断:

if (!bookname) {

return alert('请输入完整信息!!!!!!!!')

}

几个数据用逻辑或判断

if (!bookname || !author || !publisher) {

return alert('请输入完整信息!!!!!!!!')

}

利用数组的some方法

💎但是当一个如果我们做了一个有几十个乃至上百个数据非空判断时,

逐个判断非空就效率过低了

💎此时我们可以把我们得到数据全部push进一个数组data,

利用数组的some方法实现非空判断,逻辑类似于逻辑或判断

MDN 官方详解 MDN 数组some方法

some() 方法测试数组中是不是至少有 1 个元素通过了被提供的函数测试。它返回的是一个 Boolean 类型的值。

代码如下:

data是存入需要判断的数据的数组

if(data.some(item => item === '')) return alert('请输入完整数据')

为什么要阻止默认事件(e.preventDefault())

拥有默认事件的对象:

1.html的a标签点击自动跳转

2.button(type=submit)按钮的提交行为，

3.input输入框默认的点击获取焦点等

有的时候我们不想要触发执行默认事件，

需要阻止元素的默认事件：e.preventDefault()

举个例子;

button(type=submit)按钮的提交行为,如果我们不阻止的话,

我们一点击网页就会自动跳转,并且表单内容清空,这样我们就,无法获取表单内容来,进行数组传输

所以需要阻止默认事件

  document.querySelector('button[type="submit"]')
    .addEventListener('click', function (e) {
      // 阻止传输数据默认事件,
        e.preventDefault()
        }

事件委托如何确定判断点击的对象是我们的预期对象

事件委托是,把子元素的事件触发,统一委托给子元素的父级元素的注册事件.

底层原理:事件冒泡
使用场景:
1.子元素过多,减少注册次数,和避免使用循环语句
2.如果子元素是后面添加的,那么这种情况下不能直接给子元素注册事件(因为还没有在html中无法选中),只能给父级元素注册

标签名判断

e是事件对象
e.target是触发事件的DOM元素对象
e.target.tagName是触发事件的DOM元素对象的标签名
e.target.tagName==='BUTTON'判断触发事件的DOM元素对象的标签是不是button对象,
注意要大写'BUTTON'

    document.querySelector('tbody').addEventListener('click', function (e) {
      // 触发事件的是删除按钮
      if (e.target.tagName==='BUTTON') {
      //代码块
      }
      }

类名判断

e是事件对象
e.target是触发事件的DOM元素对象
e.target.classList是触发事件的DOM元素对象的类名列表
e.target.classList.contains('btn')判断触发事件的DOM元素对象的类名列表是否包含btn,有则返回true,无则返回false

    document.querySelector('tbody').addEventListener('click', function (e) {
      // 触发事件的是删除按钮
      if (e.target.classList.contains('btn')) {
      //代码块
      }
      }

事件委托和自定属性(data-XXX)配合实现传递参数

在渲染页面时,记得给button按钮元素自定义属性data-id=''
用e.target.dataset.id获取id;实现点击按钮即可获得id,然后传递出去

// 🏆在渲染页面时,记得给button按钮元素自定义属性data-id=''
       document.querySelector('tbody').innerHTML = res.data.data.map(item => `<tr>
              <th scope="row">${item.id}</th>
              <td>${item.bookname}</td>
              <td>${item.author}</td>
              <td>${item.publisher}</td>
              <td>
                <button type="button" class="btn btn-link btn-sm" data-id='${item.id}'>
                  删除
                </button>
              </td>
            </tr>`).join('')

  //事件委托,点击删除触发事件
    document.querySelector('tbody').addEventListener('click', function (e) {
      // 触发事件的是删除按钮
      if (e.target.classList.contains('btn')) {
        //🏆 用e.target.dataset.id获取id;实现点击按钮即可获得id,然后传递出去
        let id = e.target.dataset.id
        // 请求数据
        // debugger
        axios({
          url: 'http://ajax-base-api-t.itheima.net/api/delbook',
          method: 'get',
           //🏆 用e.target.dataset.id获取id;实现点击按钮即可获得id,然后传递出去
          params: { id }
        }).then(res => {
          // 如果连接不成功则不在继续向下执行
          if (res.data.status != 200) {
            return alert(res.data.msg)
          }
          alert(res.data.msg)
          //成功回调
          // console.log(res)
          // 渲染界面
          getAllbooks()
        })
      }
    })

实现非空判断;为什么要阻止默认事件(e.preventDefault());事件委托如何确定判断点击的对象是我们的预期对象;