15

1.事件:
click
dbclick
mouseover
mouseout
mouseenter
mouseleave
onload
change
blur
input
submit
focus
scroll
resize

  1. 鼠标的点击位置?
    键盘按键?

如果对一个标签设置了点击事件之后,没有效果?
1.有没有报错。
2.事件有没有写错
3.元素有没有获取到

document是整个文档的父级。
event对象是事件发生的时候产生的一个对象。但是FF不支持。

  1. 获取一个兼容的event对象。
    var ev = ev || event ;

event.clientX:相对于窗口可视区域的X坐标
event.clientY:相对于窗口可视区域的Y坐标

封装的鼠标点击位置的坐标获取方法。
function getPos(ev){
var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
return {
left:scrollLeft+ev.clientX,
top:scrollTop + ev.clientY
};
}

4.事件流
事件冒泡:事件冒泡就是内层元素的事件会随着文档流向上冒泡,
如果上层具有相同的事件,那么这个事件也会响应。直到冒泡到顶层对象document。

event.cancelBubble = true; //停止冒泡

  1. 键盘事件
    keydown
    keypress
    keyup
    按键的编码 。 ev.keyCode
    按键编码是连续的。0-9,a-z

ctrlKey、shiftKey、altKey 这个是键盘事件的功能键,如果这些键按下的话,对应的key值是true。这样可以实现多按键操作。
Ctrl+enter
ctrl+c
ctrl+v

6.鼠标右键的菜单事件 on contextmenu

return false ; 能够阻止事件的默认行为。

7.拖拽事件
复合事件
首先是鼠标按下,然后是鼠标移动。然后是鼠标放开。自己理解。

var d = document.querySelector('div');
d.onmousedown = function(ev){
var ev = ev || event;
var x = ev.clientX - d.offsetLeft;
var y = ev.clientY-d.offsetTop;
d.onmousemove = function(ev){
var ev = ev || event;
d.style.left = ev.clientX - x + 'px';
d.style.top = ev.clientY - y + 'px';
};
d.onmouseup = function(){
d.onmousemove = function(){};
};
};

作业:
黄维帆:英文单词。
李茂:整理所有的兼容问题。封装成函数

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 8,863评论 1 11
  • 事件对象 鼠标事件 event.clientX在可视区中,鼠标点击的x坐标 event.clientY在可视区中,...
    LaBaby_阅读 3,685评论 0 1
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,024评论 1 45
  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 5,883评论 0 1
  • 什么叫调动用户的认知?用户看到文案,第一反应什么印象,这叫“调动认知”。 电动平衡车文案:“时速16km,满足日常...
    琢磨概念者阅读 4,417评论 0 1