JavaScript 内容总结(DOM和BOM)(二)DOM事件高级

程序员文章站 2024-03-20 10:28:52

...

JavaScript 内容总结（JavaScript高级程序设计）

注册事件
删除事件
DOM事件流
事件对象
阻止事件冒泡
事件委托
常用的鼠标事件
常用的键盘事件

1.注册事件（绑定事件）

传统方式注册
1. 利用on开头的事件onclick
2. 特点：注册事件的唯一性
3. 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

方法监听注册：evenTarget.addEventListener(type,listener,useCapture)

同一个元素同一个事件可以注册多个监听器
按注册顺序依次执行
type：事件类型字符串，比如 click、mouseover，注意这里不要带on
listener：事件处理函数，事件发生时，会调用该监听函数
useCapture：可选参数，是一个布尔值，默认是false。学完DOM事件流后，我们在进一步学习（涉及事件捕获和事件冒泡）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>事件先后执行问题</title>
</head>

<body>
  <div id="div">
    <button id="btn4">事件先后执行问题</button>
  </div>
  <script>
    var btn4 = document.getElementById("btn4");
    var div = document.getElementById("div");
    var body = document.body;
    body.addEventListener("click", hello4);
    div.addEventListener("click", hello3, true);//含有第三个参数
    btn4.addEventListener("click", hello2, true);//绑定第三个参数是true还是false
    btn4.addEventListener("click", hello1);//取决于事件在捕获阶段执行还是在冒泡阶段执行
    function hello1() {//调用
      alert("hello 1");
    }
    function hello3() {//调用
      alert("hello 3");
    }
    function hello2() {
      alert("hello 2");
    }
    function hello4() {
      alert("hello 4");
    }
 // hello3->hello2->hello1->hello4
//一个按钮绑定两个事件先绑定先执行
//存在冒泡风险的事件则遵循以下原则
  //          事件捕获（为提前拦截事件做准备 true）->
  //          到达目标->
  //          事件冒泡（最迟事件执行阶段 false）
  </script>
</body>
</html>

2.删除事件（解绑事件）

evenTarget.removeEventListener(type,listener,useCapture)

3.DOM事件流

JavaScript 内容总结(DOM和BOM)(二)DOM事件高级

//一个按钮绑定两个事件先绑定先执行
//存在冒泡风险的事件则遵循以下原则
// 事件捕获（为提前拦截事件做准备 true）->
// 到达目标->
// 事件冒泡（最迟事件执行阶段 false）

4.事件对象

function(event){}
1. event 就是一个事件对象，写到我们侦听函数里的小括号里面当形参来看
2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
3. 事件对象是我们事件的一系列相关数据的集合跟事件相关的比如鼠标点击里面就包含了鼠标的相关信息，键盘点击里面就包含了键盘的相关信息
4. 这个事件对象我们可以自己命名比如 event、evt、e
5. 事件对象也有兼容性问题 ie678 通过 window.event

JavaScript 内容总结(DOM和BOM)(二)DOM事件高级

e.target 和 this 的区别（在事件委托中区别明显）

e.target 返回的是触发事件的对象（元素）

this 返回的是绑定的事件的对象（元素）

5.阻止事件冒泡

.stopPropagation() 停止传播

6.事件委托

原理：利用事件冒泡（从最深的节点开始，然后逐步向上传播事件）只在他们的父元素上指定一个事件处理程序，就可以管理某一类型的的所有事件。

7.常用的鼠标事件

JavaScript 内容总结(DOM和BOM)(二)DOM事件高级

禁止鼠标右键菜单

doument.addEventListener('contextmenu',function(e){
   e.preventDefault();
})

禁止选中文字

doument.addEventListener('selectstart',function(e){
   e.preventDefault();
})

鼠标事件对象：MouseEvent

案例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>鼠标跟随天使</title>
  <style>
    img {
      position: absolute;
      display: none;
    }
  </style>
</head>

<body>
  <img src="godgird.jpg" alt="">
  <script>
    var img = document.querySelector('img');
    document.addEventListener('mouseover', function () {
      img.style.display = 'block';
    });
    document.addEventListener('mouseout', function () {
      img.style.display = 'none';
    });
    document.addEventListener('mousemove', function (e) {
      img.style.left = (e.clientX - img.width / 2) + 'px';
      img.style.top = (e.clientY - img.height / 2) + 'px';
    });
  </script>
</body>

</html>

8.常用的键盘事件

JavaScript 内容总结(DOM和BOM)(二)DOM事件高级

keydown -》keypress -》keyup

键盘事件对象：KeyCode
1. 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
2. 我们的keydown、keyup事件不区分大小写 a和A得到的都是65
3. 我们的keypress 事件区分字母大小写

案例:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>按下s键 光标自动定进输入框内</title>

</head>

<body>
  <input type="text">
  <script>
    var input = document.querySelector('input');
    document.addEventListener('keyup', function (e) {
      if (e.keyCode == 83) {
        input.focus();
      }
    });
  </script>
</body>

</html>

模仿京东查询快递单号：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>按下s键 光标自动定进输入框内</title>
  <style>
    .text {
      position: absolute;
      left: 75px;
      top: 41px;
      width: 181px;
      height: 31px;
      font-size: 20px;
      background-color: #e4e4e4;
    }

    .sanjiao {
      position: absolute;
      left: 100px;
      top: 31px;
      width: 0;
      height: 0;
      line-height: 0;
      font-size: 0;
      border-color: #fff #fff #e4e4e4 #fff;
      border-style: solid;
      border-width: 5px 5px 5px 5px;
    }

    .tishi {
      display: none;
    }
  </style>
</head>

<body>
  <div class="tishi">
    <div class="text">
    </div>
    <div class="sanjiao"></div>
  </div>
  快递单号：<input type="text">
  <script>
    var input = document.querySelector('input');
    var text = document.querySelector('.text')
    var tishi = document.querySelector('.tishi')
    input.addEventListener('keyup', function () {
      tishi.style.display = 'block'
      text.innerHTML = this.value;
      if (this.value == '') {
        tishi.style.display = 'none'
      }
    });
    input.addEventListener('focus', function () {
      if (this.value != '') {
        tishi.style.display = 'block'
      }
    });
    input.addEventListener('blur', function () {
      tishi.style.display = 'none'
    });
  </script>
</body>

</html>

JavaScript 内容总结(DOM和BOM)(二)DOM事件高级