JS学习记录（事件补充一）

Posted 2020-10-01 天上一片红

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS学习记录（事件补充一）相关的知识，希望对你有一定的参考价值。

html事件
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #container{
            height: 800px;
            background-color: red;
        }
    </style>
    <!--<script>
        function loaded() {
            var name1 = document.getElementById("name");
            name1.onclick = function () {
                alert("洗刷刷");
            }
        };
    </script>-->
    <title>HTML事件</title>
</head>
<body onload="loaded()">
<input type="text" id="name" onselect="mySelect(this.id)">
<input type="text" id="name2" onchange="myChange(this.id)">
<input type="text" id="name3" onfocus="myFocus()">
<div id="container"></div>
</body>
<script>
    window.onload = function () {
      console.log("文档加载完毕！");
    };
    /*window.onunload = function () {
        alert("文档被关闭！");
    };*/
    function mySelect(id) {
        var text = document.getElementById(id).value;
        console.log(text);
    }
    function myChange(id) {
        var text = document.getElementById(id).value;
        console.log(text);
    }
    function myFocus() {
        console.log("得到光标！");
    }
    window.onresize = function () {
        console.log("窗口变化！")
    };
    var name1 = document.getElementById("name");
    name1.onclick = function () {
        alert("洗刷刷");
    };
    window.onscroll = function (){
        console.log("滚动条滚动");
    }
</script>
</html>

结果图：

得到括号内的效果

事件模型
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>事件模型</title>
</head>
<body>
<!--脚本模型：行内绑定-->
<button onclick="javascript:alert(\'Hello\')">Hello</button>
<!--内联模型-->
<button onclick="showHello()">Hello！</button>
<!--动态绑定-->
<button id="btn">Hello1！</button>
</body>
<script>
    function showHello() {
        alert("Hello！")
    }
    var btn = document.getElementById("btn");
    /*DOM0：同一个元素，同类事件只能添加一个，
            如果添加多个，后面添加的会覆盖之前添加的*/
    /*btn.onclick = function () {
        alert("Hello1!");
    };*/
    /*DOM2:可以给同一个元素添加多个同类事件*/
    /*btn.addEventListener("click",function () {
        alert("Hello")
    });
    btn.addEventListener("click",function () {
        alert("Hello1!")
    });*/
    /*不同浏览器的兼容写法*/
    if (btn.attachEvent){/*IE*/
        btn.attachEvent("onclick",function () {
            alert("IE Hello")
        });
    }else{                            /*W3C*/
        btn.addEventListener("click",function () {
            alert("W3C Hello")
        });
    }
</script>
</html>

结果图：

事件冒泡
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #div1{
            width: 400px;
            height: 400px;
            background-color: red;
        }
        #div2{
            width: 300px;
            height: 300px;
            background-color: yellow;
        }
        #div3{
            width: 200px;
            height: 200px;
            background-color: darkcyan;
        }
        #div4{
            width: 100px;
            height: 100px;
            background-color: darkorange;
        }
    </style>
    <title>事件冒泡</title>
</head>
<body>
<div id="div1">
    <div id="div2">
        <div id="div3">
            <div id="div4">

            </div>
        </div>
    </div>
</div>
</body>
<script>
    /*事件冒泡：子元素的事件发生以后，会引发父元素同类事件
     * 事件捕获：在参数function后面加上参数true；事件的触发方式是从父元素网子元素*/
    var div1 = document.getElementById("div1");
    div1.addEventListener("click",function () {

        alert("div1");
    });
    var div2 = document.getElementById("div2");
    div2.addEventListener("click",function () {
        alert("div2");
    });
    var div3 = document.getElementById("div3");
    div3.addEventListener("click",function (event) {
        event.stopPropagation();
        alert("div3");
    });
    var div4 = document.getElementById("div4");
    div4.addEventListener("click",function (event) {
        event.stopPropagation();
        alert("div4");
    });
</script>
</html>

结果图：

阻止默认事件
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止默认事件</title>
</head>
<body>
<a href="http://www.baidu.com" onclick="stopA(event)">百度</a>
</body>
<script>
    function stopA(event) {
        if(event.preventDefault()){
            event.preventDefault();  /*w3c*/
        }else {
            event.returnValue = false; /*IE*/
        }
        event.preventDefault();
        alert("老子就是不让你跳转！")
    }
</script>
</html>

结果图：

以上是关于JS学习记录（事件补充一）的主要内容，如果未能解决你的问题，请参考以下文章