Web前端学习笔记——JavaScript之事件详解

程序员文章站 2022-03-13 18:14:12

...

事件详解

注册/移除事件的三种方式

var box = document.getElementById('box');
box.onclick = function () {
  console.log('点击后执行');
};
box.onclick = null;

box.addEventListener('click', eventCode, false);
box.removeEventListener('click', eventCode, false);

box.attachEvent('onclick', eventCode);
box.detachEvent('onclick', eventCode);

function eventCode() {
  console.log('点击后执行');
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>

</head>
<body>
<input type="button" value="按钮" id="btn"/>
<script src="common.js"></script>
<script>



  /*
  *
  * 总结绑定事件的区别:
  * addEventListener();
  * attachEvent()
  *
  * 相同点: 都可以为元素绑定事件
  * 不同点:
  * 1.方法名不一样
  * 2.参数个数不一样addEventListener三个参数,attachEvent两个参数
  * 3.addEventListener 谷歌,火狐,IE11支持,IE8不支持
  *   attachEvent 谷歌火狐不支持,IE11不支持,IE8支持
  * 4.this不同,addEventListener 中的this是当前绑定事件的对象
  *   attachEvent中的this是window
  * 5.addEventListener中事件的类型(事件的名字)没有on
  *  attachEvent中的事件的类型(事件的名字)有on
  *
  *  现在遇到的逆境,都是以后成长的阶梯
  *
  *
  *
  *
  *
  *
  *
  *
  *
  * */


  //为按钮绑定多个点击事件

//  my$("btn").addEventListener("click",function () {
//    console.log(this);
//  },false);

//  my$("btn").attachEvent("onclick",function () {
//    console.log(this);
//  });







</script>
</body>
</html>

兼容代码

function addEventListener(element, type, fn) {
  if (element.addEventListener) {
    element.addEventListener(type, fn, false);
  } else if (element.attachEvent){
    element.attachEvent('on' + type,fn);
  } else {
    element['on'+type] = fn;
  }
}

function removeEventListener(element, type, fn) {
  if (element.removeEventListener) {
    element.removeEventListener(type, fn, false);
  } else if (element.detachEvent) {
    element.detachEvent('on' + type, fn);
  } else {
    element['on'+type] = null;
  }
}

事件的三个阶段

捕获阶段
当前目标阶段
冒泡阶段

事件对象.eventPhase属性可以查看事件触发时所处的阶段

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    #dv1 {
      width: 300px;
      height: 200px;
      background-color: red;
    }

    #dv2 {
      width: 250px;
      height: 150px;
      background-color: green;
    }

    #dv3 {
      width: 200px;
      height: 100px;
      background-color: blue;
    }
  </style>
  <script>

    //事件有三个阶段:
    /*
     *
     * 1.事件捕获阶段  :从外向内
     * 2.事件目标阶段  :最开始选择的那个
     * 3.事件冒泡阶段  : 从里向外
     *
     * 为元素绑定事件
     * addEventListener("没有on的事件类型",事件处理函数,控制事件阶段的)
     * 事件触发的过程中,可能会出现事件冒泡的效果,为了阻止事件冒泡--->
     * window.event.cancelBubble=true;谷歌,IE8支持,火狐不支持
     * window.event就是一个对象,是IE中的标准
     * e.stopPropagation();阻止事件冒泡---->谷歌和火狐支持
     * window.event和e都是事件参数对象,一个是IE的标准,一个是火狐的标准
     * 事件参数e在IE8的浏览器中是不存在,此时用window.event来代替
     * addEventListener中第三个参数是控制事件阶段的
     * 事件的阶段有三个:
     * 通过e.eventPhase这个属性可以知道当前的事件是什么阶段你的
     * 如果这个属性的值是:
     * 1---->捕获阶段
     * 2---->目标阶段
     * 3---->冒泡
     * 一般默认都是冒泡阶段,很少用捕获阶段
     * 冒泡阶段:从里向外
     * 捕获阶段:从外向内
     *
     *
     *
     *
     *
     *
     *
     * */
  </script>
