加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 大数据 > 正文

绑定事件的方式

发布时间:2020-12-14 04:46:12 所属栏目:大数据 来源:网络整理
导读:bind,绑定方式, $("#dv" ).bind({ "click": function (){}, "mouSEOver": function (){}}) ? * delegate: * 参数:3个 * 1.要绑定事件的元素---p * 2.要绑定的事件的名字---click * 3.绑定事件的处理函数---匿名函数 ? $("#dv").delegate("div","click", fun

bind,绑定方式,

$("#dv").bind({
    "click":function(){},"mouSEOver":function(){}
})

?* delegate:
* 参数:3个
* 1.要绑定事件的元素---p
* 2.要绑定的事件的名字---click
* 3.绑定事件的处理函数---匿名函数

?

$("#dv").delegate("div","click",function () {
alert("我被点了");
});

?

?

?

on,绑定的方式

?

 * on方法: 两个参数:1事件的名字,2事件处理函数
 * on方法:三个参数: 1,事件的名字,2.要绑定事件的元素--p,3事件处理函数
 * on是父级元素调用,目的:为子级元素去绑定事件
$("#btn").on("click",function () {
    //创建p添加到div中
    $("#dv").append($("<p>这是一个p</p>"));
    //为div中的p标签绑定事件
    // $("#dv").html("<p>这是另一个p标签</p>")
    /*
   
    *
    * */
    $("#dv").on("click","p",function () {
        alert("我被点了");
    });
});
 

bind,解绑

/解绑事件
// $(function () {
// //第一个按钮bind绑定事件
// $("#btn1").bind("click",function () {
// alert("我又被点了");
// });
// //第二个按钮unbind解绑事件
// $("#btn2").bind("click",function () {
// $("#btn1").unbind("click");//解绑事件的方法
// });
// });
 
 //为div和p都绑定点击事件
// $("#dv>p").click(function () {
// alert("p被点了");
// });
$("#dv").delegate("p","click",function () {
alert("p被点了");
});
$("#dv").click(function () {
alert("div被点了");
});
$("#btn1").click(function () {
// $("#dv").off("click");
//下面的代码是把子级元素的点击事件解绑了,父级元素的点击事件还存在
//$("#dv").off("click","**");
$("#dv").off();//移除父级元素和子级元素的所有的事件
});
//如果说父级元素和子级元素都是通过正常的方式绑定事件,如果通过off解绑的时候,父级元素的事件解绑了,子级元素的事件没有解绑
//但是:如果子级元素是通过父级元素调用delegate的方式绑定的事件,父级元素使用off方式解绑事件,这个时候父级元素和子级元素的相同的事件都会被解绑



事件的触发
   //点击第二个按钮调用第一个按钮的点击事件---触发第一个按钮的点击事件
            $("#btn2").click(function () {
                //触发事件--3三种方式
                //$("#btn1").click();
                //trigget()方法中需要写上触发事件的名字
                //$("#btn1").trigger("click");//触发事件
                $("#btn1").triggerHandler("click");//触发事件
            });

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读