十、jQuery事件绑定

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/MASORL/article/details/80838287

1、使用bind(type, [data],  fn)

type: 事件类型

[data]:可选,作为event.data属性值传递给事件对象的额外数据对象

fn:绑定的处理函数

2、常用jquery事件

click(fn):点击事件

dblclick(fn):双击事件

mouseenter(fn):鼠标指针穿过元素

mouseleave(fn):鼠标指针离开元素

mousedown(fn):鼠标指针移动到元素上方,并按下鼠标按键

mouseup(fn):在元素上松开鼠标按钮

mouseover(fn):鼠标移动到元素上

mouseout(fn):鼠标从元素上移开

hover(fn1, fn2):模拟光标悬停事件

focus(fn): 当元素获取焦点时,发生focus事件。

blur(fn): 当元素失去焦点时,发生blur事件

3、mouseenter与mouseover、mouseleave与mousedown区别

moueenter和mouseleave都只会在指定元素触发

mousevoer和mouseout在指定元素的子元素内进入或离开,也会触发

4、合成事件hover()、toggle()

1)hover(fn1,fn2):在移动到元素上时触发第一个函数fn1,实际是调用了mouseenter方法);当鼠标一处这个元素时,会触发指定的第二个函数(mouseleave)

2) toggle(fn1,fn2……fnn):模拟鼠标连续点击事件。第一次点击触发fn1,第二次点击触发fn2……依次触发,循环调用。

5、触发事件函数 trigger()

trigger(event,[ param1], [param2]……)

event:需要触发的事件名;

param1:传入的参数

6、事件冒泡

例:有如下HTML结构,body、div、span都各自绑定了click事件

<body>
    <div>
        <span></span>
    </div>
</body>

当点击span时,会按照span-->div-->body顺序,依次触发点击事件

注:jQuery1.7中新增了On(),off().delegate()和undelegate()事件绑定。

猜你喜欢

转载自blog.csdn.net/MASORL/article/details/80838287
今日推荐