jQuery binding listener event record

1. Single binding

click click event

1.click event binding

$("#sub_click").click(function(){
    var name = $("#name_input").val();
    alert(name);
});

2. Use the bin() function to bind click

The usage of bind():

$("a").bind("click",[data],function(){})

        The binder of the event is fixed, which is a, the first parameter is the event, the second parameter is optional, it is the event.data parameter to be passed to the callback function, and the third parameter is the callback function.

 $("#sub_click").bind("click",function(){
     var name = $("#name_input").val();
     alert(name);
 });

 3. Use the on() function to bind click

usage of on():

$("body").on("click",'a',[data],function(){})

        Compared with bind(), in addition to the event binder (the on event is the body), a selector a is added to the on parameter, and the event will act on this a.

        It is precisely because there is an additional option a in the parameter of the on() function, so we can also bind events for dynamically generated elements, which is not possible with the bind() function.

 $("#sub_click").on("click",function(){
     var name = $("#name_input").val();
     alert(name);
 });

---

change change event

1. change event binding

$("#age_sel").change(function(){
    var age = $("#age_sel").val();
    alert(age);
});

 2. Use the bind() function to bind click()

$("#age_sel").bind("change",function(){
    var age = $("#age_sel").val();
    alert(age);
});

3. Use the on() function to bind click

$("#age_sel").on("change",function(){
    var age = $("#age_sel").val();
    alert(age);
});

---

Two, multiple binding

1. Binding multiple events to multiple elements

//这里的元素与事件是一一对应的，元素a与click事件对应，元素b与change事件对应
//元素a不能触发change事件，同理元素b不能触发click事件
$("#a,#b").on("click,change",function(){
    //事件操作
});

2. Bind multiple elements to get the element of the change event

$("#a,#b").on("change",function(obj){
    // 获取当前改变事件的元素
    var node = $(obj.target);
    //事件操作
});

Example:   

$(function () {         $("#zhbjx1,#zhbjx3").bind('input propertychange',function(){             var zjhs = $('#zhbjx1').val();//The total price includes tax             var sl = $('#zhbjx3').val();//tax rate (%)             var result = zjhs - (zjhs * sl);             $('#zhbjx4').val(result)             $('#zhbjx1') .trigger('onblur');             $('#zhbjx4').trigger('onblur');         })     })