</head>
<body>
<div id="dv1">
  <div id="dv2">
    <div id="dv3"></div>
  </div>
</div>
<script src="common.js"></script>
<script>
  //事件冒泡:是从里向外

  //同时注册点击事件
  var objs = [my$("dv3"), my$("dv2"), my$("dv1")];
  //遍历注册事件
  objs.forEach(function (ele) {
    //为每个元素绑定事件
    ele.addEventListener("click", function (e) {
      console.log(this.id+"====>"+e.eventPhase);

    }, true);

  });


  //该属性在事件参数对象中存在

</script>
</body>
</html>

事件对象的属性和方法

event.type 获取事件类型
clientX/clientY 所有浏览器都支持，窗口位置
pageX/pageY IE8以前不支持，页面位置
event.target || event.srcElement 用于获取触发事件的元素
event.preventDefault() 取消默认行为

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script src="common.js"></script>
  <script>

    /*
    *
    * offset系列:获取元素的宽,高,left,top, offsetParent
    * offsetWidth:元素的宽,有边框
    * offsetHeight:元素的高,有边框
    * offsetLeft:元素距离左边位置的值
    * offsetTop:元素距离上面位置的值
    *
    * scroll系列:卷曲出去的值
    * scrollLeft:向左卷曲出去的距离
    * scrollTop:向上卷曲出去的距离
    * scrollWidth:元素中内容的实际的宽(如果内容很少,没有内容,元素自身的宽),没有边框
    * scrollHeight:元素中内容的实际的高(如果内容很少或者没有内容,元素自身的高),没有边框
    *
    *
    * client系列:可视区域
    * clientWidth:可视区域的宽(没有边框),边框内部的宽度
    * clientHeight:可视区域的高(没有边框),边框内部的高度
    * clientLeft:左边边框的宽度
    *clientTop :上面的边框的宽度
    * */


  </script>
  <style>
    div{
      width: 200px;
      height: 210px;
      border: 20px solid red;
      border-left-width: 50px;
    }
  </style>
</head>
<body>
<div id="dv"></div>
<script>
// console.log(my$("dv").clientWidth);
// console.log(my$("dv").clientHeight);

// console.log(my$("dv").clientLeft);
 console.log(my$("dv").clientTop);
</script>
</body>
</html>

案例

跟着鼠标飞的天使
- 基本版本

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    body{
      height: 2000px;
    }
    img{
      position: absolute;
    }
  </style>
</head>
<body>

<img src="images/bird.png" alt="" id="im" />
<script src="common.js"></script>
<script>

  //页面的鼠标移动事件
  document.onmousemove=function (e) {
    //鼠标相对于页面的可视区域的横坐标
    //my$("im").style.left=e.clientX+"px";
    //鼠标相对于页面的可视区域的纵坐标
    //my$("im").style.top=e.clientY+"px";

    //因为IE8的浏览器中针对事件参数对象使用的是window.event,那么,事件处理函数中是没有e这个参数的,所以,使用window.event来代替e
//    my$("im").style.left=window.event.clientX+"px";
//    my$("im").style.top=window.event.clientY+"px";

    //火狐浏览器支持的事件参数对象:e,不支持window.event

    //1.=======此时window.event和事件参数对象e是需要兼容的
    //2. pageX和pageY就是鼠标相对于页面的边界的坐标

    //下面的代码在谷歌和火狐支持
//    my$("im").style.left=e.pageX+"px";
//    my$("im").style.top=e.pageY+"px";

    //下面的代码在IE8中不支持,不支持pageX和pageY的属性
//    my$("im").style.left=window.event.pageX+"px";
//    my$("im").style.top=window.event.pageY+"px";

    function getScroll() {
      return {
        left:window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft||0,
        top:window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0
      }
    }
    //可视区域横坐+向左卷曲出去的横坐标
    my$("im").style.left=window.event.clientX+getScroll().left+"px";
    //可视区域纵坐标+向上卷曲出去的纵坐标
    my$("im").style.top=window.event.clientY+getScroll().top+"px";

  };

