JS事件监听

事件监听

语法

元素对象.addventListener('事件类型'，要执行的函数)

• 事件监听三要素
  • 事件源
  • 事件类型
  • 事件调用的函数

元素对象.addventListener('事件类型'，要执行的函数)

    <script>
        // 数据数组
        const arr = ['马超', '黄忠', '赵云', '关羽', '张飞']
        let n
        let random
    

        // 获取元素
        const span = document.querySelector('div .qs')
        console.log(span);
        const start = document.querySelector('.start')
        const end = document.querySelector('.end')

        // 渲染内容
        function runs(){
            n = setInterval(function () {
                // 随机函数
                function getRandom(m,n) {
                    return Math.floor(Math.random()*(n-m+1)+m)  
                }
                random = getRandom (0,arr.length-1)    
                span.innerHTML = arr[random]
            },100)

            if(arr.length == 1) {
                start.disabled=true
                end.disabled=true
            }
        }
        function rune() {
            clearInterval(n)
            arr.splice(random,1)
        }
        start.addEventListener('click',runs)
        end.addEventListener('click',rune)

数组中删除元素

arr.splice(random,1)

按钮禁用

start.disabled=true

事件类型

• 鼠标事件

  • click 鼠标点击
  • mouseenter 鼠标经过
  • mouseleave 鼠标离开

• 焦点事件

  • focus 获得焦点
  • blur 失去焦点

    <input type="text">
        <script>
                const input = document.querySelector('input');
                input.addEventListener('focus',function () {
                        alert('被触发了')
                })
        </script>
    

• 键盘触发

  • keydown 键盘按下触发
  • keyup 键盘抬起触发

• 文本事件

  • input 用户输入事件

事件对象

事件对象存储了事件触发时的相关信息

属性选择器

const input = document.querySelector('[type="search"]');

关闭效果

list.style.display = 'none';

focus选择器

    input {
        width: 100px;
        transition: .3s;
    }
    input:focus{
      width: 300px;
     }

trim方法

去除前后空格

input.value.trim()!