• JS-----事件、image对象


    在触发DOM某个事件时,会产生一个事件对象,event    只在程序执行时才会存在,执行完毕就销毁。

    event中包含所有与事件有关的信息  兼容问题 需要ie9以上才行

     var event=event||window.event;

    鼠标事件

    onclick(单击)   ondblclick(双击)  oncontextmenu(右键菜单)  onmousedown(按下) onmouseup(抬起)

    onmouseover(移入)  onmouseout(移出)  onmouseenter(移入)  onmouseleave(移出) onmousemove(移动)

    onmouseover()与onmouseenter()所能实现的功能和用法相同, 唯一的区别就是前者不支持事件冒泡。

    onmouseout()与onmouseleave()所能实现的功能和用法相同, 唯一的区别就是前者不支持事件冒泡

    鼠标位置信息包含在鼠标事件的event中 单位是px

    相对于屏幕的坐标位置    screenX  screenY

    相对于视口的坐标位置     clientX   clientY

    相对于body的坐标位置     pagX    pagY     ie下没有

    键盘事件

    onkeydown() 按下任意键盘按键的事件 

    onkeyup() 释放案件的事件

    onkeypress() 按下字符按键的事件

    三个特殊键位 alt,ctrl,shift  使用时直接使用键名

    事件捕获与事件冒泡

    事件在网页中响应的顺序     捕获是由上向下 网景提出   冒泡是由下向上 ie 提出

    事件绑定类型  

    DOM0级  普通事件 给同一个元素绑定多个相同类型的事件前面的会被后面的覆盖

    DOM2级  非ie addEventListener()    removeEventListener()

          IE attachEvent()    deatchEvent()

    非IEDOM2级 

    var box = document.getElementById("box"); box.removeEventListener("click",myFn,false);三个参数   元素/事件类型/响应事件的函数

    阻止事件冒泡

    不希望事件向上级元素传播时  有几个相同类型事件时

    IE下在事件中编写代码: event.stopPropagation();

    非IE下在事件中编写代码: window.event.cancelBubble = true;

    阻止默认事件

    兼容性问题

    IE下在事件中编写代码: event.preventDefault();

    非IE下在事件中编写代码: window.event.returnValue = false

    image对象

    创建image对象

    var img=new Image();

    image对象事件

    onerror 在装载图像过程中发生错位时调用的句柄

    onload 图像装载完毕时调用的事件句柄

    图片预加载

    提前加载图片,当用户需要查看时可直接从本地缓存中渲染。

    图片懒加载---图片延迟加载 

    通常用于图片比较多的网页。可以减少请求数或者延迟请求数,优化性能。

    懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位,把正真的路径存在元素的“data-src”(这个名字起个自己认识好记的就行)属性里,要用的时候就取出来,再设置;

    滚动条偏移量

    document.body.scrollTop

    document.body.scrollLeft

    兼容使用方式   var body_=document.documentElement||document.body

           var  a=body_.scrollTop;

    window.onscroll  页面滚动事件

    window.onresize 窗口大小

    创建元素

    append('div');  支持插入文本类型 可插入n个标签

    appendChild('div')  不支持文本类型 智能插入一个标签

    arguments   动态参数列表

  • 相关阅读:
    Subversion学习笔记
    单元测试 学习笔记 之五
    单元测试 学习笔记 之四
    将全球通讯簿导入pop3客户端联系人
    isa 2006 sp1发布
    使用POWERSHELL管理OCS 2007
    SCCM 2007 排错
    空空排错日志:OCS错误日志14501等解决办法
    在AD没有备份的情况下还原被删除的数据
    冲击波又回来啦?
  • 原文地址:https://www.cnblogs.com/leroywang/p/12109572.html
Copyright © 2020-2023  润新知