jqurey事件的绑定 | 易学教程

jq 历史中绑定事件的三种方式：
1. on/off 2. bind/unbind 3. live/delegete
在JQuery 1.7之后推出了 .on() 和 .0ff()方法废弃了live() 和 delegete()方法
on/off 整合了 bind/unbind 方法
所以我们使用较多的绑定方法为 on/off
之前使用事件绑定

   $(".btn").click(function () {
        console.log("啊~~~");
    });

.on 参数 1 事件类型（必填）
可以同时绑定多个事件，但限于事件功能相同时
事件功能不相同时，可以采用链式编程，在该方法的后面续写
参数 2 具体执行功能的子元素！ (可选)
参数 3 传递到函数内部的数据(有些类似实参) （可选）
参数 4 具体功能 (必填)

    $(".box").on("click mouseout",".min_box",{sum:20},function (e) {
        console.log("天气不错");
     //通过参数3 传递进来的参数  我们通过  event.data 来获取
        console.log(e.data.sum);
         });

通过on绑定事件和直接通过事件名绑定的区别：
1. 通过事件名绑定是在页面加载后，获取的所有类名为btn1的元素，然后绑定了这个click事件，
你要是通过其他操作再生成一个btn1元素，它就没有click这个事件；
而on()事件起到了监听的效果,可以实现动态html元素绑定，
比如一开始只有一个btn2元素，你通过某种方法又加了一个btn2元素，这个元素也可以点击，
可以无限添加btn2。
1. on() 绑定单个事件 – 自我完成
2. on() 绑定多个事件
事件类型之间空间间隔

     $("button").on("click contextmenu",function () {
     alert("我来啦");
     })

读取和使用鼠标状态

 $('button').mousedown(function(e){
     alert(e.which)
      // 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键
    return false;//阻止链接跳转
    return true;//返回正常的处理结果.
    return false;//返回错误的处理结果;终止处理;阻止提交表单;阻止执行默认的行为.
    return;//把控制权返回给页面.
     })
     $('#down').mousedown(function(e){
     if(3 == e.which){
     alert('这是右键单击事件');
     }else if(1 == e.which){
    alert('这是左键单击事件');
     }
     })

3. 使用对象的方式绑定多个事件

     $("button").on({
     mousedown:function () {
     alert("按下");
     },
     mouseup:function () {
     alert("抬起")
     }
     })

4. 阻止冒泡和默认行为

   $("button").on('click',function (e) {
     e.preventDefault();//  阻止默认事件      
     e.stopPropagation();   // 阻止冒泡事件
    })

事件的命名空间
有时，我们想对事件进行移除。但对于同名同元素绑定的事件移除往往比较麻烦，这个时候，可以使用事件的命名空间解决。

   $('input').on('click.abc', function () {
        alert('abc');
    });
    $('input').on('click.xyz', function () {
        alert('xyz');
    });

.off() 解除事件绑定
参数1 ：必需符合要解除目标的事件类型事件命名
参数2 ：可选指定哪些后代元素可以触发绑定的事件
参数3 ：可选。规定当事件发生时运行的函数。

   $('input').off('click.abc'); //移除 命名为abc的click 事件

PS：也可以直接使用(’.abc’)，这样的话，可以移除相同命名空间的不同事件。
对于模拟操作.trigger()和.triggerHandler()，用法也是一样的。
备注：如果该事件已经删除，则无法模拟使用

  $('input').trigger('click.abc');

事件绑定叠加问题

   var iCount = 0;
    function sayHello() {
        alert("Hello!");
    }

每Click1次，多响应事件一次（叠加了）

    $('.btn3').on('click', function () {
     iCount = iCount + 1;
     $(".box").html("Say Hello" + iCount + "次");
     $(".box").on("click", sayHello); // 绑定事件（事件叠加了）
     });

通过off()来解决永远只响应1次事件避免事件叠加冲突

 $('.btn3').on("click", function () {
        iCount = iCount + 1;
        $('.box').html("Say Hello" + iCount + "次");
        $(".box").off('click').on('click', sayHello); //先移除事件（避免事件叠加），再绑定事件
    })

来源：CSDN

作者：weixin_46174967

链接：https://blog.csdn.net/weixin_46174967/article/details/104100983

标签

on/off

alert