JavaScript-DOM（3）

時間 2019-11-19

原文原文鏈接

事件處理

事件類型

<body>
    <!--方式1：直接帶html代碼中嵌入js代碼-->
    <button onclick="console.log('事件1')">按鈕1</button>
    
    <!--方式2：在html代碼中直接給事件處理賦予一個函數調用語句-->
    <!--this:在當前指向的是當前標籤-->
    <button onclick="func(this)">按鈕2</button>
    
    <!--方式3：DOM 0 級事件-->
    <button id="b3">按鈕3</button>
    <button id="b4">按鈕4</button>
    
    <!--方式4：DOM2級事件處理-->
    <!--主流方式-->
    <script type="text/javascript">
        /*
         this在標籤看成實參時 指該標籤
         在js的函數處理中， 指的是window
         在DOM0級事件處理函數中，指的是當前執行事件的標籤
         在DOM2級事件處理函數中，指的也是當前執行事件的標籤
        */
        // 方式2
        
        function func (obj) {
            console.log('事件2');
            console.log(obj);
            console.log(this);
        }
        
        // 方式3：添加onclick屬性
        var b3 = document.getElementById('b3');
        // 添加事件屬性及賦值
        b3.onclick = fun3;
        function fun3 () {
            console.log('事件3');
            console.log(this);         
        }
        
        // 方式4：添加事件監聽
        // addEventListener('事件的執行方式', 執行內容)
        var b4 = document.getElementById("b4");
        b4.addEventListener('click', function(){
            console.log('事件4');
            console.log(this);
        }, false);
        
        b4.addEventListener('click', fun5)
        function fun5(){
            console.log('事件5');
        }
        // 移除事件監聽
        b4.removeEventListener('click', fun5);
        
        
        /*
         移除事件
         方式1：不能移除
         方式2：不能移除
         方式3： onclick=null
         方式4：removeEventListener()*/
    </script>
</body>

焦點事件

// 焦點事件通常用於輸入框
var input1 = document.getElementById("i1");

// 獲取焦點
input1.addEventListener('focus',func1);
function func1(){
    i1.placeholder = '請輸入帳號';
}
input1.addEventListener('blur', func2);
function func2(){
    i1.removeAttribute('placeholder');
}

單擊雙擊事件

<button id="b1">單擊</button>
<button id="b2">雙擊</button>
<script type="text/javascript">
    var b1 = document.getElementById("b1");
    var b2 = document.getElementById("b2");
    b1.addEventListener('click',func1);
    function func1 () {
        alert('heihei');
    }
    //雙擊
    b2.addEventListener('dblclick', func2);
    function func2 () {
        alert('papa');
    }
    
    // b2.onclick = func2;
    // b2.ondblclick = func2;
    
</script>

鼠標事件

<script type="text/javascript">
    // 鼠標事件
    // mouseover mouseup  mousedown mouseout
    // mouseleave  mouseenter
    var d1 = document.getElementById("d1");
    d1.addEventListener('mousedown',func1);
    d1.addEventListener('mouseup', func2);
    function func1(){
        console.log('鼠標在div範圍內按下了');
    }
    function func2 () {
        console.log('鼠標在div範圍內被擡起了')
    }
    
    
    d1.addEventListener('mouseover',func3);
    d1.addEventListener('mouseout', func4);
    function func3(){
        console.log('鼠標在div範圍內');
    }
    function func4 () {
        console.log('鼠標在div範圍外')
    }
    
    //d1.addEventListener('mousemove', func5);
    function func5(){
        console.log('鼠標在div中移動');
    }
    
    d1.addEventListener('mouseenter', fun6)
    d1.addEventListener('mouseleave', fun7)
    
    function fun6 () {
        console.log('鼠標進入了');
    }
    function fun7 (){
        console.log('鼠標離開了');
    }
</script>

鍵盤事件

<script type="text/javascript">
     // 鍵盤事件通常直接添加到文檔上
     // keydown 任意按鍵
     // keyup  任意按鍵
     // keypress 除alt shift control numLock capsLock f1-f12 方向鍵

    document.body.addEventListener('keydown', function(e){
        console.log('鍵盤按下了');
        var ev = e || window.event;
        console.log(ev);
        // 獲取按鍵編碼
        console.log(ev.keyCode);
        // shift
        console.log(ev.shiftKey);
        // alt
        console.log(ev.altKey);
        // ctrl
        console.log(ev.ctrlKey);
    })
    
    document.body.addEventListener('keyup', function(){
        console.log('鍵盤擡起了');
    })
    
    document.body.addEventListener('keypress', function(){
        console.log('keypress');
    })
</script>

event事件

鼠標事件的event對象

event事件

