美文网首页
js学习第6天:常见事件/鼠标/焦点/值的改变...

js学习第6天:常见事件/鼠标/焦点/值的改变...

作者: mapg | 来源:发表于2019-11-29 17:25 被阅读0次
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
    
    
        <script language="JavaScript">
            function handle(oEvent) {
                if (window.event) { //适配IE
                    oEvent = window.event;
                }
                var oDiv = document.getElementById('display')
                oDiv.innerHTML += oEvent.type + "<br>"
            }
            //DOM绑定鼠标事件
            window.onload = function() {
                var oImg = document.getElementsByTagName("img")[0];
                
                //alert(oImg);
                //getElementsByName("")
                //getElementById('img')
                //alert(oImg);
                oImg.onmousedown = handle;
                oImg.onmouseup = handle;
                oImg.onmouseout = handle;
                oImg.onclick = handle;
                oImg.ondblclick = handle;
            }
        </script>
    
        <!-- onload="alert('divOnload')"  -->
        <body onunload="alert('IE才支持')">
            <img id="img" src="../js事件监听/Snipaste_2019-11-25_15-25-23.png" style="float: left; padding: 0px 8px 0px 0px;" />
            <br />
            <div id="display">
                mydiv
            </div>
    
            <!-- onsubmit= 'return false' 取消事件 -->
            <form action="http://www.baidu.com" onsubmit="alert('准备体提交了')">
    
                <input type="text" value="a" onfocus="alert('获取焦点')" onfocusout="alert('onfocusout')" onblur="alert('失去焦点')" />
                <br />
                <input type="text" value="b" onchange="alert('onchange')" />
                <br />
                <select onchange="alert('select onchange')">
                    <option>上海</option>
                    <option>北京</option>
                </select>
                <br />
                <input type="submit" name="提交" id="subimitBtn" value="提交" />
            </form>
        </body>
    </html>
    
    

    相关文章

      网友评论

          本文标题:js学习第6天:常见事件/鼠标/焦点/值的改变...

          本文链接:https://www.haomeiwen.com/subject/xvvgwctx.html