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

最新推荐文章于 2025-03-05 16:17:04 发布

l_degege

最新推荐文章于 2025-03-05 16:17:04 发布

阅读量1.2w

点赞数

分类专栏： js

原文链接：https://www.cnblogs.com/bfgis/p/5460191.html

版权

js 专栏收录该内容

24 篇文章

订阅专栏

1、HTML onclick 事件属性

<input type="button" value="点我点我" onclick="ds()">

<script>
function ds(){
  alert('我出现了啊');
}
</script>

https://www.feiniaomy.com/post/339.html

https://www.w3school.com.cn/tags/event_onclick.asp

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 jQuery 库 -->
    <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

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

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

注：https://www.cnblogs.com/gcywj/p/9065539.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