js篇--学习web-api第四天（开始BOM的学习）

阿发学测试

于 2019-08-26 16:43:58 发布

阅读量231

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/weixin_42603991/article/details/100068267

版权

前端学习专栏收录该内容

22 篇文章 0 订阅

订阅专栏

事件详解

1.绑定事件的区别

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

2.为元素解绑事件

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

</head>
<body>
<input type="button" value="小苏" id="btn"/>
<input type="button" value="干掉第一个按钮的事件" id="btn2"/>
<script src="common.js"></script>
<script>
  //1 对象.on事件名字=事件处理函数----绑定事件
//  my$("btn").onclick=function () {
//    console.log("我猥琐");
//  };
//  my$("btn2").onclick=function () {
//    //1.解绑事件
//    my$("btn").onclick=null;
//  };

//  function f1()
//    console.log("第一个");
//  }
//  function f2() {
//    console.log("第二个");
//  }
//  my$("btn").addEventListener("click",f1,false);
//  my$("btn").addEventListener("click",f2,false);
//
//  //点击第二个按钮把第一个按钮的第一个点击事件解绑
//  my$("btn2").onclick=function () {
//    //解绑事件的时候,需要在绑定事件的时候,使用命名函数
//    my$("btn").removeEventListener("click",f1,false);
//  };


  function f1() {
    console.log("第一个");
  }
  function f2() {
    console.log("第二个");
  }
  my$("btn").attachEvent("onclick",f1);
  my$("btn").attachEvent("onclick",f2);

  my$("btn2").onclick=function () {
      my$("btn").detachEvent("onclick",f1);
  };



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

</body>
</html>

3.为元素绑定事件和解绑事件的兼容代码

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

</head>
<body>
<input type="button" value="按钮" id="btn1"/>
<input type="button" value="干掉第一个按钮的事件" id="btn2"/>
<script src="common.js"></script>
<script>

  //绑定事件的兼容
  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;
    }
  }
  function f1() {
    console.log("第一个");
  }
  function f2() {
    console.log("第二个");
  }
  addEventListener(my$("btn1"),"click",f1);
  addEventListener(my$("btn1"),"click",f2);
  my$("btn2").onclick=function () {
    removeEventListener(my$("btn1"),"click",f1);
  };


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

4.事件冒泡

<!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>

    //事件冒泡:多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的事件触发了,外面的元素的该事件自动的触发了.
  </script>
</head>
<body>
<div id="dv1">
  <div id="dv2">
    <div id="dv3"></div>
  </div>
</div>

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

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

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

  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);
  };

//  document.body.onclick=function () {
//      console.log("颤抖吧,你们这些愚蠢的标签");
//  };

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

5.事件的三个阶段

<!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>

6.为同一个元素绑定多个不同事件，指向同一个事件处理函数

<!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>
  //为同一个元素绑定多个不同的事件,指向相同的事件处理函数
  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;
    }
  }
  //  my$("btn").onmouseover=function (e) {
  //    console.log(e);
  //  };
</script>
</body>
</html>

7.案例:模拟百度搜索大项目

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #box {
      width: 450px;
      margin: 200px auto;
    }

    #txt {
      width: 350px;
    }

    #pop {
      width: 350px;
      border: 1px solid red;
    }

    #pop ul {
      margin: 10px;
      padding: 0px;
      width: 200px;
      list-style-type: none;

    }

    #pop ul li {

    }
  </style>
</head>
<body>

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

</div>

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


  var keyWords = ["小杨才是最纯洁的", "小杨才是最帅的", "小段是最猥琐的", "小超是最龌龊的", "传智播客是一个培训机构", "传说在传智有个很帅很纯洁的小杨", "苹果好吃", "苹果此次召回还是没有中国"];
  //获取文本框注册键盘抬起事件
  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 = "";
      };
    }


  };


</script>

</body>
</html>

BOM

1.BOM的概念
BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理，

比如：刷新浏览器、后退、前进、在浏览器中输入URL等
2.BOM的顶级对象window
window是浏览器的顶级对象，当调用window下的属性和方法时，可以省略window 注意：window下一个特殊的属性 window.name
3. 对话框

alert()
prompt()
confirm()

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

4.页面加载事件

onload


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

    页面加载完毕了,再获取按钮
    只要页面加载完毕,这个事件就会触发-----页面中所有的内容,标签,属性,文本,包括外部引入js文件
   window.onload=function () {
     document.getElementById("btn").onclick=function () {
       alert("您好");
     };
   };


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

    扩展的事件---页面关闭后才触发的事件
   window.onunload=function () {

   };
    扩展事件---页面关闭之前触发的
   window.onbeforeunload=function () {
     alert("哈哈");
   };

5.location对象
location对象是window对象下的一个属性，时候的时候可以省略window对象

location可以获取或者设置浏览器地址栏的URL

//对象中的属性和方法
    //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");//没有历史记录

6.history对象

back()
forward()
go()

7.navigator对象

userAgent

通过userAgent可以判断用户浏览器的类型

platform

通过platform可以判断浏览器所在的系统平台类型.

定时器

setTimeout()和clearTimeout()

在指定的毫秒数到达之后执行指定的函数，只执行一次

// 创建一个定时器，1000毫秒后执行，返回定时器的标示
var timerId = setTimeout(function () {
  console.log('Hello World');
}, 1000);

// 取消定时器的执行
clearTimeout(timerId);

setInterval()和clearInterval()

定时调用的函数，可以按照给定的时间(单位毫秒)周期调用函数

// 创建一个定时器，每隔1秒调用一次
var timerId = setInterval(function () {
  var date = new Date();
  console.log(date.toLocaleTimeString());
}, 1000);

// 取消定时器的执行
clearInterval(timerId);

案例

1.一起摇起来

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    img {
      width: 200px;
      height: 200px;
    }

    div {
      position: absolute;
    }
  </style>
</head>
<body>
<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);
  };
</script>
</body>
</html>

2.一闪一闪亮晶晶

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 600px;
      height: 600px;
      border:2px solid yellow;
      background-color: black;
      position: relative;
    }
    span{
      font-size: 30px;
      color: yellow;
      position: absolute;
    }
  </style>
</head>
<body>
<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>

</body>
</html>

3.美女时钟

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

</head>
<body>
<img src="" alt="" id="im" />
<script src="common.js"></script>
<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);




</script>

</body>
</html>

阿发学测试

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js篇--学习web-api第四天（开始BOM的学习）

事件详解1.绑定事件的区别 * 总结绑定事件的区别: * addEventListener(); * attachEvent() * * 相同点: 都可以为元素绑定事件 * 不同点: * 1.方法名不一样 * 2.参数个数不一样addEventListener三个参数,attachEvent两个参数 * 3.addEventListener 谷歌,火狐,IE1...
复制链接

扫一扫

专栏目录