1. 系统事件-Event对象、MouseEvent对象
  2. 图片预加载
  3. 拖拽

事件的区别：

  • 事件写法的不同：

    • 在标签中写只能添加一个onclick事件函数，早期的事件会自动设置一个event全局变量，用于事件的处理，同步执行时不会丢失，异步执行延迟会消除。无冒泡。

    • DOM对象添加方法，不再使用全局变量e，只能执行一个函数。有冒泡功能，没有捕获功能。不支持自定义事件这样写大多数都会写出匿名函数。大多数的回调地狱都是在事件函数中发生的，原因是匿名函数的使用。

      e=e || window.event;

      bn.onclick=null;//清除事件

    • 侦听事件类型：一般这种事件不写匿名函数，写命名函数，适合于函数式编程。这种事件包括捕获。冒泡阶段和阻止，还包括自带事件event对象，设置是否执行一次，支持自定义事件，IE8及以下不支持。onclick等所有系统事件===>去掉on。可以执行多个函数

      bn.removeEventListener(“事件”,函数名)//删除事件

    • IE11以下支持，IE11及以上不支持，没有捕获阶段触发

      bn.attachEvent(“on事件”,函数名);

      bn.detachEvent(“on事件”,函数名);

Event对象：

  • 表单应用事件：

  • submit和reset

  • 1
2
3
4
5
6
7
8
9

    var from=document.querySelector("form");
form.addEventListener("submit",submitHanlder);
form.addEventListener("reset",submitHanlder);
function submitHanlder(e){
    //阻止表单跳转 submit
    //阻止表单重置 reset
    e.preventDefault()  阻止默认事件行为
    e.returnValue=false  返回值=false//兼容
}

  • select：针对input或者textArea的

  •  1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

    //input.selecttionStart//输入框中的选中开始位置下标
//input.selecttionEnd//输入框中的选中结束位置下标

var input=document.querySelector("input");
input.addEventListener("select",selectHandler);
function selectHandler(e){
    console.log(e);
    // console.log(input.selectionStart,input.selectionEnd)
    input.value=input.value.slice(0,input.selectionStart)+
    input.value.slice(input.selectionStart,input.selectionEnd).toUpperCase()
    +input.value.slice(input.selectionEnd)
    //将文本输入框中的选中单词变成大写。
}

  • change：可以针对表单元素,也可以针对form表单

  • 失去焦点时，原value的值发生改变时，触发

  • 1
2
3
4
5
6

    //针对表单时，判断整个表单的修改
var form=document.querySelector("form");
form.addEventListener("change",changeHandler);
function changeHandler(e){
    console.log(e.target,e.target.value);
}

  • resize 更改浏览器中文档大小 –只针对window侦听

  • 1
2
3
4
5
6
7
8

    //em就是父容器的字体大小
//rem相对于根标签的字体大小（html）
resizeHandler();
window.addEventListener("resize",resizeHandler);
function resizeHandler(e){
    // console.log(screen.width)
    document.documentElement.style.fontSize=document.body.clientWidth/screen.width*100+"px";
}

  • 图片的加载需要时间，无法立即获得宽度 offsetWidth

  • 预加载 load加载完成，滞后性极强

  • 图片加载不适用load事件，所以：

  •  1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

    var img=new Image();
img.addEventListener();
img.src="地址";
function 函数(e){
    var img1=img.cloneNode(false);
    document.body.appendChild(img1);
	console.log(img.width);//原图的宽高
    img1.style.width="600px";
    console.log(img.width);
    //克隆一个图片副本，修改宽高放进容器中，原始图宽高不变。
}
  • 图片预加载的几种方式比较及改善

  • scroll：滚动条，默认自动阻止冒泡，通过事件属性传递值。

  •  1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

    div1.addEventListener("scroll",scrollHandler);
window.addEventListener("scroll",scrollHandler1);
function scrollHandler(e){
    console.log(e);
    //var evt=new Event("scroll");
    //evt.scrollTop=this.scrollTop;
    //window.dispatchEvent(evt);//自建事件在触发子元素的滚动事件时抛发，来达到传递数据的效果
}
function scrollHandler1(e){
    document.documentElement.scrollTop=e.scrollTop;
}

  • error：加载失败时，触发错误事件。

MouseEvent对象：

  • 按住键盘辅助键点击

    • 1
2
3
4

      ctrlKey
altKey
shiftKey
metaKey

  • 判断鼠标按键

    • 1
2
3

      button	0 1 2
buttons	1 4 2
which	1 2 3

  • 坐标

    •  1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

      x:
y:
clientX:
clientY:
//鼠标相对视口距离
pageX:
pageY:
//相对页面顶端位置/绝对坐标位置
layerX:
layerY:
//相对e.target左上角的坐标，如果目标元素定位了，和offset值相同；如果没有定位，offset不变，layer相对父元素的左上角位置。
offsetX:
offsetY:
//相对e.target左上角的坐标
movementX:
movementY:
//用于Mousemove事件，相对于上次移动距离。==汽车图片
screenX:
screenY:
//绝对于屏幕左上角

  • 鼠标事件：

    •  1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

      click
dbclick
mousedown
mouseup
mousemove

mouseover
mousenter
mouseout
mouseleave
//mousenter和mouseleave不会因为进入子元素而抛发事件
//mouseover和mouseout会因为子元素而抛发事件
contextmenu
//如果是contextmenu，会呼出右键菜单
//e.preventDefault()阻止呼出菜单

拖拽