美文网首页web前端自学之路
web前端 -- Day20 js基础

web前端 -- Day20 js基础

作者: 韩发发吖 | 来源:发表于2019-03-14 09:02 被阅读0次

    为元素绑定多个事件

    绑定事件的区别
    事件绑定的方法:

    addEventListener(); 
    attachEvent();
    

    相同点:都可以为事件绑定元素
    不同点:

    1. 方法名不一样;
    2. 参数个数不一样;
    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(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(type,fn)
        }else {
            element["on"+type] = null;
        }
    }
    

    事件冒泡

    多个元素嵌套,有层次关系,这些元素都注册了相同事件,如果里面元素的事件触发了,那么外边的元素的事件自动的触发了,触发是从里向外。

    如何阻止事件冒泡???

    // 谷歌、IE 支持,火狐不支持
    window.event.cancelBubble = true;
    // 谷歌火狐支持
    e.stopPropagation(); 
    

    window.event和e.stopPropagation()都是事件参数对象,一个是IE的标准,一个是火狐的标准,事件参数e在IE8的浏览器中是不存在,此时用window.event代替。

    事件的三个阶段

    事件阶段:三个阶段,通过e.eventPhase这个属性,可以知道当前事件是什么阶段的。一般默认都是冒泡阶段,很少用捕获阶段。

    1. 事件捕获阶段:从外向内
    2. 事件目标阶段:最开始选择的那个
    3. 事件冒泡阶段:从里向外
    // 事件触发过程中,可能会出现事件冒泡的效果,为了阻止事件冒泡
    addEventListener("没有on的事件类型",事件处理函数,控制事件阶段的);
    
    

    地址解析

    1. 历史记录的后退和前进:history -- back();后退 forward(); 前进
    2. 地址栏上的地址的操作:location -- href属性跳转页面, assgin()跳转页面, reload()刷新 , replace() 方法替换地址栏上的地址的,没有历史记录
    3. 获取系统和浏览器的信息 navigator -- userAgent属性:获取系统,浏览器的信息的
    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);
    

    定时器

    // 返回值就是定时器的id值
    var timeID =  setInterval(function(){
         alert("定时器!!!");
     },1000);
    
     my$("btn").onclick = function(){
         // 点击按钮,停止定时器
         // 参数:要清理的定时器的id
         window.clearInterval(timeID);
     }
    

    参数1:时间 -- 毫秒 -- 1000毫秒 -- 1秒
    执行过程:页面加载完毕后,过了1秒,执行一次函数代码,又过了一秒再执行函数。

    一次性的定时器,只执行一次
    参数1:函数
    参数2:时间 -- 1000毫秒 -- 1秒
    返回值是改定时器的id
    window.setTimeout("函数","时间");

    var timeId= window.setTimeout(function(){alert("hello!!!");},1000);
        // 点击按钮,停止这个一次性的定时器
        my$("btn1").onclick = function () {
        clearTimeout(timeId);
        }
    }
    

    相关文章

      网友评论

        本文标题:web前端 -- Day20 js基础

        本文链接:https://www.haomeiwen.com/subject/rvmfmqtx.html