• DOM_06之定时器、事件、cookie


    1、定时器:①任务函数:函数结尾判断临界值;②启动定时器:a、周期性:timer=setInterval(任务函数,interval);b、一次性:timer=setTimeout(任务函数,wait);③停止定时器:a、周期性:clearInterval(timer);timer=null;b、一次性:clearTimeout(timer);timer=null;

    2、动画:变量:DISTANCE,DURATION,STEPS,step,interval,timer,moved;函数:start():setInterval(moveStep,bind(this),interval);moveStep():对象移动step;

    3、事件:用户手动触发,浏览器自动触发,元素状态改变;当事件发生时,浏览器自动调用事件处理函数;绑定事件处理函数:①在元素开始标签中绑定,<button onclick=“js语句(this)”></button>;button.onclick=function(){eval(“js语句(this)”)};单击按钮时,button.onclick();②js中为元素事件处理函数属性赋值:btn.onclick=function(){//this=>button;……};③使用API添加事件监听:a、添加:btn.addEventListener(“事件名”,函数对象);b、移除:btn.removeEventListener(“事件名”,函数对象);

    4、事件周期:①捕获:从外层元素向内层元素逐个记录绑定事件处理函数,默认暂不触发任何事件;②目标触发:优先触发目标元素上绑定的事件处理函数;*(目标元素为实际点击的元素;);③冒泡:按照捕获的顺序由内层向外层逐层触发捕获的事件处理函数;修改事件触发顺序:btn.addEventListener(“事件名”,函数对象,capture);*(capture表示是否在捕获阶段提前触发,取值true或false);

    5、事件对象:事件发生时,自动创建封装事件信息的对象event,作为事件处理函数的第一个参数自动传入;①阻止冒泡:e.stopPropagation();②利用冒泡:可减少事件监听对象,但须获得目标元素:target;*(因为事件监听易形成闭包难以释放;);③取消事件(阻止默认行为):e.preventDefault();

    6、事件坐标:①参照屏幕左上角:e.screenX,e.screenY;②参照文档显示区左上角:e.clientX或e.x,e.clientY或e.y;③参照所在父元素的左上角:e.offsetX,e.offsetY;

    7、页面滚动事件:onscroll;获得页面滚动过的距离:document.body.scrollTop或document.documentElement.scrollTop;

    8、cookie:创建:document.cookie=“变量名=值;expires=”+date.toGMTString();

    It's never too old to learn!
    转载
  • 相关阅读:
    input中的disabled 和 readonly的区别
    pwa-serviceWorker与页面通信postMessage
    PWA之push服务
    vue+typescript入门学习
    基于node 搭建http2服务
    阻止默认行为是配合passive使用
    正则表达式exec方法的陷阱
    serviceWorker-资料参考
    MVC的增删改和Razor
    MVC基础
  • 原文地址:https://www.cnblogs.com/lianzhibin/p/6059714.html
Copyright © 2020-2023  润新知