jQuery事件操做

时间 2019-11-08

标签 jquery 事件栏目 JQuery 繁體版

原文原文链接

jQuery的事件操做

1.绑定事件

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

参数说明javascript

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

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

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

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

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

常见事件this

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

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

经过event.preventDefault()方法来阻止事件起泡代理

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

2.解绑事件

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

参数说明

 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.