jQuery学习笔记之bind()

蒋招

2023-12-01

jQuery学习笔记之`.bind()`

本文目标

1 了解.bind()的几种调用方式
2 熟悉各参数含义及其格式
3 熟悉在事件处理函数中如何引用触发事件的元素

学习资料

官方描述文档： http://api.jquery.com/bind/#bind-events/
中文描述文档： http://www.css88.com/jqapi-1.9/bind/
建议： 如果时间充裕还是看官方文档

官方描述

Attach a handler to an event for the elements

把一个处理过程放在指定元素的事件上(通俗讲就是为元素绑定事件处理过程)

三种使用方式

1、.bind( eventType [, eventData ], handler ) version added: 1.0
2、.bind( eventType [, eventData ] [, preventBubble ] ) version added: 1.4.3
3、.bind( events ) version added: 1.4

eventType
Type: String
A string containing one or more DOM event types, such as “click” or “submit,” or custom event names.

参数：eventType
参数类型: String
参数说明: 参数eventType的值是包含一个或多个文档事件类型的字符串(如”click” or “submit”),也可以是自定义的事件名称.

eventData
Type: Anything
An object containing data that will be passed to the event handlerData

参数：eventData
参数类型：Anything
参数说明：参数eventData的值是包含将要传递给事件处理的数据对象
例如：{‘age’:10,’name’:’userName’}

handler
Type: Function( Event eventObject )
A function to execute each time the event is triggered.

参数：handler
参数类型：Function
参数说明：此处为事件每次被触发时都会执行的函数

preventBubble
Type: Boolean
Setting the third argument to false will attach a function that prevents the default action from occurring and stops the event from bubbling. The default is true.

参数：preventBubble
参数类型：Boolean
参数说明：设置这个参数为false将附加一个阻止默认行为发生和停止事件冒泡的函数。这个参数的默认值为true

events
Type: Object
An object containing one or more DOM event types and functions to execute for them.

参数：event
参数类型：Object
参数说明：一个包含一个或多个DOM事件类型及事件对应执行函数的对象

函数说明

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document. For earlier versions, the .bind() method is used for attaching an event handler directly to elements. Handlers are attached to the currently selected elements in the jQuery object, so those elements must exist at the point the call to .bind() occurs. For more flexible event binding, see the discussion of event delegation in .on() or .delegate().

.bing()是将一个事件处理过程直接附加到jQuery对象当前选中的元素上,因此要求元素在调用.bing()时必须存在;在1.7+版本中,官方推荐使用.on()代替.bind(),更多灵活的事件绑定请查看.on() 或 .delegate()的事件委托描述.

Any string is legal for eventType; if the string is not the name of a native DOM event, then the handler is bound to a custom event. These events are never called by the browser, but may be triggered manually from other JavaScript code using .trigger() or .triggerHandler().

一些字符串对于eventType参数是有效的，但这些字符串不是原生文档事件(native DOM event)的名字,当事件处理过程被绑定到自定义事件上时,这些事件在浏览器中是从不会被触发(called),但可以通过JavaScript代码利用.trigger()或.triggerHandler()手动触发.

When an event reaches an element, all handlers bound to that event type for the element are fired. If there are multiple handlers registered, they will always execute in the order in which they were bound. After all handlers have executed, the event continues along the normal event propagation path.

当事件到达元素时,则所有绑定到该元素这一事件类型上的处理过程将被激活,如果有多个处理过程被绑定到该事件上,他们将总是按照他们被绑定时的顺序执行,当全部的处理过程被执行后,这事件将继续沿着正常的事件传播路径传播.

The handler parameter takes a callback function, as shown above. Within the handler, the keyword this refers to the DOM element to which the handler is bound. To make use of the element in jQuery, it can be passed to the normal $() function.

参数handler为一个回调函数，函数中的关键字this指向该处理过程被绑定的DOM元素,在jQuery中可以通过$()来引用这个元素.

$("#foo").bind("click",function(){
    $(this).text();
});

this为JavaScript中的对象,通过$(this)转换成jQuery对象,这样就可以调用jQuery中的方法了

在jQuery1.4.3中可以利用false代替一个事件处理过程,其效果等效于function(){return false;},这个处理过程可以通过.unbind(eventName,false)这种形式移除.
这种方式在元素的这一事件类型被触发时将阻止该元素这一事件的默认行为,且阻止事件继续传递.

    event.preventDefault();//阻止事件的默认行为
    event.stopPropagation();//阻止事件继续传递

在事件处理过程中返回false其效果等效于调用事件对象的preventDefault()和stopPropagation().

参数eventData可以在事件处理过程被调用时传递额外参数给事件处理过程,在事件处理过程中可以通过event.data.paramName

$("#foo").bind("click",
              {
                userName:'name',
                age:12,
                sex:'M'
              },
              function(event){
                 var userName = event.data.userName; //取userName
                 var age = event.data.age; //取age
                 var sex = event.data.sex; //取sex
             });

相关Demo

exmaple1 基本应用

    $("#itemNav").find("a").bind("mouseover",function(){
        alert("mouseover");
       });

example2 为多个事件绑定绑定同一个事件处理过程

    $("#itemNav").find("a").bind("mouseover click",function(){
        alert("hi");
    });

example3 传递额外参数到事件处理过程中

    $("#itemNav").find("a").bind("click",{msg:'jquery'},function(event){
        alert("hi: "+event.data.msg);
    });

example4 阻止事件的默认行为及事件冒泡


  $("#itemNav").bind('click', function(event) {
        alert("This is itemNav");
       });

  $("#itemNav").find("a").bind("click",false);

或
  $("#itemNav").find('a').bind("click",function(event){
    event.preventDefault();
    event.stopPropagation();
  });

example5 同时为多个事件绑定不同的处理过程

  $("#itemNav").find('a').bind({
        mouseenter: function(event){
          alert("mouseenter");
        },
        mouseleave: function(event){
          alert("mouseleave");
        }
      });

example6 绑定自定义事件自定义事件无法通过事件触发,可以利用trigger模拟事件


    $("#itemNav").find('#a2').bind("myClick",function(event,myName){
      alert("My name is "+myName);
    });

    $("#showMyNameBtn").bind("click",function(){
      $("#a2").trigger('myClick',["honey"]);
    })

example7 为同一事件绑定多个事件处理过程

    $("#itemNav").find('#a2').bind("click",function(){
      alert("This is first handler");
    }).bind('click', function() {
      alert("This is second handler");
    });

jQuery学习笔记之bind()