初学--事件 小结0.1

事件学习小结

事件的定义：浏览器自动触发的或用户手动触发的，页面中元素状态的改变

            

当事件执行一项任务--绑定事件处理函数,当事件发生时，自动调用这个函数

     本质：是元素对象上一个事件名属性

 

绑定最优方式：在js中添加事件监听对象

元素对象.addEventListener(“事件名”,处理函数)

事件名本来没有on，为了和其他属性区分，才加on前缀

一个保存元素+事件名+处理函数一套组合的对象

从一个元素上移除处理函数：

               元素对象.removeEventListener(“click”,处理函数)  可能需要被移除的处理函数必须要有名称

事件模型：从点击元素触发事件开始，到事件处理函数执行完，期间发生的一切事情

DOM标准规定，期间经历三件事

1. 捕获阶段：由外向内，记录各级父元素上的处理函数
2. 目标触发：先触发最初发生事件的元素上的处理函数

             目标元素(target): 最初发生事件的实际想点击的元素

1. 冒泡阶段：由内向外，依次执行捕获阶段记录的父元素上的事件处理函数。

事件对象  ：当事件发生时，浏览器自动创建的，封装事件信息和操作事件的API 的对象 

事件对象总是作为处理函数的第一个参数传入处理函数中。

功能：

1. 停止冒泡(Propagation): e.stopPropagation()
2. 利用冒泡(事件委托/事件代理)

当多个平级子元素都需要绑定相同的事件时，只要在父元素上绑定一次事件处理函数。所有孩子就可冒泡共用。

e.target可自动获得实际点击的目标子元素、且不随冒泡而改变

获取元素标签名：元素.nodeName  但nodeName返回的是大写标签名

 

阻止默认行为：

  e.preventDefault();

 

获得鼠标的坐标:

    事件对象中包含3组坐标:

     1. 相对于整个屏幕左上角的坐标:

        e.screenX    e.screenY

     2. 相对于文档显示区左上角的坐标:

        e.clientX     e.clientY

     3. 相对于当前所在元素左上角的坐标:

        e.offsetX     e.offsetY