jQuery（八）绑定事件

on()方法
说明：方法在被选元素及子元素上添加一个或多个事件处理程序。
语法：$(selector).on(event,childSelector,data,function)
event：必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值，也可以是数组。必须是有效的事件。
childSelector：可选。规定只能添加到指定的子元素上的事件处理程序，且不是选择器本身。
data：可选。规定传递到函数的额外数据。
function：可选。规定当事件发生时运行的函数。

trigger：方法触发被选元素的指定事件类型。
语法：$(selector).trigger(event,[param1,param2,…])
event：必需。规定指定元素要触发的事件。
[param1,param2,…]：可选。传递到事件处理程序的额外参数。

insertAfter()：方法在被选元素后插入 HTML 元素。
如需在被选元素前插入 HTML 元素，请使用 insertBefore() 方法。
语法：$(content).insertAfter(selector)
content：必需。规定要插入的内容（必须包含 HTML 标签）。
selector：必需。规定在何处插入内容。

slideToggle()：方法在被选元素上进行 slideUp() 和 slideDown() 之间的切换。
slideUp()/slideDown()：方法以滑动方式隐藏被选元素,向上/向下。
$(selector).slideToggle(时间,速度,执行的函数)

off()：方法通常用于移除通过 on() 方法添加的事件处理程序。
语法：$(selector).off(event,selector,function(eventObj),map)
event：必需。规定要从被选元素移除的一个或多个事件或命名空间，由空格分隔多个事件值。
selector：可选。规定添加事件处理程序时最初传递给 on() 方法的选择器。
function：可选。规定当事件发生时运行的函数。
map：规定事件映射 ({event:function, event:function, …})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

/*
     on()
     1.1 单个事件
 */
 $('div').eq(0).on('click',function(){
     $(this).css('color', 'blue');
 })

 $('div').eq(0).on('click',getName);
 function getName()
 {
     alert("张三");
 }

 /*
     1.2 指定的子元素上的事件处理程序,多个之间用逗号隔开
 */
$('div').eq(1).on('click','span,p',function(){
     $(this).css('color', 'blue');
 })

 /*
     1.3 多个事件
 */
 $('div').eq(2).on('mouseover mouseout',function(){
     $(this).toggleClass('dClass');
 })

 /*
     1.4 事件映射 最后一个不加逗号
 */
 $('div').eq(3).on({
     click:function(){$(this).css('color', 'red');},
     mouseover:function(){$(this).css({'width':"50px",'height':"50px",'border':"1px solid yellow"});},
     mouseout:function(){$(this).attr("style","");}
 })


 /*
     1.5 自定义事件
 */
 $('div').eq(4).click(function(){
     $('input').eq(0).trigger('addInput',{name:"张三"});
 })
 $('input').eq(0).on('addInput',function(a,b){
     $(this).val(b.name);
 })


 /*
     1.6 传递参数
 */
 $("div").eq(5).on("click", {a: "张三",b:"李四",c:"小淘气"}, getMessage);
  function getMessage(e)
  {
     console.log(e.data);
     console.log(e.data.a);
     console.log(e.data.b);
     console.log(e.data.c);
  }

  /*
     1.7 向元素后方添加内容
  */
 $("div").eq(6).on('click',function()
 {
     if($(this).attr('index') == 0)
     {
         // $('<p>后面的内容</p>').insertAfter('.d7');
         $(this).append('<p>后面的内容</p>');
         $(this).attr('index','1');
     }
     else
     {
         $(".d7 p").slideToggle();
     }

 })

 /*
     1.8 移除事件
 */
 $("div").eq(7).on('click',function(){
     $(this).css('color','pink');
 })

 $("div").eq(7).children().on('click',function(){
     $("div").eq(7).off();
 })

bind()
说明：方法向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数。
语法：$(selector).bind(event,data,function,map)
event：必需。规定添加到元素的一个或多个事件。由空格分隔多个事件值。
data：可选。规定传递到函数的额外数据。
function：必需。规定当事件发生时运行的函数。
map：规定事件映射 ({event:function, event:function, …})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

/*
    bind()
    1.1 单个事件
*/
$('div').eq(0).bind('click',function(){
    $(this).css('color', 'blue');
})

$('div').eq(0).bind('click',getName);
function getName()
{
    alert("张三");
}

/*
    1.2 多个事件
*/
$('div').eq(0).bind('mouseover mouseout',function(){
    $(this).toggleClass('dClass');
})

$('div').eq(1).bind('click mouseout',function(){
    $(this).toggleClass('dClass');
})

/*
    1.3 事件映射 最后一个不加逗号
*/
$('div').eq(2).bind({
    click:function(){$(this).css('color', 'red');},
    mouseover:function(){$(this).css({'width':"50px",'height':"50px",'border':"1px solid yellow"});},
    mouseout:function(){$(this).attr("style","");}
})

/*
    1.4 传递参数
*/
$("div").eq(3).bind("click", {a: "张三",b:"李四",c:"小淘气"}, getMessage);
 function getMessage(e)
 {
    console.log(e.data);
    console.log(e.data.a);
    console.log(e.data.b);
    console.log(e.data.c);
 }

jQuery（八）绑定事件

猜你喜欢