事件

事件:分为两部分

1、行为本身:浏览器天生就赋予其的行为:onmouseover(onmouserenter)、onmouseout(onmouseleave)、onmousemove、onmousedown、onmouseup、onmousewheel(鼠标滚轮滚动行为)、onscroll(滚动条滚动行为)、onresize(window.onresize浏览器窗口的大小改变事件)、onload、onunload、onfocus(文本框获取焦点行为)、onblur(文本框失去焦点)、onkeydown、onkeyup(键盘的按下和抬起行为)...
哪怕没有给上述的行为绑定方法,事件也是存在的,当我们点击的时候,同样会触发它的onclick行为,只是什么事情都没做而已

2、事件绑定:给元素的某一个行为绑定方法

var oDiv=document.getElementById("div1");
//-->方法1:onclick这个行为定义在当前元素的私有属性上

oDiv.onclick=function(){
    //-->当我们触发oDiv的click行为的时候,会把绑定的这个函数执行
};

//-->方法2:addEventListener这个属性是定义在当前元素所属EventTarget这个类的原型上的
//addEventListener--->第一个参数是行为的类型,第二个参数是给当前的行为绑定的方法,第三个参数是控制在哪个阶段发生:true(在捕获阶段发生)  false(在冒泡阶段发生)
oDiv.addEventListener("click",function(){
      console.log("ok");
},false);

方法2这种称为:DOM 2级事件绑定

onclick这种绑定方式称为:DOM 0级事件绑定
把匿名函数定义的部分当做一个值赋值给oDiv的点击行为(函数表达式),当触发#div1的点击行为的时候,会执行对应绑定上的方法
重要:不仅仅把绑定的方法执行了,而且浏览器还默认给这个方法传递了一个参数值MouseEvent:鼠标事件对象
(1)它是一个对象数据类型值,里面包含了很多的属性和属性值,这些都是用来记录当前鼠标的相关信息的
(2)MouseEvent-->UIEvent-->Event-->Object
(3)MouseEvent记录的是页面中唯一一个鼠标每一次触发时候的相关信息,和到底是在哪个元素上触发的没有关系

关于事件对象MouseEvent的兼容处理
(1)事件对象本身的获取存在兼容问题:标准浏览器中是浏览器给方法传递的参数,我们只需定义形参e就可以获取到;在IE6-8中浏览器不会给方法传递参数,我们如果需要的话,需要到window.event中获取查找----->e=e||window.event;

oDiv.onclick=function(){
      e=e||window.event;
      //--->e.type:存储的是当前鼠标触发的行为类型  "click"

      //--->e.clientX/e.clientY:当前鼠标触发点距离当前屏幕左上角的x/y轴的坐标值

      //---->e.target:事件源,当前鼠标触发的是哪个元素,那么它存储的就是哪个元素,但是在IE6-8中不存在这个属性(e.target的值是undefined),我们使用e.srcElement来获取事件源
      e.target=e.target||e.srcElement;

      //--->e.pageX/e.pageY:当前鼠标触发点距离body左上角(页面第一屏幕最左上端)的x/y轴的坐标值,但是在IE6-8中没有这个属性。我们通过使用clientY+滚动条卷去的高度获取也可以
      e.pageX=e.pageX||(e.clientX+(document.documentElement.scrollLeft||document.body.scrollLeft));
      e.pageY=e.pageY||(e.clientY+(document.documentElement.scrollTop||document.body.scrollTop));

      //--->e.preventDefault:阻止浏览器的默认行为(如有时使用a标签,但点击时并不想实现跳转),在IE6-8中没有这个方法,我们需要使用e.returnValue
      e.preventDefault?e.preventDefault():e.returnValue=false;//或者用return false也可以阻止默认行为;

      //e.stopPropagation:阻止事件的冒泡传播,在IE6-8中不兼容,使用e.cancelBubble=true来代替
      e.stopPropagation?e.stopPropagation():e.cancelBubble=true;

      //e.keyCode:当前键盘上每一个键对应的值:空格键(space)-->32;回退键(Backspace)--->8;回车键(Enter)--->13;删除键(Delete)--->46;四个方向键(左37 上38 右39 下40)
};

事件的传播机制:

a、捕获阶段:从外向里依次查找元素
b、目标阶段:当前事件源本身的操作
c、冒泡阶段:从内到外依次触发相关的行为(最常用的阶段)

使用DOM 0级事件绑定给元素的某一个行为绑定的方法,都是在行为触发后的冒泡阶段把方法执行的

image.png

onmouseover/onmouseout与onmouseenter/onmouseleave区别:
都是鼠标滑上去的行为,但是onmouseenter浏览器默认阻止了它的冒泡传播(这一级的onmouseenter行为触发,不会传播到它的上一级);
而onmouseover是存在冒泡传播的,想要阻止的话只能自己写代码阻止

事件委托(shijiandaili):

利用事件的冒泡传播机制(触发当前元素的某个行为,它父级所有元素的相关行为都会被触发),如果一个容器中有很多元素都要绑定点击事件,我们没有必要一个个的绑定了,只需要给最外层的容器绑定一个点击事件即可,在这个方法执行的时候,通过事件源的区分来进行不同的操作

document.body.onclick=function(e){
      e=e||window.event;
      e.target=e.target||e.srcElement;
      console.log(e.target.id);
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 196,200评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,526评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,321评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,601评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,446评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,345评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,753评论 3 387
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,405评论 0 255
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,712评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,743评论 2 314
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,529评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,369评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,770评论 3 300
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,026评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,301评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,732评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,927评论 2 336

推荐阅读更多精彩内容

  • 总结: 鼠标事件 1.click与dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r阅读 1,592评论 2 10
  • 第1章 鼠标事件 1-1 jQuery鼠标事件之click与dbclick事件 用交互操作中,最简单直接的操作就是...
    mo默22阅读 1,250评论 0 6
  • 以下文章为转载,对理解JavaScript中的事件处理机制很有帮助,浅显易懂,特分享于此。 什么是事件? 事件(E...
    jxyjxy阅读 3,021评论 1 10
  • 那一年,我五岁,你尚未出生,可我已经开始讨厌你了。 早熟的我知道,你的出生会让我失去专宠的地位,你将抢去爸妈的宠爱...
    唯妈养娃阅读 250评论 4 1
  • 【Gerber嘉宝是美国著名的宝宝食品品牌】酸奶小溶豆,一口一个,酸酸甜甜,入口即化。里面富含多种营养元素,100...
    Lily5566阅读 937评论 0 0