</script>

</body>
</html>

最终版本

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    body{
      height: 2000px;
    }
    img{
      position: absolute;
    }
  </style>
</head>
<body>
<img src="images/bird.png" alt="" id="im" />
<script src="common.js"></script>
<script>


  //图片跟着鼠标飞,可以在任何的浏览器中实现
  //window.event和事件参数对象e的兼容
  //clientX和clientY单独的使用的兼容代码
  //scrollLeft和scrollTop的兼容代码
  //pageX,pageY和clientX+scrollLeft 和clientY+scrollTop

  //把代码封装在一个函数

  //把代码放在一个对象中
  var evt={
    //window.event和事件参数对象e的兼容
    getEvent:function (evt) {
      return window.event||evt;
    },
    //可视区域的横坐标的兼容代码
    getClientX:function (evt) {
      return this.getEvent(evt).clientX;
    },
    //可视区域的纵坐标的兼容代码
    getClientY:function (evt) {
      return this.getEvent(evt).clientY;
    },
    //页面向左卷曲出去的横坐标
    getScrollLeft:function () {
      return window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft||0;
    },
    //页面向上卷曲出去的纵坐标
    getScrollTop:function () {
      return window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0;
    },
    //相对于页面的横坐标(pageX或者是clientX+scrollLeft)
    getPageX:function (evt) {
      return this.getEvent(evt).pageX? this.getEvent(evt).pageX:this.getClientX(evt)+this.getScrollLeft();
    },
    //相对于页面的纵坐标(pageY或者是clientY+scrollTop)
    getPageY:function (evt) {
      return this.getEvent(evt).pageY?this.getEvent(evt).pageY:this.getClientY(evt)+this.getScrollTop();
    }



  };
  //最终的代码

  document.onmousemove=function (e) {
    my$("im").style.left=evt.getPageX(e)+"px";
    my$("im").style.top=evt.getPageY(e)+"px";
  };



//  var obj={
//    sayHi:function () {
//      console.log("考尼奇瓦");
//      this.eat();//this就是obj这个对象
//    },
//    eat:function () {
//      console.log("饭以ok,下来密西吧");
//    }
//
//  };
//  //调用sayHi方法的同时,调用eat方法,是否可以在一个方法中调用另一个方法?
//  //在对象的方法中调用另一个方法如何调用?
//
//  obj.sayHi();



</script>
</body>
</html>

鼠标点哪图片飞到哪里
获取鼠标在div内的坐标

阻止事件传播的方式

标准方式 event.stopPropagation();
IE低版本 event.cancelBubble = true; 标准中已废弃

常用的鼠标和键盘事件

onmouseup 鼠标按键放开时触发
onmousedown 鼠标按键按下触发
onmousemove 鼠标移动触发
onkeyup 键盘按键按下触发
onkeydown 键盘按键抬起触发

Web前端学习笔记——JavaScript之事件详解

事件详解

注册/移除事件的三种方式

兼容代码

事件的三个阶段

事件对象的属性和方法

案例

阻止事件传播的方式

常用的鼠标和键盘事件

JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解

JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解

前端笔记知识点整合之JavaScript（十）深入JavaScript节点&DOM&事件

JavaScript学习笔记之惰性函数示例详解

web前端基础之HTML5语义化新标签学习笔记（8）学会用语义化标签

前端学习笔记三：JavaScript（2）变量的分类和作用域+利用浏览器调试模式测试+HTML事件+表示特殊字符（+运算符+各种循环和条件语句【略】）

前端笔记知识点整合之JavaScript（十）深入JavaScript节点&DOM&事件

web前端JavaScript高级#学习笔记01

Web前端学习笔记—— jQuery之样式、动画

web前端：Javascript学习笔记和jQuery库操作