jquery事件学习

页面导航:首页 > 网络编程 > JavaScript > jquery事件学习

jquery事件学习

来源: 作者: 时间:2016-02-01 09:32 【

绑定事件1 bind参数:(eventType [, eventData ], handler(eventObject) ),eventType可以是自定义的事件,此时不能通过浏览器触发,可以通过trigger手动触发。此外,trigger()方法来了解如何在事件发

绑定事件

1.bind

参数:
(eventType [, eventData ], handler(eventObject) ),eventType可以是自定义的事件,此时不能通过触发,可以通过trigger手动触发。此外,trigger()方法来了解如何在事件发生时向事件处理函数中传入参数,而不是在事件绑定的时候传递数据。

2.unbind

用于解除bind所绑定的事件,其中有一个用法:

var timesClicked = 0;
$( #foo ).bind( click, function( event ) {
  alert( The quick brown fox jumps over the lazy dog. );
  timesClicked++;
  if ( timesClicked >= 3 ) {
    $( this ).unbind( event );//为毛要用event?
  }
});

3.on

.on(eventType,selector,data,handler)
selector
表示选中元素的后代元素中被过滤出来的能够绑定事件的元素。即:

当提供selector参数时,事件处理程序是指为委派事件(通常也有很多人叫它代理事件)。事件不会在直接绑定的元素上触发,但当selector参数选择器匹配到后代(内部元素)的时候,事件处理函数才会被触发。

注意:事件处理只能绑定在当前被选中的元素上;而且,在您的代码调用.on()的时候,他们必须已经存在。为了确保目前的元素可以被选择,即已经存在,最好将脚本放在元素的HTML标记的后面或者在 document 的 ready 事件中进行事件绑定。

那么使用事件委派有个好处就是,在已经存在的父元素上绑定了事件,后代元素能够在添加到文档后,处理这些事件。即可以给未创建的后代元素绑定事件
事件代理的另一个好处是,当需要为多个元素添加同一个事件的时候,只需要为他们的父元素添加事件代理就行了,这样开销更小。来看下面的区别:

给每个tr添加事件–普通版:

$( #dataTable tbody tr ).on( click, function() {
  console.log( $( this ).text() );
});

给每个tr添加事件–使用事件代理:

$( #dataTable tbody ).on( click, tr, function() {
  console.log( $( this ).text() );
});

data参数
在事件触发的时候作为event.data的属性传递给事件处理程序,data参数可以是任何类型,但如果是字符串类型时,那么selector参数必须提供,或明确地传递null,这样的 data 参数不会误认为是选择器。最好是使用一个对象(键值对) ,所以可以作为属性传递多个值。

如果在事件处理程序(闭包)中想要使用一个全局变量,而该全局变量的值可变化,那么想要使用某个状态的值可以将全局变量当前的值作为data参数传递。

事件处理函数作用域
当jQuery的调用处理程序时,this关键字指向的是当前正在执行事件的元素。对于直接事件而言,this 代表绑定事件的元素。对于代理事件而言,this 则代表了与 selector 相匹配的元素。

注意:当事件被首次触发时,处理函数列表才会被设置到元素上。当前元素上添加或删除事件处理函数不会立即生效,直到下一次的事件被处理:

var $test = $( #test );

function handler1() {
  console.log( handler1 );
  $test.off( click, handler2 );
}

function handler2() {
  console.log( handler2 );
}

$test.on( click, handler1 );
$test.on( click, handler2 );

handler2在第一次点击test时一定会执行,因为执行第一次handler1时,handler2事件处理程序还没有设置到元素上,就无所谓off了。

事件对象

1.event.stopPropagation()
阻止事件冒泡到父元素上。
2.event.stopImmediatePropagation()
除了阻止事件冒泡到父元素上,还阻止了当前元素上其他对同一个事件的(不同)处理函数的执行:

btn.on({
    click:function(event){
        show.text('click here');
        event.stopImmediatePropagation();
    },
    dblclick:function(){
        show.text('double click here');
    }
});
btn.on('click',function(){
        show.text('click second');  //执行不了
    });

调用event.stopPropagation() 和 event.preventDefault()会从一个事件处理程序会自动返回false。也可以直接将 false 当作事件处理函数中的 handler 参数。

 

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<