JavaScript基础知识------DOM(二)

一、事件

事件源（触发事件的元素）

事件类型

事件处理器------需要执行代码函数

案例展示

html结构

<h1>Hello World!!!</h1>

let h1=document.querySelector('h1');

1.DOM属性——>只能部署一次

DOM属性：h1.οnclick=fn

标签属性：<h1 οnclick='fn()'></h1>

 // 事件绑定不能加括号
       h1.onclick = log(); // 等同于 h1.onclick = undefined
       h1.onclick = log;
       h1.onclick = null; // 清除事件

       function log(_this) {
         console.log(123, _this);
       }

2.事件侦听器——>可以部署多次 

addEventListener()

removeEventListener()

h1.addEventListener("click", clickHandel);
      h1.addEventListener("click", function () {
        console.log(263);
      });

       function clickHandel(e) { 
       // e,evt,event -> 事件对象
         console.log(111,e.target);
       }

       h1.removeEventListener("click", clickHandel);

事件对象：在开发者实现某些操作时，需要浏览器在触发事件时提供一下必要的信息使用，浏览器将这些信息放入一个对象，作为事件处理器的第一个参数传入，即事件对象

--修饰键

--位置

--触发元素信息

事件侦听器可以有第三个参数（可选）——boolean  {}(配置对象)

 document.body.addEventListener(
        "click",
        function () {
          console.log("body");
        },
        false
      );

      h1.addEventListener(
        "click",
        function () {
          console.log("h1");
        },
        { capture: true }
      );

事件处理器的 this 指向：指向绑定事件的元素

//<h1 onclick="log(this)">hello world!</h1>

 function log(_this) {
         console.log(123, _this);
       }

2.事件流：事件传播

--事件冒泡流：由内向外传播（浏览器默认部署事件处理）

--事件捕获流：由外向内传播

中断事件继续向上传播

e.stopPropagation()

中断事件传播（只执行自己本身）

e.stopImmediatePropagation()

html结构

<div class='item'>

<p>商品删除</p>

<button>删除</button>

</div>

      // 冒泡的问题
      let itemEl = document.querySelector('.item');
      let delBtn = document.querySelector('button')

      //父级盒子
      itemEl.onclick = function(){
        location.href = 'http://www.baidu.com'
      }

      delBtn.onclick = function(e){
        // 中断事件的继续传播
        e.stopPropagation();

        // 中断事件的传播
        e.stopImmediatePropagation();

        this.parentElement.remove()
      }

事件委托/事件代理：如果页面中存在相同的元素部署着相同的操作，为节约资源的销毁，可以将原本元素上的事件处理移除，统一部署到父级元素，在父级元素触发事件时判断是否是子级元素触发。

---

三、常用事件

1.UI事件  接口表示简单的用户界面事件

——鼠标事件

--单击  click

--双击  dblclick

--右键  contextmenu

--移入  mouseover  mouseenter

--移出  mouseout  mouseleave

--移动  mousemove

--滚轮  wheel

over out 在移入不同子元素时会触发

enter leave 在移入不同子元素时不会触发（只在父级触发）不适合事件委托。

let box = document.querySelector(".box");
      // box.addEventListener('mouseover', function(){
      //   console.log('mouseover');
      // })
      // box.addEventListener('mouseout', function(){
      //   console.log('mouseout');
      // })

      box.addEventListener("mousedown", function () {
        console.log("mouseenter");
      });
      box.addEventListener("mouseleave", function () {
        console.log("mouseleave");
      });

事件对象

- target

- 坐标

  - clientX clientY  鼠标距离视口的位置

  - offsetX offsetY  鼠标指针相对于目标结点内边位置

  -pageX pageY  鼠标真正相对于整个文档的位置（比如页面长过视口高度出现滚动条）

浏览器默认行为

- 文字选择   鼠标按下

- 右键菜单 右键

如何阻止默认行为

- dom 属性：return false

-通用：e.preventDefault()

  document.onmousedown = function(){
         return false;
       }

      document.addEventListener('mousedown',function(e){
         e.preventDefault();
       })

触屏事件：touch

  - 开始触发  touchstart  相当于mousedown

  - 移动  touchmove

  - 结束触屏  touchend  相当于mouseup

  - 意外结束  touchcancel

  事件对象

      - touches

      - targetTouches

click事件延迟300ms  目的是为了判断触屏时的双击事件

 box.addEventListener("touchstart", function (e) {
        console.log("touchstart", e);
      });

      box.addEventListener('click', function(){
        console.log('click');
      })

//click事件延迟300ms  目的是为了判断触屏时的双击事件

指针事件

- pointerdown

- pointerup

- pointermove

- pointerout

- pointerenter

- pointerleave

- pointercancel

 box.addEventListener("pointermove", function (e) {
        console.log("pointermove", e);
      });

指针捕捉允许将某一指针事件，重新指向到一个特定元素，而非经由针对其位置进行命中检测所确定的目标元素。指针捕捉可以用来保证某一元素持续接收到指针事件。（鼠标移动过快不在目标范围内，重新设置后，鼠标根据浏览器屏幕而定）

键盘事件

  - 按下  keydown

  - 松开  keyup

  事件对象：

        - key  键值

        - code  键值位

        - 修饰键 

          - ctrlKey

          - altKey (mac->option)

          - metaKey(win->win mac->command)

 // 快捷键
      document.addEventListener("keydown", (e) => {
       console.log(e.key,e.code,e.keyCode);

        // e.preventDefault();

       if(e.code == 'KeyA' && e.shiftKey && e.altKey){
          let h1 = document.createElement('h1');
          h1.textContent = '快速创建内容'
          document.body.append(h1)
        }
       });

表达相关：

  焦点事件

        - 聚焦  focus  focusin(要用事件侦听器才有作用)

        - 失焦  blur  focusout

  输入事件

        - input

        - change(当输入框发生内容改变时触发)

        - copy

        - cut

        - paste

//html结构 
 //<form action="1.php" onsubmit="return false">
      //<input type="text" name="abc" />
      //<input type="text" name="abc" />
      //<input type="text" name="abc" />
      //<button>focus</button>
  //</form>


//script代码
 let input = document.querySelector("input");
      input.onchange = function () {
        console.log("change");
      };
      input.oninput = function () {
        console.log("input");
      };

      document.querySelector("button").onclick = function () {
        let focusEvent = new Event("focus");
        input.dispatchEvent(focusEvent);
      };

   

   表单

        - submit

        - reset

   自定义事件

    let focusEvent = new Event("focus");

    input.dispatchEvent(focusEvent);

    其他事件

      - load 资源加载成功

      - error 资源加载失败

      - DOMContentLoaded

      - beforeunload

      - transitionend

      - animationend

 // <div class="box">
     // <h1>hello world</h1>
     // <h2>hello world</h2>
     // <h3>hello world</h3>
 // </div> 


 window.onload = function(){
        console.log(2,document.querySelector('.box'));
      }

      document.addEventListener('DOMContentLoaded',function(){
        console.log(1,document.querySelector('.box'));
      })