div添加一个点击事件（绑定点击事件）

喜欢ヅ旅行 2021-09-24 14:40 704阅读 0赞

1、HTML onclick 事件属性

[https://www.feiniaomy.com/post/339.html][https_www.feiniaomy.com_post_339.html]

[https://www.w3school.com.cn/tags/event\_onclick.asp][https_www.w3school.com.cn_tags_event_onclick.asp]

2、JavaScript 详说事件机制之冒泡、捕获、传播、委托

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        
        <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
        <style>
            #parent{
                width: 200px;
                height:200px;
                text-align: center;
                line-height: 3;
                background: green;
            }
            #child{
                width: 100px;
                height: 100px;
                margin: 0 auto;
                background: orange;
            }
        </style>
    </head>
    <body>
    <div id="btn">点击</div>
    <div id="parent">
        父元素
        <div id="child">
            子元素
        </div>
    </div>
    
    <script type="text/javascript">
        var btn = document.getElementById("btn");
        btn.addEventListener('click', function (evt) {
            console.log('dmji');
            window.open('http://www.baidu.com','_self')
        });
        var parent = document.getElementById("parent");
        var child = document.getElementById("child");
    
        // document.body.addEventListener("click",function(e){
        //     console.log("click-body");
        // },false);
        //
        // parent.addEventListener("click",function(e){
        //     console.log("click-parent");
        // },false);
        //
        // //新增事件捕获事件代码
        // parent.addEventListener("click",function(e){
        //     console.log("click-parent--事件捕获");
        // },true);
        //
        // child.addEventListener("click",function(e){
        //     console.log("click-child");
        //     e.stopPropagation();
        // },false);
        // parent.onclick = function(e){
        //     if(e.target.id == "child"){
        //         console.log("您点击了child元素")
        //     }
        // }
    
        parent.addEventListener("click",function(e){
            const target = e.target
            if(target.id==='child'){
                console.log("您点击了child元素")
            }
        },false);
    
    </script>
    </body>
    </html>

[https://www.cnblogs.com/bfgis/p/5460191.html][https_www.cnblogs.com_bfgis_p_5460191.html]

3、BOM（浏览器对象模型）

1>在原来的窗体中直接跳转用  
window.location.href="你所要跳转的页面";  
2>在新窗体中打开页面用：  
window.open('你所要跳转的页面');

注：[https://www.cnblogs.com/gcywj/p/9065539.html][https_www.cnblogs.com_gcywj_p_9065539.html]

[https://www.cnblogs.com/lijshui/p/7451360.html][https_www.cnblogs.com_lijshui_p_7451360.html]

4、JavaScrip中的Window.location.href和Window.open（）方法

window.location.href = 'http://www.baidu.com';

window.open('http://www.baidu.com');

注：[https://www.itranslater.com/qa/details/2113789085763503104][https_www.itranslater.com_qa_details_2113789085763503104]

[https_www.feiniaomy.com_post_339.html]: https://www.feiniaomy.com/post/339.html
[https_www.w3school.com.cn_tags_event_onclick.asp]: https://www.w3school.com.cn/tags/event_onclick.asp
[https_www.cnblogs.com_bfgis_p_5460191.html]: https://www.cnblogs.com/bfgis/p/5460191.html
[https_www.cnblogs.com_gcywj_p_9065539.html]: https://www.cnblogs.com/gcywj/p/9065539.html
[https_www.cnblogs.com_lijshui_p_7451360.html]: https://www.cnblogs.com/lijshui/p/7451360.html
[https_www.itranslater.com_qa_details_2113789085763503104]: https://www.itranslater.com/qa/details/2113789085763503104