<button id="b1">按鈕</button>
<script type="text/javascript">
    var b1 = document.getElementById("b1");
    // 添加點擊事件
    // 每種事件的執行都自帶一個事件對象 事件對象包含該事件的全部信息
    b1.onclick = function(e){
        // 瀏覽器適配
        var ev = e || window.event;
        
        // 獲取當前瀏覽器可視窗口的座標
        console.log(ev.clientX, ev.clientY);
        // 獲取當前頁面的座標
        console.log(ev.pageX, ev.pageY);    // 比較經常使用
        // 獲取當前電腦屏幕的座標
        console.log(ev.screenX, ev.screenY);
    }
    
    b1.addEventListener('dblclick', function(e){
        var ev = e || window.event;
        console.log(ev);
    })

組合鍵盤

<!--control + A-->
<script type="text/javascript">
    document.addEventListener('keydown', func)
    
    function func(e){
        var ev = e || window.event;
        if (ev.keyCode == 65 && ev.ctrlKey){
            randomColor(document.body); 
        }
    }
</script>

事件的冒泡與捕獲

事件流的概念

事件流

<div id="d1">
    <div id="d2">
        <div id="d3"></div>
    </div>
</div>
<script type="text/javascript">
    d1 = document.getElementById("d1");
    d2 = document.getElementById("d2");
    d3 = document.getElementById("d3");
    
    // 事件冒泡 ： d3-d2-d1
    // 事件捕獲 ： d1-d2-d3
    // 默認爲事件冒泡狀態
    // 當第三個參數爲true 爲事件捕獲
    
    d1.addEventListener('click', func, false);
    d2.addEventListener('click', func, false);
    d3.addEventListener('click', func, false);
    
    function func (e) {
        console.log(this.id);  // d3  d2  d1 冒泡階段 由內到外
        this.style.backgroundColor = 'orange';
    }
</script>

阻止事件冒泡或默認事件

事件的經常使用屬性

<!--若是父標籤不設置高度，默認父標籤的高度爲零，若是該標籤
有子標籤，子標籤有高度設置，那麼父標籤的高度與子標籤的高度一致
父標籤被子標籤撐開了-->
<body style="height: 1000px">
    <div id="d1" style="background: red;width: 200px;height: 200px;"></div>
    <input type="text" id="i1" />
    <a href="http://www.baidu.com" id="a1">非法網站</a>
    <script type="text/javascript">
        // 給body添加點擊事件，更改body的顏色爲green
        document.body.onclick = func; 
        
        // 給div添加點擊事件，更改div的顏色爲green
        var d1 = document.getElementById("d1")
        d1.onclick = func;
        
        function func(e){
            var ev = e || window.event
            this.style.backgroundColor = 'green';
            // 阻止冒泡行爲
            ev.stopPropagation();
        }
        
        var i1 = document.getElementById("i1");
        i1.onclick = function(e){
            var ev = e || window.event;
            ev.stopPropagation()
        }
        
        var a1 = document.getElementById("a1");
        a1.onclick = function(e){
            var ev = e || window.event;
            ev.stopPropagation();                
            // 非法網站：提示是否繼續訪問
            var result = confirm('您肯定繼續訪問非法頁面？')
            if(result == false){
                // 終止默認事件
                ev.preventDefault();
            }
            
        }
        
        
    </script>
</body>

拖拽

<script type="text/javascript">
    // page 或 client 都能作
    var div1 = document.getElementById('div1');
    div1.onmousedown = function(e) {
        var ev = e || window.event
        var disX = ev.pageX - div1.offsetLeft;
        var disY = ev.pageY - div1.offsetTop;
        //var disX = ev.clientX - parseInt(getComputedStyle(div1, null).left);
        //var disY = ev.clientY - parseInt(getComputedStyle(div1, null).top);

        document.body.onmousemove = function(e) {
            var ev = e || window.event
            div1.style.left = ev.pageX - disX + 'px';
            div1.style.top = ev.pageY - disY + 'px';
        }
        document.body.onmouseup = function() {
            document.body.onmousemove = null;
            document.body.onmouseup = null;
        }
    }
</script>

1. javascriptDom
2. web總結之javaScriptDOM
3. javaScriptDOM事件學習
4. JavaScriptDOM事件學習打卡
5. 鬆軟科技課堂:JavaScriptDOM - 改變 CSS
6. 第8天：javascriptDOM小案例、onmouseover 、onmouseout
7. JavaScriptDOM的節點操做筆記
8. 3-3
9. 3/3/2018
10. Quiz 3 in lecture 3
更多相關文章...
• R 數組 - R 語言教程
• W3C CSS 活動 - W3C 教程
• RxJava操作符（二）Transforming Observables
• 算法總結-滑動窗口

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。