jQuery事件

目录

1. jQuery事件注册

单个事件注册

语法：

2. jQuery事件处理

2.1 事件处理 on() 绑定事件

语法:

on()方法优势1：

on()方法优势2：

on()方法优势3：

 案例：发布微博案例

2.2 事件处理off()解绑事件

2.3 自动触发事件trigger()

 

3.jQuery事件对象

---

 

1. jQuery事件注册 单个事件注册 语法：

element.事件(function() {})

$("div").click(function() { 事件处理程序 })

其他事件和原生基本一致

比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等

 

 

2. jQuery事件处理 2.1 事件处理 on() 绑定事件

on()方法在匹配元素上绑定一个或多个事件的事件处理函数

语法:

element.on(events,[selector],fn)

events：一个或多个事件类型selector：元素的子元素选择器，比如如果element是ul，那么selector可以是lifn：回调函数 即绑定在元素身上的侦听函数 on()方法优势1：

可以绑定多个事件，多个处理事件处理程序

如果事件处理程序相同

on()方法优势2：

可以事件委派 *** 作。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父亲

//事件绑定在ul身上，但是触发的是li
$("ul").on("click","li",function() { 
    alert("hello world");
});

 在此之前有bind()、live()、delegate()等方法来处理事件绑定或者事件委派，最新版本的用on代替

 

    


    
    
        我没事就吃溜溜梅你别管我了
        我没事就吃溜溜梅你别管我了
        我没事就吃溜溜梅你别管我了
        我没事就吃溜溜梅你别管我了
    
    
    

 

 

on()方法优势3：

动态创建的元素，click()没有办法绑定事件，on()可以给未来动态生成的元素绑定事件，而单个注册的事件没有办法绑定未来动态生成的元素

 

 

 案例：发布微博案例

 

 步骤：

当点击发布按钮的时候，动态生成一个lili里面的内容是：在文本框里面输入的内容 还有一个删除的超链接新发布的内容用下滑（slideDown）动画显示显示新发布的内容之后，文本框置空点击删除时，当前要删除的内容（li）上滑，同时删除当前内容

注意：

 1.要删除的li是先上滑，之后再删除，所以，删除li的代码写在了slideUp事件的回调函数里

 2.不能用单个事件绑定来给ul里面的a绑定事件，而是应该用on，因为动态生成的代码，是写在btn的点击事件的回调函数里，代码执行的时候，不会等待回调函数执行，而是直接向下执行，单个事件绑定ul里面的a的时候，发现a还没有被动态生成，所以无法实现效果。应该使用on()，可以给未来动态生成的代码绑定事件

    
    
    
    
    



    
        微博发布
        
        发布
        
        
    

 

2.2 事件处理off()解绑事件

off()方法可以移除通过on()方法添加的事件处理程序

$("p").off();  //解绑p元素所有事件处理程序
$("p").off("click",foo); //解绑p元素上面的点击事件 后面的foo是侦听函数
$("ul").off("click","li"); //接触事件委托

 

 $("ul").on("click", "li", function () {
                alert("2222222222");
            });
$("ul").off("click", "li"); //解除了ul身上的事件委派

 

 如果有的事件只想触发一次，可以使用one()来绑定事件

$("p").one("click",function() {
    alert(111);
});

2.3 自动触发事件trigger()

有些事件希望自动触发，比如轮播图自动播放功能跟点击右侧按钮一致，可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发

element.click();     //第一种简写形式
element.trigger("type");  //第二种自动触发模式

$("p").on("click",function() {
    alert("hi");
});

$("p").trigger("click");  //此时自动触发点击事件，不需要鼠标点击

 

element.triggerHandler(type);  //第三种自动触发模式

第三种方法和前两种的区别就是：不会触发元素的默认行为

比如说，一个给input绑定focus事件，默认行为是获取焦点之后会有光标闪动，如果用了triggerHandler，自动触发的时候，就不会触发光标闪动的默认行为

3.jQuery事件对象

事件被触发，就会有事件对象的产生

element.on(events,[selector],function(event) {});

阻止默认行为：event.preventDefault() 或者 return false;

阻止冒泡：event.stopPropagation()

 

 

 阻止事件冒泡。。。。。