javascript---33--event對象事件監聽

event對象冒泡與捕獲

<style>
    *{
        padding: 0;
        margin: 0;
    }
      .box{
          width: 100px;
          height: 100px;
          background-color: #f66;
      }

  </style>
</head>
<body>
    <div class="box"></div>
</body>
<script>
    var oBox =document.getElementsByClassName("box")[0];
    oBox.abc =function(){
        alert("自定義屬性");
    }
    oBox.abc();//這樣就會自執行 彈出“自定義屬性”
    oBox.onclick=function () {
        alert("點擊事件");
    }
</script>

DOM 0級

onclick 被認爲是元素的屬性方法

oBox.onclick=function () {
    console.log(this);    
    }

此時打印的是節點

模擬默認點擊事件

 oBox.onclick=function (a) {
       console.log(a);
    }

默認爲MouseEvent {isTrusted: true, screenX: 89, screenY: 101, clientX: 89, clientY: 35, …}event 事件對象默認傳參給函數的第一個參數保存了觸發事件的參數：事件類型ele.type 鼠標位置節點

oBox.abc =function(a){
       console.log(a)
    }

這樣顯示undefined 沒有event事件對象

oBox.onclick=function (a) {
       console.log(a);
    }
    oBox.click();

就會觸發事件函數 MouseEvent {isTrusted: false, screenX: 0, screenY: 0, clientX: 0, clientY: 0, …}

ie8不傳event參數兼容寫法

oBox.onclick=function (event) {
        event =event||window.event;//IE低版本瀏覽器會默認掛載到window下的event屬性裏   這是一個全局對象
       console.log(event);
    }
    oBox.click();

DOM二級事件

 oBox.onclick=function (event) {
        event =event ||window.event;//IE低版本瀏覽器會默認掛載到window下的event屬性裏   這是一個全局對象
       console.log("你好");
    }
    oBox.onclick=function (event) {
        event =event ||window.event;//IE低版本瀏覽器會默認掛載到window下的event屬性裏   這是一個全局對象
        console.log("不好");
    }

這樣後面的事件會覆蓋前面的點擊事件

主流瀏覽器 addEventListener()

第一個參數事件類型：click
第二個參數事件函數:
第三個參數是否捕獲

var oBox =document.getElementsByClassName("box")[0];
   oBox.addEventListener("click",function (e) {
        console.log("1",this)
   },false);
    oBox.addEventListener("click",function (e) {
        console.log("2",this)
    },false);

這樣可以同時觸發兩個事件

removeEventListener()

第一個參數事件類型：click
第二個參數事件函數:
第三個參數是否捕獲 true 使用捕獲 false 使用冒泡

var oBox =document.getElementsByClassName("box")[0];
    var fn1 =function (e) {
        console.log("1",this)
    };
   oBox.addEventListener("click",fn1,false);
    document.ondblclick = function(){
        console.log("取消");
        oBox.removeEventListener("click",fn1,false)
    }

會註銷事件雙擊等於兩次單擊所以會出現單擊事件但是雙擊之後事件註銷

 var oBox =document.getElementsByClassName("box")[0];
    var fn1 =function (e) {
        console.log("1",this);
        this.removeEventListener("click",fn1,false);
    };
   oBox.addEventListener("click",fn1,false);

只能點擊一次

註冊事件傳的參數要和註銷事件傳的參數一一對應

 var oBox =document.getElementsByClassName("box")[0];
    var fn1 =function (e) {
        console.log("1",this);
        this.removeEventListener("click",fn1,true);
    };
   oBox.addEventListener("click",fn1,false);

這樣就不會註銷單擊事件了

捕獲和冒泡的區別

冒泡從底層一層一層往上冒

var oBox =document.getElementsByClassName("box")[0];
    var capture =false;
    document.addEventListener("click",function () {
        console.log("document點擊");
    },capture);
    document.body.addEventListener("click",function () {
        console.log("body點擊");
    },capture);
   oBox.addEventListener("click",function () {
       console.log("box點擊");
   },capture);

觸發順序 box點擊 body點擊 document點擊

