js表单事件

鼠标双击：ondblclick():

<h1>点我一下</h1>
<script>
    let h1= document.querySelector('h1');
    h1.ondblclick = function(){
        alert('我双击出现了');//双击后弹出
    }
</script>

鼠标移动onmousemove():

再指定区域移动就会触发事件

<h1>点我一下</h1>
<script>
    let h1= document.querySelector('h1');
    h1.onmousemove = function(){
        console.log("我移动了");
    }
</script>

1.addEventListener()事件监听

点击后会分别三段都会执行不会被覆盖：

<button>点我</button>
<script>
    /* 事件监听 */
    let btn = document.querySelector('button');
    window.addEventListener('click',function(){
        alert(1)
    })
    window.addEventListener('click',function(){
        alert(2)
    })
    window.addEventListener('click',function(){
        alert(3)
    })
</script>

2. 冒泡事件

如下代码

 <style>
    .div1{width: 100px;height: 100px;background-color: black;}
    .div2{width: 30px;height: 30px;background-color: blue;}
</style>
<div class="div1" >
    <div class="div2" ></div>
</div>
<script>
    let div1 = document.querySelector('.div1');
    let div2 = document.querySelector('.div2');
    div1.onclick = function(){
        alert(1)
    }
    div2.onclick = function(){
        alert(2)
    }
</script>

当点击div2的时候会先弹出2，随后会继续弹出1，这就是冒泡

3.捕获事件

捕获事件就是与冒泡事件相反，先点击div2 会先弹出1 再弹出21：

<script>
    let div1 = document.querySelector('.div1');
    let div2 = document.querySelector('.div2');
    div1.addEventListener('click',function(e){
        alert(1);
    },true)//这里写true表示捕获事件 false表示冒泡事件
    div2.addEventListener('click',function(e){
        e.cancelBubble = true;
        alert(2);
    },true)
</script>

4. e.stopPropagation(); 阻止冒泡

function(e) 里面中的e是默认的，为div2加上e.stopPropagation();就可以阻止冒泡，代码如下：

  <style>
    .div1{width: 100px;height: 100px;background-color: black;}
    .div2{width: 30px;height: 30px;background-color: blue;}
</style>
<div class="div1" >
    <div class="div2" ></div>
</div>
<script>
    let div1 = document.querySelector('.div1');
    let div2 = document.querySelector('.div2');
    div1.onclick = function(){
        alert(1)
    }
    div2.onclick = function(e){
        e.stopPropagation();
        alert(2)
    }
</script>   

5. e.cancelBubble 阻止冒泡

或者可以用addEventListener()：和e.cancelBubble = true;

  <script>
    let div1 = document.querySelector('.div1');
    let div2 = document.querySelector('.div2');
    /* div1.onclick = function(){
        alert(1)
    }
    div2.onclick = function(e){
        e.stopPropagation();
        alert(2)
    } */
    div1.addEventListener('click',function(){
        alert(1);
    },false)//这里的false表示事件冒泡 如果改为true就是捕获事件
    div2.addEventListener('click',function(){
        e.cancelBubble = true;
        alert(2);
    },false)
</script>

1.获取焦点.onfocus

主要用于表单：鼠标点击后获得焦点实现功能

<form action="" method="get">
    <p>
        用户名：<input type="text" name="" id="" id="user">
    </p>
    <input type="submit" name="" id="">
    <input type="reset" >
</form>
<script>
    let user =document.getElementById('user');
    user.onfocus = function(){
        user.style.background = 'red'; //获得焦点后text背景色变成红色
    }
</script>

2.失去焦点 鼠标光标离开后称为，失去焦点

   <form action="" method="get">
    <p>
        用户名：<input type="text" name="" id="user" >
    </p>
    <input type="submit" name="" id="">
    <input type="reset" >
    </form>
    <script>
    let user =document.getElementById('user');
    user.onfocus = function(){
        user.style.backgroundColor = 'red';
    }
    user.onblur = function(){
        user.style.backgroundColor = '#fff'; //失去焦点后背景色变成白色
    }
    </script>
    

3. onchange 用户改变域的内容

 <select name="" id="car" onchange="changefn()">
    <option value="奔驰">奔驰</option>
    <option value="宝马">宝马</option>
    <option value="雪佛兰">雪佛兰</option>
</select>
<input type="submit">
<input type="reset">
<script>
    let car = document.getElementById('car')
  function  changefn(){
      alert(car.value)
  }
</script>

4.onreset 表单重置时触发

1.表单重置事件不支持input标签，支持form标签
2.使用这个事件出来默认的可以清除表单外

5.onsubmit 表单提交事件

与重置事件使用的方式一样

练习

写一个表单，有用户名和密码 输入框获得焦点的时候框内的文字颜色变红, 输入框失去焦点的时候 框内文字颜色变黑, 选择宽选择男女 默认男, 修改的时候触发 alert出你选的性别, 提交 alert出我提交了, reset alert我重置了.

答案如下：

<form action="" method="get" id="fff">
    <p>
        用户名：<input type="text" id="text">
    </p>
    <p>
        密码： <input type="password" id="pwd">
    </p>
    性别：<select name="" id="xz">
        <option value="男">男</option>
        <option value="女">女</option>
    </select>
    <p><input type="submit"> <input type="reset" name="" ></p>
</form>
<script>
    let text = document.querySelector('#text');
    let pwd = document.querySelector('#pwd');
    let xz = document.querySelector('#xz');
    let ff = document.querySelector('#fff');
    text.onfocus = function(){
        this.style.color = 'red';
    }
    text.onblur = function(){
        this.style.color = '#000';
    }
    xz.onchange = function(){
        alert(this.value);
    }
    ff.onsubmit = function(){
        alert('我提交了');
    }
    ff.onreset = function(){
        alert('我重置了')
    }
</script>