js进阶--DOM事件10

外婆桥卖汤
403 阅读4分钟

事件

DOM0级事件

鼠标
  1. onclick单击
  2. ondblclick双击
  3. onmouseover鼠标划过
  4. onmouseout鼠标划出
  5. onmouseenter鼠标移入(没有冒泡)
  6. onmouseleave鼠标移出(没有冒泡)
  7. onmousewheel滚轮
  8. onmousedown鼠标按下
  9. onmouseup鼠标抬起
  10. onmousemove鼠标移动
键盘事件
  1. onkeydown键盘按下
  2. onkeyup键盘抬起
  3. onkeypress键盘按压，压着(再onkeydown后执行)

当光标在绑定元素的范围内，那么键盘事件才会有反应 能绑定键盘事件的有:window input textarea document.body 基本上这几个，绑定其他的不起作用，如div

如果想让其他的也可以绑定键盘事件，那就给哪个元素添加一个contenteditable="true"

注意：如果添加了这个属性和属性名，那么我就可以更改或删除文字

<div id="box" contenteditable="true">哈哈哈</div>
   box.onkeydown=function(){
       console.log("键盘按下")
   }
键盘按下，获取上一次的值，键盘抬起获取最新的值，键盘按下去了也是上一次的值，且再按下后面执行
   inp.onkeydown=function(){
       console.log("键盘按下",this.value)
   }
   inp.onkeyup=function(){
       console.log("键盘抬起",this.value)
   }
      inp.onkeypress=function(){
       console.log("按下去了",this.value)
   }
获取按下的键

函数的形参是当前事件的事件对象，只有键盘事件上的事件对象里才会有keyCode这些属性，分别代表了当前点击的键的一些标识

    document.body.onkeyup=function(e){
        console.log(e)
        //KeyboardEvent {isTrusted: true, key: "ArrowUp", code: "ArrowUp", location: 0, ctrlKey: false, …}
        }
当用户通过键盘或鼠标去触发一些对应的事件的时候，浏览器会把当前事件的一些信息以实参的形式传递给当前的方法
 box.onclick = function (a) {
        //当用户通过键盘或鼠标去触发一些对应的事件的时候，浏览器会把当前事件的一些信息以实参的形式传递给当前的方法
        console.log(a.offsetX)
        /* 
        clientX 当前鼠标点击的位置距离浏览器(一屏幕)左侧的长度
        clientY 当前鼠标点击的位置距离浏览器(一屏幕)上侧的长度

        offsetX当前盒子点击的位置距离当前的盒子的最左侧内边框的长度,左边border的不算(点进去就是-的)，右边的算
        offsetY当前盒子点击的位置距离当前的盒子的最上侧内边框的长度,上边border的不算(点进去就是-的)，下边的算

        pageX 当前鼠标点击的位置距离body的最左侧的位置
        pageY 当前鼠标点击的位置距离body的最上侧的位置

        target目标源，点击的dom元素

        type:事件类型,如click


        冒泡机制
        当大盒子里有个小盒子，两个都绑定点击事件，点击小盒子的时候，两个盒子的事件都触发，如果点击大盒子，那小盒子不触发
        想关闭这种机制就添加个cancelBubble=true或e.stopPropagation();

        阻止事件传播
        意思是阻止默认的事件；
        如:当我们点击a标签时，想让他只执行我们的东西，但不跳转
        e.retrunValue=false或return false

        */
    }
冒泡机制

当大盒子里有个小盒子，两个都绑定点击事件，点击小盒子的时候，两个盒子的事件都触发，如果点击大盒子，那小盒子不触发

<body>
    <div id="a1">
        <div id="a2">
            <div id="a3"></div>
        </div>
    </div>
</body>

    a1.onclick=function(e){
        console.log("a1",e.target);
    }
    a2.onclick=function(e){
        console.log("a2",e.target);
    }
    a3.onclick=function(e){
        // e.cancelBubble=true;
        console.log("a3",e.target);
    }
    //点谁e.target是谁
    //从内向外冒泡


	    function fn1(e){
        console.log(1);
    }

    function fn2(e){
        console.log(2);
    }

    function fn3(e){
        console.log(3);
    }
   a1.addEventListener("click",fn1,true)
   a2.addEventListener("click",fn2,true)
   a3.addEventListener("click",fn3,true)
   //DOM2级为true时候123，为false时321
   //DOM2级第三个参为true时，就是捕获，给捕获阶段绑定方法，从外向内查找，找到目标源，然后由内而外执行冒泡
   //DOM0级事件是冒泡阶段，从内部向外冒泡

想关闭冒泡机制就添加个e.cancelBubble=true或e.stopPropagation();

DOM2级第三个参为true时，就是捕获，给捕获阶段绑定方法，从外向内查找，找到目标源然后停止捕获到目标阶段，执行目标源身上的方法(绑定的时候，先绑定哪个就先执行哪个)，然后由内而外执行冒泡
DOM0级是冒泡阶段的方法
阻止事件传播

意思是阻止默认的事件； 如:当我们点击a标签时，想让他只执行我们的东西，但不跳转 e.retrunValue=false或return false或PreventDefault()

    window.oncontextmenu = function (e) {
        e.returnValue = false;//鼠标右键就不出小框了
    }

DOM2级事件

  1. 绑定事件ele.addEvententListener("事件",函数);
  2. 清除事件ele.removeEventListener("事件",函数);

DOM2级事件可以绑定多个函数 当绑定的函数重复时，会覆盖上一个名字相同的函数 清除函数时，名字与事件要与设置的保持一致,如果有第三个参数的话，第三个值也要一致

    box.addEventListener("click",fn)//设置事件
    box.removeEventListener("click",fn);//卸载事件的方法的时候给removeEventListener传递的参数要和绑定的时候严格一致
avatar
文章
阅读
粉丝