第三章 浏览器 【5. 事件】

5.  事件

1.1 事件三要素
  • 事件源:触发事件的元素

  • 事件类型:事件的种类(如click、mouseover等)

  • 事件处理程序:响应事件的函数

1.2 事件流机制

事件传播分为三个阶段:

  1. 捕获阶段:事件从顶层开始,经过所有祖先节点,直至触发目标节点

  2. 目标阶段:事件到达目标节点并触发

  3. 冒泡阶段:事件从目标节点开始,经过所有祖先节点,直至顶层Window对象

5.1  添加、移除事件

方法1(最不推荐的写法)
  <button onclick="alert('Hi')">按钮1</button>

方法2(添加)
  <button class="btn">按钮2</button>
  <script>
    //添加(方法2)
    document.querySelector('.btn').onclick = function () {
      alert('Hello')
    }
    //添加第二个[使用onclick只能添加一个程序]
    document.querySelector('.btn').onclick = function () {
      alert('Hello22222')
    }
    // 移除
    // document.querySelector('.btn').onclick = null
  </script>

方法3(最推荐的语法结构)
<button class="btn3">按钮3</button>
  <script>
    //方法3(最推荐的语法结构)
    // document.querySelector('.btn3').addEventListener(事件类型,事件执行程序)
    document.querySelector('.btn3').addEventListener('click', function () {
      console.log(123);
    })

    // 处理程序
    function btn3Fn() {
      console.log('第二个函数');
    }
    // addEventListener 可以添加多个程序
    document.querySelector('.btn3').addEventListener('click', btn3Fn)

    //也可以移除,指定移除哪一个程序
    document.querySelector('.btn3').removeEventListener('click', btn3Fn)
  </script>

5.2  事件类型

1.   鼠标事件
  • click - 单击

  • dblclick - 双击

document.ondblclick = function () {
      console.log('双击');
    }
  • contextmenu - 右键菜单

  document.oncontextmenu = function (event) {
      console.log('右键');
      document.querySelector('.right').style.display = 'block'
      //事件原本的功能,取消【阻止默认行为】
      event.preventDefault()
    }
  • mouseover/mouseout - 鼠标移入/移出(会冒泡)

 document.querySelector('.box').onmouseover = function () {
      console.log('over鼠标滑上去');
    }
    document.querySelector('.box').onmouseout = function () {
      console.log('out鼠标划走');
    }
  • mouseenter/mouseleave - 鼠标进入/离开(不冒泡)

document.querySelector('.box').onmouseenter = function () {
      console.log('enter鼠标滑进去');
    }
    document.querySelector('.box').onmouseleave = function () {
      console.log('leave鼠标离开');
    }
  • mousedown/mouseup - 鼠标按下/释放

document.onmousedown = function () {
      console.log('down点下鼠标');
    }
    document.onmouseup = function () { console.log('up松开鼠标'); }
  • mousemove - 鼠标移动

document.onmousemove = function () {
      console.log("move鼠标移动");
    }

重要区别mouseenter/mouseleave 不会冒泡,不受子元素影响;mouseover/mouseout 会冒泡,受子元素影响。


2.  键盘事件
  • keydown - 键盘按下

    // • keydown - 键盘按下
        document.onkeydown = function () {
            console.log('down');
    }
  • keyup - 键盘弹起

        // • keyup - 键盘弹起
        document.onkeyup = function () {
            console.log('keyup');
        }
  • keypress - 按到有效字符

        // keypress - 按到有效字符
        document.onkeypress = function (e) {//函数有个参数代表事件的对象 
            // console.log("press");
            console.log(e.key);
            console.log(e.keyCode);
        }

3.  表单事件
 <!-- 表单 -->
    <form id="form" action="https://www.baidu.com/">
        用户名:<input type="text" name="n"><br>
        密码:<input type="password" name="p"><br>
        <span class="tip" hidden>请输入密码</span><br>
        <span class="err" hidden>密码不正确</span><br>

        <button id="btn" type="submit">按钮</button>
    </form>
  • submit - 表单提交

        // submit 提交
        form.onsubmit = function (e) {
            e.preventDefault();//阻止提交
        }
  • focus/blur - 获得/失去焦点

        // 获取焦点,失去焦点 focus/blur
        document.querySelectorAll('input')[1].onfocus = function () {
            document.querySelector('.tip').hidden = false
            document.querySelector('.err').hidden = true
        }
        document.querySelectorAll('input')[1].onblur = function () {
            document.querySelector('.tip').hidden = true
            document.querySelector('.err').hidden = false
        }
  • change - 值发生改变

        // change 当值发生改变的时候触发
        document.querySelectorAll('input')[1].onchange = function () { 
            console.log('变了。');
        }
  • input - 输入事件

        // 输入
        document.querySelectorAll('input')[0].oninput = function () {
            console.log('输入');
        }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值