JavaScript事件对象

什么是event对象

Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用,函数不会在事件发生前被执行!

event对象-事件添加方法

1、事件有DOM0, DOM2的区分。

DOM0就是直接通过 onClick写在html里面的事件,例: <input onClick="alert(1)" />、JS写onClick=function(){}函数

    DOM2是通过addEventListener 绑定/监听 事件 例:document.getElementById("myTest").addEventListener("click",function(){alert(1)}, false);

event对象-事件添加方法

监听方法

1、有两个方法用来添加和移除事件处理程序:

     addEventListener()和removeEventListener()。

它们都有三个参数:第一个参数是事件名(如click);第二个参数是事件处理程序函数;  第三个参数如果是true则表示在捕获阶段调用,为false表示在冒泡阶段调用。

 addEventListener():可以为元素添加多个事件处理程序,触发时会按照添加顺序依次调用。例:document.getElementById("Test").addEventListener("click",function(){alert(1)}, false);

【注】removeEventListener():不能移除匿名添加的函数。

冒泡与捕获

DOM2级包含3个事件:事件捕获阶段、处于目标阶段和事件冒泡阶段

例 :<span><a></a></span>

点击a后capturing(捕捉)阶段事件传播会从document-> span->a,然后发生在a,最后bubbling(冒泡)阶段事件传播会从a->span->document 。

例:<div><p>元素</p></div>。这两个元素都绑定了click事件,如果用户点击了p,它在div和p上都触发了click事件,那这两个事件处理程序哪个先执行呢?事件顺序是什么?

div先触发,这就叫做事件捕获。

事件捕获:当你使用事件捕获时,父级元素先触发,子级元素后触发,即div先触发,p后触发。

p先触发,这就叫做事件冒泡

事件冒泡:当你使用事件冒泡时,子级元素先触发,父级元素后触发,即p先触发,div后触发。

【注】选择绑定事件时采用事件捕获还是事件冒泡,方法就是绑定事件时通过addEventListener函数,它有三个参数,第三个参数若是true,则表示采用事件捕获,若是false,则表示采用事件冒泡。

Event相关方法与属性

1、event.stopPropagation():终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点

2、event.preventDefault() :取消事件的默认动作(a标签的href)。

3、event.clientX、event.clientY:鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性

4、event.offsetX、event.offsetY:鼠标相对于事件源元素(触发事件的元素)的X,Y坐标,只有IE事件有这2个属性,标准事件没有对应的属性。

 与event.offsetLeft、event.offsettop一样

5、event.screenX、event.screenY:鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性

6、event.keyCode:获得按键的code值

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,643评论 1 11
  • 绑定事件的两种方式/DOM事件的级别 讲一下注册事件的两种方式,我们以onclick事件为例。 DOM0的写法:o...
    醋留香阅读 784评论 0 3
  • 在触发DOM上的某个事件时,会产生一个事件对象event。这个对象中包含着所有与事件有关的信息。包括导致事件的元素...
    Miss____Du阅读 5,168评论 0 7
  • event(事件)对象 1、定义:用来记录一些事件发生时的相关信息的对象 事件是用户在某些内...
    busyfish阅读 677评论 0 0
  • 春节临近,你的公司也开始筹备年会了吗?在年会上,同事聚餐总是少不了的,大家因为一年的辛苦而聚在一起,为了一年的工作...
    运营狮训练营阅读 2,238评论 1 2

友情链接更多精彩内容