2018-10-19

1.事件:

click
dbclick
mouseover
mouseout
mouseenter
mouseleave
onload
change
blur
input
submit
focus
scroll
resize

2. 鼠标的点击位置?

键盘按键?

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

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

3. 获取一个兼容的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; //停止冒泡

5. 键盘事件

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 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,538评论 1 11
  • 事件是什么,可以用来做什么,什么时候用到它? 事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。JavaScr...
    茂茂爱吃鱼阅读 1,537评论 0 16
  • 第13章 事件 1. 事件流 事件流描述的是从页面中接收事件的顺序。 (1) 事件冒泡 IE 的事件流叫做事件冒泡...
    yinxmm阅读 964评论 0 17
  • 本节介绍各种常见的浏览器事件。 鼠标事件 鼠标事件指与鼠标相关的事件,主要有以下一些。 click 事件,dblc...
    许先生__阅读 2,499评论 0 4
  • 一.recode1.静态方法和类方法、对象方法对象方法:a.直接声明在类中b.自带的self参数c.对象来调用d....
    芽菜包66阅读 108评论 0 0