2021-06-30

最新推荐文章于 2022-03-11 10:31:19 发布

buty_nice

最新推荐文章于 2022-03-11 10:31:19 发布

阅读量79

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/buty_nice/article/details/118367993

版权

笔记专栏收录该内容

32 篇文章 0 订阅

订阅专栏

事件对象

事件对象：
存储了一些事件发生时的信息。
arguments保存了我们函数执行时传入的参数.跟形参没关系，跟实参有关系。
事件函数在触发时，会自动传入一个参数，这个参数就是事件对象。

标准浏览器：主流的chrome 火狐等，IE8及以上
在事件处理函数中，定义一个形参接受。
IE低版本浏览器（5-7）中：
在事件处理函数中，不需要形参接受，而是用window.event;

键盘事件对象

主要用于判断我们按下的是哪个键。
key属性：按下的是哪一个键
keycode：按下的是哪一个键，以编码的格式。

 <script>
    document.onkeydown = function(event){
      event = event || window.event;
      // console.log(event.key);
      // console.log(event.keyCode);
      console.log(event.shiftKey);
    }
  </script>

组合键：

  ctrl:ctrlKey 
  alt： altKey
  shift:shiftKey
  meta ：在window下，win键   在mac command  metaKey
  以上四个值都是布尔值

鼠标事件对象

    button 属性：表示我们按下的是哪个键
    0 左键  1 滚轮  2右键

<script>
 var btn = document.getElementById("btn")
    btn.onmousedown = function(event){
      //在IE低版本下，event是undefined，转布尔值就是false。 逻辑或（||）第一个值转布尔值如果为false，直接将第二个值返回。
      var e = event || window.event;
      console.log(e.button);
    }
    </script>

获取鼠标的位置

      pageX pageY  参考点：页面的左上角
      clientX  clientY  参考点：视口的左上角
      screenX  screenY  参考点：屏幕的左上角

 <script>
 document.body.onclick = function(event){
     event = event || window.event;
    //  console.log(event.pageX);
    //  console.log(event.pageY);
    // console.log(event.clientX,event.clientY);
    console.log(event.screenX,event.screenY);
   }
  </script>

事件冒泡

**事件传播机制：冒泡  捕获**
冒泡：是从当前触发事件的元素上，一级一级向上触发，到document结束。
捕获：从document开始，一级一级向下触发，知道当前触发事件的元素上。
传播机制：必须是同一类型的事件才可以传播。

阻止事件冒泡:
当外层元素和内层元素拥有同一类型的事件时，当内层元素的事件触发时，也会让外层元素的事件触发，为了阻止外层元素的事件触发， 可以在内层元素的事件        处理函数中，通过事件    对象event 调用stopPropagation()

<body>
  <div id="gf">
    <div id="father">
      <div id="son"></div>
    </div>
  </div>
  <script>
    var gf = document.getElementById("gf");
    var father = document.getElementById("father");
    var son = document.getElementById("son");
    gf.onclick = function(){
      alert("爷爷")
    }
    father.onclick = function(){
      alert("爸爸")
    }
    son.onclick = function(event){
      event = event || window.event;
      event.stopPropagation();
      alert("儿子");
    }
    // gf.addEventListener("click",function(){
    //   alert("爷爷")
    // },true)
    // father.addEventListener("keydown",function(){
    //   alert("爸爸")
    // },true)
    // son.addEventListener("click",function(){
    //   alert("儿子")
    // },true)
  </script>

浏览器默认行为

在页面中，有一些特殊的标签，比如a标签，form表单。
它们默认有一些自己的事件。
a标签：跳转
form表单：提交

阻止浏览器的默认行为：
  1.事件函数中直接返回fasle  return false；
  2.event.preventDefault();

<body>
    <a href="http://www.baidu.com">百度一下</a>
    <form>
        名字：<input type="text" name="title">
        <button>点击一下</button>
    </form>
    <script>
        //  var _a = document.querySelector("a")
        //  _a.onclick = function(){
        //    alert("跳转到百度页面。")
        //  }
        var title = document.querySelector("input");
        var _form = document.querySelector("form");
        _form.onsubmit = function(event) {
            if (title.value.trim().length > 6) {
                alert("表单提交了");
            }
            // event.preventDefault();
            // return false;
        }
    </script>
</body>

事件委托

“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务
Exp:

<style>
    .checked{
      background-color: red;
    }
  </style>
  <body>
  <!--  事件委托 -->
   <button id="addBtn">新增</button>
  <ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
  </ul>
  <script>
    /**
     * 点击li标签，为它添加一个 checked 类名，将其背景色修改为red.
     * 
     * 点击新增按钮：在ul尾部添加一个li标签。
     */
    var lis = document.querySelectorAll("li");
    for(var i = 0; i<lis.length;i++){
      lis[i].onclick = function(){
        this.classList.add("checked");
      }
    }
    var addBtn = document.getElementById("addBtn");
    var _ul = document.querySelector("ul");
    addBtn.onclick = function(){
      var _li = document.createElement("li");
      _li.innerHTML = (document.querySelectorAll("li").length+1)*111;
      _li.onclick = function(){
        this.classList.add("checked");
      }
      _ul.appendChild(_li);
    }
  </script>
</body>

自定义右键点击菜单案例

  <style>
    ul{
      list-style: none;
      width: 250px;
      height: 200px;
      background-color: rgba(10,10,10);
      color: #fff;
      display: none;
      position: absolute;
      left: 0;
      top: 0;
    }
    li{
      height: 50px;
      line-height: 50px;
    }
  </style>
  <body>
  <!--  1.先阻止默认的右键菜单2.自定义菜单 -->
  <ul>
    <li>画布放大</li>
    <li>画布缩小</li>
    <li>重置</li>
    <li>定位</li>
  </ul>
  <script>
    var _ul = document.querySelector("ul");
    document.oncontextmenu = function(event){
      event.preventDefault();
      _ul.style.display = "block";
      _ul.style.left = event.pageX + "px"
      _ul.style.top = event.pageY + "px"
    }
    document.onclick = function(event){
      if (event.target.nodeName != "LI") {
        _ul.style.display = "none";
      }
    }
  </script>
</body>