Javascript中的事件

1.什么是事件?

事件是在编程时系统内发生的动作或者发生的事情,比如用户在网页上单击一个按钮

2.什么是事件的监听?

就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为注册事件

语法书写:

元素.addEventListener('事件类型',执行函数)

   <script>
  //获取事件源
        let btn = document.querySelector('.btn1')
        //注册事件
        btn.addEventListener('click',function () {
            alert('恭喜你点击按钮')
        });
       
       //1.注意事项 事件类型需要加''
       //2.函数是点击之后再去执行，每次点击都会执行一次

   </script>

事件监听的三要素

1.事件源：那个dom元素被事件触发了，要获取dom元素

2.事件：用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等

3.事件调用的函数：要实现什么功能业务

3.用事件监听做的随机点名案例

需求:

点击第一个按钮,页面随机出现名字

点击第二按钮,页面没有名字生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>我是谁?
    </h1>

    <button class="btn1">开始随机点名了</button>

    <button class="btn2">停止点名了</button>

    <script>

        let arr =['赵云','马超','曹操','小白','炮灰','黄忠']

        let btn1 = document.querySelector('.btn1')

        let h1 = document.querySelector('h1')

        let btn2 = document.querySelector('.btn2')

        //第一个按钮事件
        btn1.addEventListener('click',function () {
           
            let name = arr[parseInt(Math.random()*arr.length)]
            h1.innerHTML=`${name}`
        })

        btn2.addEventListener('click',function () {
            h1.innerHTML=`不要选我啊`
        })

    </script>
</body>
</html>

4.常见的一些鼠标事件类型

1.click 鼠标点击左键触发

2.mouseover 鼠标经过触发

3.mouseout 鼠标离开触发

4.focusr 获得鼠标焦点触发

5.blur 失去鼠标焦点触发

6.mousemove 鼠标移动触发

7.mouseup 键盘弹起触发

8.mousedown 键盘按下触发

5.编程思想中的排他思想

1.目地

让当前元素为A状态,其他元素为B状态

2.使用步骤

1.遍历所有的对象

for 循环让所有元素设置一样的样式

2.单独给自己设置另一种样式

通过this或者下标找到自己或者对应的元素

6.使用排他思想做的案例

需求:

点击一个li标签,li标签颜色变成红色,每次点击li仅有当前li显示红色颜色,其他字体不显示红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        ul {
            list-style: none;
        }


    </style>
</head>
<body>
    <ul>
        <li>我是1号</li>
        <li>我是2号</li>
        <li>我是3号</li>
        <li>我是4号</li>
        <li>我是5号</li>
    </ul>

    <script>
        //获取事件源
    let li = document.querySelectorAll('li')
        //遍历每个对象都注册事件
        for (let i = 0; i < li.length; i++) {
           li[i].addEventListener('click',function () {

            //除去所有对象的颜色属性
                for (let i = 0; i < li.length; i++) {
                    li[i].style.color=''
                }
                //单独给自本身添加属性
                this.style.color='red'
               
           })
        }
    

    </script>
</body>
</html>