事件处理-事件流-蒲公英云

事件处理-事件流

末蓝、 2022-06-11 08:29 427阅读 0赞

事件流——描述的是从页面中接受事件的顺序。

   IE----事件冒泡流
Netscape----事件捕获流
事件冒泡：即事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档） 
 事件捕获：不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。
 事件处理程序 1. HTML事件处理程序：
    缺点--JS代码和html代码紧密耦合，当需要修改时，JS 代码和 HTML 代码均需要修改
 2. DOM0级事件处理程序：
   较为传统的方式：把一个函数赋值给一个事件的处理程序属性
   用的最多的方法  比较简单，跨浏览器的优势
   修改时不影响html 3. DOM2级事件处理程序     DOM2级事件定义了两个方法：     用于处理指定和删除事件处理程序的操作     addEventListener()和removeEventListener()     接受三个参数：要处理的事件名,作为事件处理程序的函数和布尔值。     DOM0和DOM2的优点：可以添加多个事件处理程序 
 4. IE事件处理程序及跨浏览器解决      attachEvent() 添加事件      detachEvent() 删除事件           接受相同的两个参数 ：事件处理程序的名称和事件处理程序的函数                 不使用第三个参数的原因：IE8以及更早的浏览器版本只支持事件冒泡！ 5.  跨浏览器的事件处理程序         var eventUtil={
               //添加句柄
               addHandler:function(element,type,handler){
                   if(element.addEventListener){     
                       element.addEventListener(type,handler,false);
               }else if(element.attachEvent){
                   element.attachEvent('on'+type,handler);
               }else{
                element['on'+type]=handler;
               // element.οnclick==element['onclick'];
               }
            },
               //删除句柄
                    removeHandler:function(element,type,handler){
                   if(element.addEventListener){
                       element.removeEventListener(type,handler,false);
               }else if(element.attachEvent){
                   element.detachEvent('on'+type,handler);
               }else{
                element['on'+type]=null;
                //element.οnclick==element['onclick'];
               }
           }
       }
           eventUtil.addHandler(btn3,'click',showmessage);
           //eventUtil.removeHandler(btn3,'click',showmessage);
 事件对象          什么是事件对象？  在触发DOM上的事件时都会产生一个对象            事件对象event 
        1. DOM中的事件对象            (1). type属性  用于获取事件类型            (2). target属性  用于获取事件目标            (3). stopPropagation()方法  用于阻止事件冒泡            (4). preventDefault()方法  用于阻止事件的默认行为        2. IE中的事件对象            (1). type属性  用于获取事件类型            (2). srcElement属性  用于获取事件的目标            (3). cancelBubble属性  用于阻止事件冒泡                        设置为true表示阻止事件冒泡    设置为false表示不阻止事件冒泡            (4). returnValue属性  用于阻止事件的默认行为                         设置为false表示阻止事件的默认行为 事件类型      拖拽->鼠标跟随
    1、绑定鼠标点击事件
    2、获取鼠标坐标：clientX clientY (所有浏览器都支持此属性)
    3、为容器元素绑定onmousemove (表明可拖拽元素只在容器元素内可拖拽)
    4、将拖拽元素设置成绝对定位
    5、在onmousemove中改变拖拽元素的left、top (注意left、top的算法)
    6、设置left、top限定，禁止元素拖出窗口
    7、当前浏览器窗口宽度document.documentElement.clientWidth或document.body.clientWidth
    8、拖拽元素绑定onmouseup事件，在此事件中注销onmousemove事件，完成元素拖拽的释放效果
    注意可以把left、top理解成x轴、y轴 
  键盘事件        keyDown 当用户按下键盘上的［任意键］时触发，而且如果按住不放的话，会重复触发此事件
     keyPress 当用户按下键盘上的［字符键］时触发，而且如果按住不放的话，会重复触发此事件
     keyUp 当用户释放键盘上的键时触发