JavaScript学习记录十

最新推荐文章于 2024-05-21 21:29:52 发布

毋十三

最新推荐文章于 2024-05-21 21:29:52 发布

阅读量131

点赞数 1

本文链接：https://blog.csdn.net/qq_34117624/article/details/82725510

版权

总结绑定事件的区别:
* 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

解绑事件:
/*
* 注意:用什么方式绑定事件,就应该用对应的方式解绑事件
* 1.解绑事件
* 对象.on事件名字=事件处理函数--->绑定事件
* 对象.on事件名字=null;
* 2.解绑事件
* 对象.addEventListener("没有on的事件类型",命名函数,false);---绑定事件
* 对象.removeEventListener("没有on的事件类型",函数名字,false);
* 3.解绑事件
* 对象.attachEvent("on事件类型",命名函数);---绑定事件
* 对象.detachEvent("on事件类型",函数名字);

案例：绑定和解绑兼容的封装

  //绑定事件的兼容
  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,fnName) {
    if(element.removeEventListener){
      element.removeEventListener(type,fnName,false);
    }else if(element.detachEvent){
      element.detachEvent("on"+type,fnName);
    }else{
      element["on"+type]=null;
    }
  }

事件冒泡:多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的事件触发了,

外面的元素的该事件自动的触发了.

//事件冒泡,阻止事件冒泡,
//如何阻止事件冒泡: window.event.cancelBubble=true; IE特有的,谷歌支持,火狐不支持

// e.stopPropagation(); 谷歌和火狐支持,

<div id="dv1">
  <div id="dv2">
    <div id="dv3"></div>
  </div>
</div>
  my$("dv1").onclick=function () {
    console.log(this.id);
  };
  my$("dv2").onclick=function () {
    console.log(this.id);
    //window.event.cancelBubble=true;
  };
  //事件处理参数对象
  my$("dv3").onclick=function (e) {
    console.log(this.id);
    //阻止事件冒泡
    //e.stopPropagation();

    console.log(e);
  };

事件有三个阶段:
    /*
     *可以理解为警察抓小偷，小偷藏在最里边的房间，警察的捕获是由外向里的。
     * 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---->冒泡
     * 一般默认都是冒泡阶段,很少用捕获阶段
     * 冒泡阶段:从里向外
     * 捕获阶段:从外向内

<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);
         ↑ 注意这个值：true表示捕获阶段的查询 | false表示冒泡阶段的查询

案例：为同一个元素绑定多个不同的事件,指向相同的事件处理函数

<input type="button" value="小苏" id="btn"/>
<script src="common.js"></script>
<script>
  //为同一个元素绑定多个不同的事件,指向相同的事件处理函数
  my$("btn").onclick = f1;
  my$("btn").onmouseover = f1;
  my$("btn").onmouseout = f1;
  function f1(e) {
    switch (e.type) {
      case "click":
        alert("好帅哦");
        break;
      case "mouseover":
        this.style.backgroundColor = "red";
        break;
      case "mouseout":
        this.style.backgroundColor = "green";
        break;
    }
  }

案例：搜索框的实现

<div id="box">
  <input type="text" id="txt" value="">
  <input type="button" value="搜索" id="btn">

</div>

<script src="common.js"></script>
<script>


  var keyWords = ["qingqing", "qinqin", "qingqin", "qinqing", "abcd", "bcc", "def", "abc"];
  //获取文本框注册键盘抬起事件
  my$("txt").onkeyup = function () {


    //每一次的键盘抬起都判断页面中有没有这个div
    if(my$("dv")){
      //删除一次
      my$("box").removeChild(my$("dv"));
    }
    //获取文本框输入的内容
    var text = this.value;
    //临时数组--空数组------->存放对应上的数据
    var tempArr = [];
    //把文本框输入的内容和数组中的每个数据对比
    for (var i = 0; i < keyWords.length; i++) {
      //是否是最开始出现的
      if (keyWords[i].indexOf(text) == 0) {
        tempArr.push(keyWords[i]);//追加
      }
    }
    //如果文本框是空的,临时数组是空的,不用创建div
    if (this.value.length == 0 || tempArr.length == 0) {
      //如果页面中有这个div,删除这个div
      if (my$("dv")) {
        my$("box").removeChild(my$("dv"));
      }
      return;
    }
    //创建div,把div加入id为box的div中
    var dvObj = document.createElement("div");
    my$("box").appendChild(dvObj);
    dvObj.id = "dv";
    dvObj.style.width = "350px";
    //dvObj.style.height="100px";//肯定是不需要的------
    dvObj.style.border = "1px solid green";
    //循环遍历临时数组,创建对应的p标签
    for (var i = 0; i < tempArr.length; i++) {
      //创建p标签
      var pObj = document.createElement("p");
      //把p加到div中
      dvObj.appendChild(pObj);
      setInnerText(pObj, tempArr[i]);
      pObj.style.margin = 0;
      pObj.style.padding = 0;
      pObj.style.cursor = "pointer";
      pObj.style.marginTop = "5px";
      pObj.style.marginLeft = "5px";
      //鼠标进入
      pObj.onmouseover = function () {
        this.style.backgroundColor = "yellow";
      };
      //鼠标离开
      pObj.onmouseout = function () {
        this.style.backgroundColor = "";
      };
    }

JavaScript分三个部分:
    * 1. ECMAScript标准---基本语法
    * 2. DOM--->Document Object Model 文档对象模型,操作页面元素的
    * 3. BOM--->Browser Object Model 浏览器对象模型,操作浏览器的
    *
    * 浏览器中有个顶级对象:window----
    * 页面中顶级对象:document-----
    * 页面中所有的内容都是属于浏览器的,页面中的内容也都是window的

    var num=100;
    console.log(window.num);
     function f1() {
      console.log("小苏我也从了");
    }
    window.f1();
    //因为页面中的所有内容都是window的,window是可以省略的.
    window.document.write("哈哈");
    var name="您好";
    console.log(window.name);
    console.log(top);和下边的效果相同
    console.log(window);  注：可以通过这种方式，来查看对象的方法和属性

系统的对话框

    //window.alert("您好啊");//以后不用,测试的时候使用
    //window.prompt("请输入帐号");
    //var result=window.confirm("您确定退出吗");

页面加载

//页面加载的时候,按钮还没出现,页面没有加载完毕

    window.onload=function () {
      document.getElementById("btn").onclick=function () {
        alert("您好");
      };
    };

    onload=function () {
      document.getElementById("btn").onclick=function () {
        alert("您好");
      };
    };

    //扩展的事件---页面关闭后才触发的事件  注：谷歌浏览器不支持 IE8可以看到效果
    window.onunload=function () {}；

    //扩展事件---页面关闭之前触发的        注：区别在于弹框的时机
    window.onbeforeunload=function () {
      alert("哈哈");
    };

location对象
*console.log(window.location);通过这种方式查看属性方法

    //地址栏上#及后面的内容
    console.log(window.location.hash);
    //主机名及端口号
    console.log(window.location.host);
    //主机名
    console.log(window.location.hostname);
    //文件的路径---相对路径
    console.log(window.location.pathname);
    //端口号
    console.log(window.location.port);
    //协议
    console.log(window.location.protocol);
    //搜索的内容
    console.log(window.location.search);
     onload=function () {
      document.getElementById("btn").onclick=function () {
        //设置跳转的页面的地址
       location.href="http://www.jd.com";属性----------------->必须记住
       location.assign("http://www.jd.com");方法  和上边那个同样可以实现页面的跳转，一模一样
       location.reload();//重新加载--刷新
       location.replace("http://www.jd.com");没有历史记录，浏览器上没有那个回退的箭头

history对象

*根据history可以向前向后跳转

<input type="button" value="跳过去" id="btn1"/>
<input type="button" value="前进" id="btn2"/>
<script src="common.js"></script>
<script>
  //跳转的
  my$("btn1").onclick = function () {
    window.location.href = "15test.html";
  };
  //前进
  my$("btn2").onclick = function () {
    window.history.forward();
  };

navigator对象

*问题：我的电脑是64位的为什么查询所得的是32位的

*浏览器厂商自定义的，不同的浏览器可能有不同的区别，尽量不要通过这种方式来确定平台的位数

    //通过userAgent可以判断用户浏览器的类型
    console.log(window.navigator.userAgent);Mozilla/5.0 (Windows NT 6.1; Win64;
    //通过platform可以判断浏览器所在的系统平台类型.
    console.log(window.navigator.platform);Win32

BOM中有两个定时器---计时器

<input type="button" value="停止" id="btn"/>
<script>
  var timeId = setInterval(function () {
    alert("hello");//断言
  }, 1000);
  document.getElementById("btn").onclick = function () {
    //点击按钮,停止定时器
    //参数:要清理的定时的id的值
    window.clearInterval(timeId);
  };

案例：图标的动态显示(图标更改坐标必须制定为绝对坐标，才可以实现)

    <style>
        img{
            width: 200px;
            height: 200px;
        }
        div{
            position: absolute;
        }
    </style>
<input type="button" value="摇起来" id="btn1"/>
<input type="button" value="停止" id="btn2"/>
<div id="dv">
  <img src="images/heihei.jpg" alt=""/>
  <img src="images/lyml.jpg" alt=""/>
</div>
<script src="common.js"></script>
<script>
  //点击按钮摇起来
  var timeId="";
  my$("btn1").onclick = function () {
    timeId= setInterval(function () {
      //随机数
      var x = parseInt(Math.random() * 100 + 1);
      var y = parseInt(Math.random() * 100 + 1);
      //设置元素的left和top属性值
      my$("dv").style.left = x + "px";
      my$("dv").style.top = y + "px";
    }, 10);
  };

  my$("btn2").onclick=function () {
    clearInterval(timeId);
  };

案例：小星星

  <style>
    div{
      width: 600px;
      height: 600px;
      border:2px solid yellow;
      background-color: black;
      position: relative;
    }
    span{
      font-size: 30px;
      color: yellow;
      position: absolute;
    }
  </style>
<input type="button" value="亮起来" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
  my$("btn").onclick=function () {
    setInterval(function () {
      my$("dv").innerHTML="<span>★</span>";
      var x = parseInt(Math.random() * 600 + 1);
      var y = parseInt(Math.random() * 600 + 1);
      my$("dv").firstElementChild.style.left=x+"px";
      my$("dv").firstElementChild.style.top=y+"px";
    },5);

  };
</script>

案例：动态图片的显示

  function f1() {
    //获取当前时间
    var dt = new Date();
    //获取小时
    var hour = dt.getHours();
    //获取秒
    var second = dt.getSeconds();

    hour = hour < 10 ? "0" + hour : hour;
    second = second < 10 ? "0" + second : second;

    my$("im").src="meimei/"+hour+"_"+second+".jpg";
  }
  f1();
  //页面加载完毕后,过了1秒才执行函数的代码
  setInterval(f1,1000);