jQuery事件绑定，冒泡机制

1. jQuery时间绑定：

　　$obj.on(events[,selector][,data],handler(eventObject))

 

2. html代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>jquery事件处理机制</title>
        <style type="text/css">
            div{
                border:2px solid #aaa;
                margin:10px;
                padding:20px;
                font-size:30px;         
            }
            #d1{
                width:300px;
                height:300px;
                background-color:red;
            }
            #d2{
                width:200px;
                height:200px;
                background-color:green;
            }
            #d3{
                width:100px;
                height:100px;
                background-color:blue;
            }      
        </style>
        <script type="text/javascript"  src="../jquery-3.5.1.js"></script>
        <script src="../js/case407.js">                          
        </script> 
    </head>
<body onload=""><!-- 加载后注册 -->
    <!-- 1.jquery事件注册 -->
    <!-- javasctipt 原始绑定事件 -->
    <button onclick="f1();">按钮1</button> 
    <button>按钮2</button>
    <!-- 2.jquery事件冒泡机制和委托机制,事件对象常用属性 -->
    <div id="d1">相关科目
        <ul >列表：
            <li>语文</li>
            <li>数学</li>
            <li>英语</li>
            <li>物理</li>
        </ul>
    </div>
    <!-- 3.事件对象常用方法 -->
    <a href="http://www.baidu.com">测试event.preventDefault方法</a><br>
    <!-- 4.合成事件 -->
    <img src="../images/image1.jpg"/>
    <p>
        <button id="chg">切换</button>        
    </p> 
    <!-- 4.模拟事件 -->
    <p><input type="button" value="打分" id="score"></p>
    <p>红海行动:<input type="text" ></p>
    <p>捉妖记2:<input type="text" ></p>
    <p>唐人街探案2:<input type="text" ></p> 
    <p>女儿国:<input type="text" ></p>        
</body>
</html>

 

 

 

 

3. js代码：

function f1(){
    alert("调用按钮1单击事件");
}

function f2(){
    // alert("调用按钮2的单击事件");
    console.log("click&mousemove");
}

function f3(){
    console.log("mouseout");
}

$(function(){
    // $("button:contains('按钮2')").on("click",f2); //一个事件绑定一个方法
    // $("button:contains('按钮2')").on("click mousemove",f2); //不同事件绑定同一个方法
    $("button:contains('按钮2')").on({
        "click":f2,
        "mouseout":f3
    }); // 不同事件绑定不同的方法
})

$(function(){
    $("li").on("click",function(){alert($(this).text())}); 
    $("ul").on("click",function(){alert($(this).text())
        return false;}); //e.stopPropagation();
    $("#d1").on("click",function(){alert($(this).text())});
})

 

posted @ 2020-09-24 13:20  ZengZG  Views(202)  Comments(0)  Edit  收藏  举报