js事件的学习

北辰黎云

于 2022-08-10 20:31:25 发布

阅读量107

点赞数

分类专栏：记录学习日常文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/weixin_54634032/article/details/126270223

版权

记录学习日常专栏收录该内容

4 篇文章 0 订阅

订阅专栏

鼠标和键盘相关

    <script>
        function danji(){
            alert("单击");
        }
        function shuangji(){
            alert("双击");
        }
        function shubiaoyidong(dd){
            dd.style.width = "400px";
            dd.style.height = "400px";
        }
        function shubiaoyichu(dd){
            dd.style.width = "200px";
            dd.style.height = "200px";
        }
        function shubiaoanxia(dd){
            console.log("按下了");
        }
        function shubiaosongkai(dd){
            console.log("松开了");
        }
        function jianpankanxia(inputObj){
            console.log(inputObj.name);
        }
        function jianpantaiqi(inputObj){
            console.log(inputObj.type);
        }
    </script>
    <div style="width: 200px;height:200px;border: 2px red solid;" onclick="danji()" ></div>
    <div style="width: 200px;height:200px;border: 2px red solid;" ondblclick="shuangji()" ></div>
    <div 
    style="width: 200px;height:200px;border: 2px red solid;" 
    onmouseover="shubiaoyidong(this)"
    onmouseout="shubiaoyichu(this)"
    onmousedown="shubiaoanxia(this)"
    onmouseup="shubiaosongkai(this)"
    ></div>
    <input type="text" name="ljq" 
    onkeydown="jianpankanxia(this)"
    onkeyup="jianpantaiqi(this)"
    >

body和表单相关

<script>
    function change(){
        alert("弹出窗口");
    }
    function change1(){
        alert("窗口离开触发");
    }
    function change2(){
        console.log("页面滚动触发");
    }
    function change3(){
        console.log("改变页面大小触发");
    }
    //失去焦点
    function change4(inputObj){
        console.log(inputObj.value);
    }
    //获得焦点
    function change5(){
        console.log("获得焦点")
    }
    //监听改变事件
    function change6() {
        console.log("===========")
    }
    //表单提交
    function sub(){
        alert();
    }
</script>
<body onload="change();" onunload="change1()" onscroll="change2();" onresize="change3()">

    <form action="http://www.baidu.com" method="post" onsubmit="sub();">
        <input type="text" name="name" onblur="change4(this)"
        onfocus="change5();"
        onchange="change6()"
        />
        <input type="submit" value="提交">
    </form>
    
</body>

事件冒泡

<script>
        function div1(){
            alert("爸爸！")
        }
        function div2(e){
            alert("儿子！")
            e.cancelBubble = true;
        }
    </script>
    <div style="width: 200px;height:200px;background: red;" onclick="div1();">
        <div style="width: 100px;height:100px;background: blue;" onclick="div2(event)">
        </div>
    </div>
    <a href="javascript:;" onclick="alert('ssss')">超链接</a>