JQuery 选择器和事件

最新推荐文章于 2024-10-31 15:39:18 发布

原创最新推荐文章于 2024-10-31 15:39:18 发布 · 485 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #选择器-事件

jquery 专栏收录该内容

5 篇文章

订阅专栏

本文深入探讨了JavaScript中的事件处理机制，包括事件绑定、解除绑定、事件目标与冒泡原理及自定义事件的创建与触发。提供了实用代码示例，帮助读者理解如何在实际项目中高效运用这些概念。

PS、//不是所有浏览器都支持 console.log 解决办法定义一个输出函数调用即可若出错则注释掉

function conlog(event){
console.log(event);
}

1、事件常用方法

2、事件之绑定

3、事件目标和冒泡
关注两个点：currenttarget
target

4、自定义事件

代码如下（代码中包含相关注释讲解）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>选择器和事件</title>
    <script src="jquery-2.1.4.min.js"></script>
    <script src="event.js"></script>
</head>
<body>
<button>click here</button>

<button id="cb">click me</button>

<div style="width:300px;height:300px;background-color: bisque">
    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
    </ul>
</div>

<button id="cb2">click again</button>

</body>
</html>

javascript 部分

/**
 * Created by qing on 2015/8/19.
 */


//事件常用方法

$(document).ready(function(){
    //$("button").click(function(){  //鼠标单击
    //    $("button").dblclick(function(){  //双击
    //$("button").mouseenter(function(){    // 鼠标移上
    //$("button").mouseleave(function(){   //鼠标移除   可查阅API  还有很多比如光标聚集等
    //    $(this).hide();
    //})
});

//事件之绑定 接触绑定事件
$(document).ready(function(){
    //$("#cb").click(function(){  //代码量大的时候这种写法不简洁 占内存
    //    alert("点击我");
    //})

    //$("#cb").bind("click",clickHandle1);
    //$("#cb").bind("click",clickHandle2);
    //$("#cb").unbind("click");//解除所有点击事件
    //$("#cb").unbind("click",clickHandle2);//解除某个点击事件


//jq1.7以后可以这样 官方推荐 底层也是调用on off
//    $("#cb").on("click",clickHandle1);
//    $("#cb").on("click",clickHandle2);
    //$("#cb").off("click");//解除所有点击事件
    //$("#cb").off("click",clickHandle2);//解除某个点击事件
});


function clickHandle1(e){    //参数e???
    console.log("完成事件绑定bind")
}

//可以绑定几个事件
function clickHandle2(e){    //参数e???
    console.log("完成事件绑定bind2")
}


//事件目标和事件冒泡

$(document).ready(function(){
    //$("body").bind("click",bodyHandle); //若点击DIV部分，则currenttarget为body,target为DIV
    //$("div").bind("click",divHandle);
    //$("div").bind("click",divHandle2);
})

function bodyHandle(event){
    console.log(event);
}

function divHandle(event){
    console.log(event);
    //event.stopPropagation(); //阻止父级冒泡事件  就是只点击DIV  不触发body的点击事件
    event.stopImmediatePropagation(); // 阻止所有冒泡事件 意思是只有divHandle可以实现
}

function divHandle2(event){
    //console.log("hellow");
    conlog(event);
}

//不是所有浏览器都支持 console.log 解决办法定义一个输出函数  调用即可  若出错则注释掉

function conlog(event){
    console.log(event);
}


//自定义事件  

var cb2;

$(document).ready(function(){
    cb2=$("#cb2"); //简便

    cb2.click(function (){
        var e=jQuery.event("MyEvent");   //通过jq创建一个对象？
        cb2.trigger(e)   //?申明
    });

    cb2.bind("MyEvent",function(event){
        console.log(event);
    })

});