JavaScript学习笔记（03异常和事件-P64-P68）

 

 

 示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <input type="text" id="txt" />
    <input type="button" id="btn" value="按钮"/>
    <script>
        var btn = document.getElementById("btn");
        btn.addEventListener("click", demo);
        function demo() {
            try {
                var value = document.getElementById("txt").value;
                if (value == "")
                    throw "未输入有效数字";
                alert(value);
            } catch (err) {
                alert(err);
            }                     
        }
    </script>
</body>
</html>
View Code

 

 

 

 

 

 

 示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="../Css/MyStyleSheet1.css" />
</head>
<body onload="demoLoad(this)">
    <div id="divId" class="divEvent" onclick="demo1(this)" onmouseover="demoOver(this)" onmouseout="demoOut(this)"></div>
    <input type="text" onchange="demoChange(this)" onselect="demoSelect(this)"/>
    <script>
        var div = document.getElementById("divId");
        
        function demo1(bg) {
            bg.style.backgroundColor = "red";
        }
        function demoOver(bg) {
            bg.innerHTML = "Hello";
        }
        function demoOut(bg) {
            bg.innerHTML = "World";
        }
        function demoChange(bg) {
            alert(bg.value);
        }
        function demoSelect(obj) {
            obj.style.background = "blue";
        }
        function demoLoad(obj) {
            alert("网页加载完毕");
        }
    </script>
</body>
</html>
View Code

 

 

 

 

 

 

 

 

 

示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <button id="btn1" onclick="alert('Hello!!')">Html事件处理</button>
    <br />
    <button id="btn2">DOM0级事件处理</button>
    <br />
    <button id="btn3">DOM2级事件处理</button>
    <br />
    <button id="btn4">兼容写法</button>
    <script>
        var btn2 = document.getElementById("btn2");
        btn2.onclick = demo2;
        btn2.onclick = demo3;   //注意这样的方式会覆盖第一个事件处理
        btn2.onclick = null;    //清空事件处理
        function demo2() {
            alert("DOM0级事件处理2。");
        }
        function demo3() {
            alert("DOM0级事件处理3。");
        }
        /*----------DOM2级事件处理------------*/
        var btn3 = document.getElementById("btn3");
        btn3.addEventListener("click", demo4);
        btn3.addEventListener("click", demo5);  //不会覆盖消息
        btn3.removeEventListener("click", demo4);   //移除消息响应函数
        function demo4() {
            alert("DOM2级事件处理1。");
        }
        function demo5() {
            alert("DOM2级事件处理2。");
        }
        /*---------浏览器兼容写法-------*/
        function demo6() {
            alert("兼容。");
        }
        var btn4 = document.getElementById("btn4");
        if (btn4.onclick)
            btn4.onclick = demo6;
        else if (btn4.addEventListener)
            btn4.addEventListener("click", demo6);
        else if (btn4.attachEvent)
            btn4.attachEvent("click", demo6);
    </script>
</body>
</html>
View Code

 

第4种主要针对IE8以下版本的浏览器做兼容处理。

 

 

 

 target：指的是事件是从哪个元素触发的。

注意理解事件冒泡导致触发的行为。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div id="div1">
        <button id="btn1">按钮</button>
        <a id="aid" href="http://www.taobao.com">链接</a>
    </div>
    <script>
        var btn = document.getElementById("btn1");
        btn.addEventListener("click", demo);
        var div = document.getElementById("div1");
        div.addEventListener("click", demo1);   //点击btn后div的click也会被触发，这是事件的冒泡导致的
        function demo(event) {
            alert(event.target);
            event.stopPropagation();//禁用事件冒泡，就不会向上触发div的click事件
        }
        function demo1(e) {
            alert("div1");;
        }
        /*------阻止事件的默认行为，在a中阻止click事件跳转到taobao-----*/
        var a = document.getElementById("aid");
        a.addEventListener("click", demo2)
        function demo2(e) {
            e.stopPropagation();
            e.preventDefault();
        }
    </script>
</body>
</html>
View Code

 

 

 

End

 

posted @ 2020-02-08 15:46  ZedFFF  阅读(133)  评论(0)    收藏  举报