捕獲從最頂層開始觸發到底層然後回到頂層

 var oBox =document.getElementsByClassName("box")[0];
    var capture =true;
    document.addEventListener("click",function () {
        console.log("document點擊");
    },capture);
    document.body.addEventListener("click",function () {
        console.log("body點擊");
    },capture);
   oBox.addEventListener("click",function () {
       console.log("box點擊");
   },capture);

document點擊 body點擊 box點擊

只想box觸發停止冒泡

var oBox =document.getElementsByClassName("box")[0];
    var capture =false;
    document.addEventListener("click",function () {
        console.log("document點擊");
    },capture);
    document.body.addEventListener("click",function () {
        console.log("body點擊");
    },capture);
   oBox.addEventListener("click",function (e) {
       e.stopPropagation();
       console.log("box點擊");
   },capture);

這樣只會打印box點擊

捕獲取消事件的傳遞

 var oBox =document.getElementsByClassName("box")[0];
    var capture =true;
    document.addEventListener("click",function () {
        console.log("document點擊");
    },capture);
    document.body.addEventListener("click",function (e) {
        e.stopPropagation();
        console.log("body點擊");
    },capture);
   oBox.addEventListener("click",function (e) {

       console.log("box點擊");
   },capture);

這樣點擊box 打印的是document點擊 body點擊

IE 瀏覽器默認爲冒泡

attachEvent()

第一個參數事件類型：onclick
第二個參數事件函數

oBox.attachEvent("onclick",function () {
        console.log(this);
    });

this指向window

取消事件detachEvent()

var fn1 =function(){
        console.log(1);
    }
    oBox.attachEvent("onclick",fn1);
    document.ondblclick =function () {
        oBox.detachEvent("onclick",fn1);
    }

雙擊事件等於兩次單擊事件怎麼解決雙擊時不觸發單擊

document.onclick =function(){
        timer =setTimeout(function () {
            console.log("單擊");
        },300);
    }
    document.ondblclick =function () {
        console.log("雙擊");
        clearTimeout(timer);
    }

但是不推薦

取消冒泡

var fn1 =function(e){
        e =e||window.event;
        e.cancelBubble =true;
        console.log(1);
    }
    oBox.attachEvent("onclick",fn1);
    var timer;
    document.onclick =function(){
        timer =setTimeout(function () {
            console.log("單擊");
        },300);
    }

監聽事件兼容方法初級版

eventBind(box,"click",function (event) {
        console.log("box點擊");
        eventBind(this,"click",false);
    },false);
    /*ele 元素節點
    * event事件類型
    * Handel 處理事件函數
    * capture 是否爲捕獲
    * */
    function eventBind(ele,event,handle,capture) {
        //包裝函數做處理  用於取消函數和this指向問題
        ele["event"+event] = handle;

        //先判斷瀏覽器是否爲主流瀏覽器
        if (ele.addEventListener){
            ele.addEventListener(event,ele["event"+event],capture);
        }else if (ele.attachEvent){
            ele["event"+event] =function(){
                handle.call(ele,window.event)
            };
            ele.attachEvent("on"+event,ele["event"+event]);
        }
    }
    //註銷事件
    function eventUnbind(ele,event,capture) {
        if (ele.removeEventListener){
            ele.removeEventListener(event,ele["event"+event],capture);
        }else if (ele.detachEvent){
            ele.detachEvent("on"+event,ele["event"+event]);
        }
    }
</script>

javascript---33--event對象事件監聽

event對象冒泡與捕獲

DOM二級事件

捕獲和冒泡的區別

IE 瀏覽器默認爲冒泡

監聽事件兼容方法初級版

Python實現大麥網搶票的四大關鍵技術點解析

salesforce零基礎學習（一百三十八）零碎知識點小總結（十）

javascript--39--拓展

javascript第三天---標籤內的屬性和數組

javascript 第七天---運算符

javascript--13---閉包

javascript--第五天---獲取對象的其他方式

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

javascript---33--event對象事件監聽

event對象 冒泡與捕獲

DOM二級事件

捕獲和冒泡的區別

IE 瀏覽器 默認爲冒泡

監聽事件兼容方法初級版

event對象冒泡與捕獲

IE 瀏覽器默認爲冒泡