Js_10_2_事件1

最新推荐文章于 2022-08-12 22:15:40 发布

小风儿

最新推荐文章于 2022-08-12 22:15:40 发布

阅读量433

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/littlewindy520/article/details/67640318

版权

JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1.事件

<div id="myDiv"></div>
<script type="text/javascript">
    //JS事件
    document.onclick = function(ev){
        //1.每一个事件，都有一个事件对象，这个事件对象里包含这次事件发生的很多信息
        //console.log(ev);      
        //2.window.event 也代表的是事件对象跟上面的参数e 一样；
        //FireFox浏览器不支持window.event
        console.log(event);
        document.onkeydown = function(ev){
            var evObj = ev || window.event;
        }
    }
</script>

键盘事件
keyCode
获取用户按下键盘的哪个按键
<script>
document.onkeydown=function (ev)
{
    var oEvent=ev||event;

    alert(oEvent.keyCode);
};
</script>

例子：键盘控制Div移动

<style>
#div1 {width:100px; height:100px; background:#CCC; position:absolute;}
</style>
<script>
document.onkeydown=function (ev)
{
    var oEvent=ev||event;
    var oDiv=document.getElementById('div1');

    if(oEvent.keyCode==37)
    {
        oDiv.style.left=oDiv.offsetLeft-10+'px';
    }
    else if(oEvent.keyCode==39)
    {

        oDiv.style.left=oDiv.offsetLeft+10+'px';
    }
};
</script>

其他属性

ctrlKey、shiftKey、altKey
例子：提交留言
ctrl+回车 提交
<script>
window.onload=function ()
{
    var oTxt1=document.getElementById('txt1');
    var oTxt2=document.getElementById('txt2');
    oTxt1.onkeydown=function (ev){
        var oEvent=ev||event;
        if(oEvent.keyCode==13 && oEvent.ctrlKey){
            oTxt2.value+=oTxt1.value+'\n';
            oTxt1.value='';
        }
    };
};
</script>
</head>
<body>
<input id="txt1" type="text" /><br>
<textarea id="txt2" rows="10" cols="40"></textarea>
</body>

在form下方添加

<script type="text/javascript"> 
 var commenttextarea = document.getElementById('comment');  
 commenttextarea.onkeydown = function quickSubmit(e) {  
     if (!e) var e = window.event;  
     if (e.ctrlKey && e.keyCode == 13){  
         document.getElementById('submit').click();  
     }  
 };  
</script>

2.事件练习

<style type="text/css">
        #myDiv{
            width: 100px;
            height: 100px;
            background: green;
            position: absolute;
        }
    </style>
</head>
<body>
    <!--//1.新建1个HTML 点击某个位置 让div 移动到哪里-->
    <div id="myDiv"></div>
    <script type="text/javascript">
        var myDiv = document.getElementById("myDiv");
        document.onclick = function(ev){
            var evObj = ev || window.event;
            //如果ev 取不到值，则走 || 后面的代码， evObj 保存的就是事件对象
            //FF ev;  IE event
            console.log(evObj);
            myDiv.style.left = evObj.clientX + "px";
            myDiv.style.top = evObj.clientY + "px";
        }
    </script>
</body>

3.事件练习2

<style type="text/css">
    #myDiv{
        width: 300px;
        height: 200px;
        background: blue;
        position: absolute;
        left: 0;
        top: 0;
        transition: all 2s ease;
    }
</style>
</head>
<body>
<!--    点击让标签中心点和点击的点重合 -->
<div id="myDiv"></div>
<script type="text/javascript">
    var myDiv = document.getElementById("myDiv");
    document.onclick = function(ev){
        var evObj = ev || window.event;
        console.log(evObj);
        myDiv.style.left = evObj.clientX - myDiv.offsetWidth / 2 + "px";
        myDiv.style.top = evObj.clientY - myDiv.offsetHeight / 2 + "px";
    }
</script>
</body>

4.onmousemove

<script type="text/javascript">
    //鼠标移动事件，注意给哪个标签绑定
    document.onmousemove = function(ev){
        var evObj = ev || window.event;
        console.log(evObj);
    }
</script>
例子
<style type="text/css">
        #myDiv{
            width: 100px;
            height: 100px;
            background: green;
            position: absolute;
        }
    </style>
</head>
<body>
<!--    让圆形div中心点跟着鼠标移动-->
    <div id="myDiv"></div>
    <script type="text/javascript">
        var myDiv = document.getElementById("myDiv");
        //鼠标移动事件，注意给哪个标签绑定
        document.onmousemove = function(ev){
            var evObj = ev || window.event;
            myDiv.style.left = evObj.clientX - myDiv.offsetWidth / 2 + "px";
            myDiv.style.top = evObj.clientY - myDiv.offsetHeight / 2 + "px";
            console.log(evObj);

        }
    </script>
</body>

5.鼠标抬起和按下

