JS基礎入門篇（二十）—事件對象以及案例（二）

時間 2019-11-08

原文原文鏈接

案例一.點擊按鈕，選中input中的所有內容

select（）方法：選中所有。html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input,
        button{
            margin: 0;
            padding: 0;
            outline: none;
        }
        input{
            width:200px;
            height:40px;
            border:1px solid black;
            font-size: 20px;
        }
        button{
            width: 300px;
            line-height: 40px;
            vertical-align: top;
        }
    </style>
</head>
<body>
    <input type="text">
    <button>點擊此按鈕選中input的所有內容</button>
    <script>
        var input=document.getElementsByTagName("input")[0];
        var button=document.getElementsByTagName("button")[0];
        button.onclick=function () {
            input.select();
        }
    </script>
</body>
</html>

案例二.點擊按鈕，選中input中的所有內容，並複製到粘貼板上。

document.execCommand("copy");//複製到粘貼板上。code

點擊按鈕，選中並複製到粘貼板上，點擊查看效果以及代碼htm

<body>
<input type="text">
<button>點擊此按鈕選中input的所有內容</button>
<script>
    var input=document.getElementsByTagName("input")[0];
    var button=document.getElementsByTagName("button")[0];
    button.onclick=function () {
        input.select();//選中input的全部內容
        document.execCommand("copy");//複製到粘貼板上
    }
</script>
</body>

事件對象

事件：當用戶對頁面進行操做的交互時，會觸發對應元素的事件。
事件對象：對象

event
            當發生事件，執行事件處理函數的時候，該時刻的詳細信息。
        注意：若是函數是直接調用的，則沒有事件對象
        注意：不一樣事件中的event對象可能有不一樣

舉例說明：seo

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
    #box{
        width:100px;
        height:100px;
        background-color:red;
    }
</style>
</head>
<body>
<div id="box"></div>
<script>
    var box = document.getElementById("box");
//    box.onmouseover = fn;//打印undefined
//    box.onmousedown = fn;//打印undefined
    document.onkeydown = fn;//打印按下的鍵值
//    fn();//報錯
    function fn(){
//        console.log( typeof event );
        console.log( event.keyCode );
    }
</script>

</body>
</html>

案例三：模擬蘋果電腦菜單

點擊查看效果以及代碼！！！！事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .wrap{
            border:1px solid black;
            position: absolute;
            bottom:100px;
            text-align: center;
            width: 100%;
        }
        .wrap  div{
            width: 100px;
            height: 100px;
            background: cornflowerblue;
            display: inline-block;
            vertical-align: bottom;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <script>
        var wrap=document.getElementsByClassName("wrap")[0];
        var divs=wrap.getElementsByTagName("div");
        document.onmousemove=function () {
            for(var i=0;i<divs.length;i++){
                calc( divs[i],event);
            }
        }
        function calc( obj,mouseEvent ){
            var objPos = {
                //offsetLeft：相對於最近定位父級定位元素
                x: obj.offsetLeft + 50,
                //obj.getBoundingClientRect().top：距離文檔頂部位置
                y: obj.getBoundingClientRect().top + 50
            }//元素中心點座標
            var mosPos = {
                x: mouseEvent.clientX,
                y: mouseEvent.clientY
            }//鼠標所在位置
            var dis = Math.sqrt( Math.pow( objPos.x-mosPos.x,2 ) + Math.pow( objPos.y-mosPos.y,2 ) );
            var scale = 1;
            //當鼠標離原點中心距離小於200時，則放大
            if( dis < 200 ){
                scale = (200 - dis) / 200 + 1;
            }
            obj.style.width = 100 * scale + "px";
            obj.style.height = 100 * scale + "px";
        }
    </script>
</body>
</html>

相關標籤/搜索

每日一句

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