JS权威指南——17章事件

最新推荐文章于 2022-02-25 16:22:55 发布

lqy136362687

最新推荐文章于 2022-02-25 16:22:55 发布

阅读量146

点赞数

分类专栏： js权威指南——总结文章标签： js事件

本文链接：https://blog.csdn.net/lay136362687/article/details/81157680

版权

js权威指南——总结专栏收录该内容

4 篇文章 0 订阅

订阅专栏

17.1事件类型

表单事件

focus和blur事件不冒泡
IE定义了focusin和focusout可以冒泡，可用于替代focus和blur事件
input事件//除ie外

window事件

unload，load，beforeunload
onerror
基于window的focus和blur
调整窗口大小，resize
滚动窗口触发 scroll（也可在任意能够滚动的元素上触发）

鼠标事件

clientX和clientY指定鼠标在窗口坐标的位置。在点击的最深嵌套的元素触发，并冒泡到最顶层

在mousedown和mouseup事件队列后会触发click事件。
contextmenu事件可获得右键点击通知
mouseover（冒泡）和mouseenter（不冒泡）

<div id="outerBox">OuterBox
    <div id="innerBox">InnerBox
    </div>
</div>

mouseover()
1. When mouse enters the “outerBox”, fire the “outerBox” event.
2. When mouse enters the “innerBox”, fire the “innerBox” event, follow by the “outerBox” event.
3. When mouse enters back to the “outerBox”, fire the “outerBox” event.

mouseenter()
1. When mouse enters the “outerBox”, fire the “outerBox” event.
2. When mouse enters the “innerBox”, fire the “innerBox” event.
3. When mouse enters back to the “outerBox”, no event will fire.

滚轮mousewheel,wheel

键盘事件

keydown，keypress

17.2 注册事件处理程序

设置js对象属性为事件处理程序

 var elt=document.getElementById("id");
 elt.onsubmit=function(){return};

事件处理程序属性的名字由“on”跟事件名；区分大小写并都为小写
缺点：只能最多有一个事件处理程序

addEventListener和attachEvent

addEventListener()

接受3个参数
1. 事件类型（不需前缀‘on’）
2. 指定类型事件发生时应该调用的函数
3. 默认false（冒泡）；否则为true（捕获）

removeEventListener

attachEvent() (IE8及以下)

与addEventListener的差别
- 不支持事件捕获
- 第一个参数需要前缀‘on’
- 允许相同的事件处理程序函数注册多次。调用的函数的次数和注册函数的次数相同
  取消事件detachEvent

17.3 事件处理程序的调用

事件处理程序的参数

//对ie进行兼容
function handler(event){
    event=event||winndow.event
}

事件处理程序的运行环境

在addEventListener（）和属性调用中，事件处理程序中，this指向事件目标。而在IE中，attachevent，tthis指向window。

function addEvent(target,type,handler){
    if(target.addEventListener){
        target.addEventListener(type,handler);
    }else{
        target.attachEvent('on'+type,function(){
            return handler.call(target,window.event)
        })
    }
}
//不能被detach删除

事件处理程序调用顺序

对象属性设置或HTML属性注册的处理程序优先调用（基本上是冒泡）
addEventListener注册的处理程序按注册顺序调用（看第3个参数）
attachEvent注册的处理程序可能按顺序调用（不支持事件捕获）

事件传播

事件捕获，常用于鼠标拖放事件

  从document开始触发事件，一直向深嵌套到事件元素

事件处于目标元素上。

事件冒泡

 与事件捕获相反，从目标元素进行触发事件，并向上冒泡

事件冒泡与事件捕获
如果使用事件捕获后，将不再对已触发的元素进行触发。
如例子

    <html>
   <head>
    <style>
        div {margin:0};
    </style>
   </head>
   <body>
      <div id="id1" style="background:red;width:300px;height:300px">
            <div id="id2" style="background:blue;width:200px;height:200px">
                <div id="id3" style="background:green;width:100px;height:100px">
                </div>
            </div>

      </div>
      <script>
        var id1=document.getElementById('id1');
        var id2=document.getElementById('id2');
        var id3=document.getElementById('id3');
        function warning(event){
            alert(event.currentTarget.id);
        }
        id1.addEventListener("click",warning,true);
        id2.addEventListener("click",warning,false);
        id3.addEventListener("click",warning,true);
      </script>
   </body>
</html>
//点击d3元素后
先后出现d1,d3,d2;

事件取消

在addRventListener的浏览器中，通过调用事件对象的preventDefault(),取消事件的默认操作。 event.stopPropagation可以阻止事件传播
在IE9之前，使用事件对象的returnValue=false达到效果。event.cancelBubble=true阻止事件传播
dom规范草案，stopImmediatePropagation()函数用于阻止剩余的事件处理函数的执行，并防止当前事件在DOM树上冒泡。