<!--clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的垂直坐标。 客户区指的是当前窗口。-->
<script type="text/javascript">
    document.onmouseup = function(ev){
        var evObj = ev || window.event;
        console.log(evObj.clientX, evObj.clientY);
    }
    document.onmousedown = function(ev){
        var evObj = ev || window.event;
        console.log(evObj.clientX, evObj.clientY);
    }
    //清除一个事件
    document.onmousedown = null;
</script>

例子：
<style type="text/css">
        #myDiv{
            width: 100px;
            height: 100px;
            background: green;
            border-radius: 50px;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="myDiv"></div>
    <script type="text/javascript">
        var myDiv = document.getElementById("myDiv");
        myDiv.onmousedown = function(ev){
        document.onmousemove = function(ev){
            var evObj = ev || window.event;
            console.log(evObj);
            myDiv.style.left = evObj.clientX - myDiv.offsetWidth / 2 + "px";
            myDiv.style.top = evObj.clientY - myDiv.offsetHeight / 2 + "px";
            }
        }
        myDiv.onmouseup = function(){
            document.onmousemove = null;//清除事件
        }
        //切圆后，鼠标事件只有在可视区域内才生效
    </script>
</body>

多个div移动

<style type="text/css">
    div{
        width: 100px;
        height: 100px;
        position: absolute;
        border-radius: 100px;
    }
</style>
</head>
<body>
<script type="text/javascript">

    function createDiv(){
        for(var i = 0; i < 26; i ++){
            var theDiv = document.createElement("div");
            theDiv.style.background = randColor();
            document.body.appendChild(theDiv);
        }
    }
    createDiv();
    function randColor(){
        var r = Math.floor(Math.random() * (255 - 0 + 1) + 0);
        var g = Math.floor(Math.random() * (255 - 0 + 1) + 0);
        var b = Math.floor(Math.random() * (255 - 0 + 1) + 0);
        return "rgb(" + r +"," + g +"," + b +")";               
    }

    var divArr = document.getElementsByTagName("div");
    document.onmousemove = function(ev){

        for(var i = divArr.length - 1; i > 0; i--) {
            divArr[i].style.left = 
            divArr[i - 1].offsetLeft + 'px';
            divArr[i].style.top = 
            divArr[i - 1].offsetTop + 'px';
        }
        var evObj = ev || window.event;
        divArr[0].style.left = 
evObj.clientX - divArr[0].offsetWidth / 2 + 'px';
        divArr[0].style.top = 
 evObj.clientY - divArr[0].offsetHeight / 2 + 'px';
</script>

6.鼠标右键

<script type="text/javascript">
    document.oncontextmenu = function(ev){//鼠标右击事件
        var evObj = ev || window.event;
        console.log(evObj);
    }
</script>

例子：
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            li{
                list-style: none;
                width: 150px;
                background: gray;
                font-size: 20px;
                position: relative;
                text-align: center;
            }
            #ul1{
                position: absolute;
                display: none;
            }
            li>ul{
                display: none;
                position: absolute;
                left: 150px;
                top: 0;
            }

        </style>
    </head>
    <body>
        <ul id="ul1">
            <li>我是li1</li>
            <li>我是li2</li>
            <li>我是li3
                <ul id="ul2">
                    <li>我是li3下的li1</li>
                    <li>我是li3下的li2</li>
                    <li>我是li3下的li3</li>
                </ul>
            </li>
            <li>我是li4
                <ul id="ul3">
                    <li>我是li4下的li1</li>
                    <li>我是li4下的li2
                        <ul id="ul4">
                            <li>我是li4下的li1</li>
                            <li>我是li4下的li2</li>
                            <li>我是li4下的li3</li>
                        </ul>
                    </li>
                    <li>我是li4下的li3</li>
                </ul>
            </li>
            <li>我是li5</li>
        </ul>

        <script type="text/javascript">
            var myUL = document.getElementById("ul1");
            document.oncontextmenu = function(ev){
                var evObj = ev || window.event;
                myUL.style.display = "block";
                myUL.style.left = evObj.clientX + "px";
                myUL.style.top = evObj.clientY + "px";
                return false;
            }
            var liArr = document.getElementsByTagName("li");
            for(var i = 0; i < liArr.length; i++){
                liArr[i].onmouseover = function(){
                    this.style.background = "red";
                    var thisChildren = this.children;
                    if(thisChildren.length > 0){
                        console.log(thisChildren);
                        thisChildren[0].style.display = "block";
                    }
                }
                liArr[i].onmouseout = function(){
                    this.style.background = "gray";
                    var thisChildren = this.children;
                    if(thisChildren.length > 0){
                        thisChildren[0].style.display = "none";
                    }
                }
            }
        </script>

小风儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Js_10_2_事件1

1.事件<div id="myDiv"></div><script type="text/javascript"> //JS事件 document.onclick = function(ev){ //1.每一个事件，都有一个事件对象，这个事件对象里包含这次事件发生的很多信息 //console.log(ev); //2.
复制链接

扫一扫

专栏目录