jQuery事件操作

jQuery的事件操作

1.绑定事件

```
 bind(type,data,fn)
```

参数说明

type(string) :事件类型
data(Object):可选,作为event.data属性值传递给事件对象的额外数据对象
fn(Function) : 绑定到每个匹配元素的事件上面的处理函数

示例:当每个p标签被点击时,弹出其文本

 $("p").bind("click", function(){
   alert( $(this).text() );
 });

示例:事件处理之前传递一些附加的数据

 function handler(event) {
 //event.data 可以获取bind()方法的第二个参数的数据
   alert(event.data.foo);
 }
 $("p").bind("click", {foo: "bar"}, handler)

常见事件

 click(function(){...})
 hover(function(){...})
 blur(function(){...})
 focus(function(){...})
 change(function(){...}) //内容发生变化，input，select等
 keyup(function(){...})  
 mouseover/mouseout
 mouseenter/mouseleave
 mouseover事件是如果该标签有子标签，那么移动到该标签或者移动到子标签时会连续触发，mouseenter事件不管有没有子标签都只触发一次，表示鼠标进入这个对象

通过返回false来取消默认的行为来阻止事件起泡
- ```
 $("form").bind("submit", function() { return false; })
```

通过event.preventDefault()方法来阻止事件起泡

 $("form").bind("submit", function(event){
   event.stopPropagation();
 });

2.解绑事件

```
 unbind(type,fn);
```
描述:bind()的反向操作,从每一个匹配的元素中删除绑定的事件,如果没有参数,则删除所有的绑定事件,如果把绑定时传递的处理函数作为第二个参数,则只有这个特定的事件处理函数会被删除

参数说明

 type (String) : (可选) 事件类型
 fn(Function) : (可选) 要从每个匹配元素的事件中反绑定的事件处理函数

3.补充一次性事件

```
 one(type,data,fn)
```
描述:为每一个匹配的元素的特定事件,像(click)绑定一个一次性的事件处理函数,在每个对象上,这个事件处理函数只会被执行一次,其他规则与bind()函数相同

参数说明

 type (String) : 事件类型
 data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象
 fn (Function) : 绑定到每个匹配元素的事件上面的处理函数

示例:当所有段落被第一次点击的时候,显示所有其文本

 $("p").one("click", function(){
 //只有第一次点击的时候才会触发，再次点击不会触发了
   alert( $(this).text() );
 });

4.事件委托(事件代理)

原理:利用冒泡的原理,把事件加到父级上,触发执行效果
作用:
- 性能要好
- 针对新创新的元素,直接可以拥有事件
事件源:
- 跟this作用一样(他不用看指向问题,谁操作的就是谁),event对象下的

使用情景

为DOM中的很多元素绑定的相同事件
为DOM中尚不存在的元素绑定事件

 <body>
         <ul>
             <li class="luffy">路飞</li>
             <li>路飞</li>
             <li>路飞</li>
             
         </ul>
 </body>
 <script src="jquery-3.2.1.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
     
     //通过on()方法
      $('ul').on('click','#namei,.luffy',function(){
         console.log(this);
        })
             
    //未来追加的元素 
     $('ul').append('<a id="namei">娜美</a>')
 
 }
 </script>

语法:在选定的元素上绑定一个或者多个事件处理函数
- ```
 on(type,selector,data,fn);
```
- 参数说明
  - events(String) : 一个或多个空格分隔的事件类型
  - selector(String) : 一个选择器字符串,用于过滤出被选中的元素中能触发事件的后代元素
  - data:当一个事件被触发时,要传递给事件处理函数的event.data.