事件绑定之.bind()

时间：2021-05-01 14:47:31

.bind(eventType[,eventData],handler(eventObject))

描述：为一个元素绑定一个事件处理程序，bind()绑定方法的时候元素必须已经存在。

-eventType

　　 string类型

　　一个包含一个或多个DOM事件类型的字符串，或自定义事件。多个由空格分开。

-eventData

　　Object类型

　　一个对象，它包含的数据键值对映射将被传递给事件处理程序。不常用

-handler(eventObject)

　　Function()类型

　　每当事件触发时执行的函数。

-从jq1.7开始.on()方法将事件处理程序绑定到文档的首选方法，对于更为灵活的事件绑定，可以查看.on() 或者 .delegate()事件代理。

-eventType任何字符串是合法的，如果该字符串不是一个原生的DOM事件名称，那么以自定义方式绑定处理函数，这些事件不会被浏览器调用，可以用.trigger()或.triggerHandler()来触发。

$("input").bind("custom",function(){//custom为自定义事件

        $(this).val('呀改变了呢');

});

$("button").click(function(){

        $("input").trigger("custom");

})

-如果eventType参数字符串包含一个点（.）字符，那么该事件是带命名空间的。这个.字符将事件及命名空间分隔开来

-其实blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error这些是.bind(eventType)标准的事件类型绑定快捷方法。

-传递一个事件类型/处理函数的数据键值对映射来绑定多个事件处理程序，例如：

$("button").bind({

        click:function(){

            alert("click")

        },

        mouseenter:function(){

            alert("mouseenter")

        }

})

-从一个处理函数返回false等效于同时调用事件对象中的.preventDefault()和.stopPropagation()。

$("button").bind({

     click:function(event){

           alert('The mouse cursor is at ('+event.pageX ','+event.pageY+')');

           return false;//如果没有这句话，那么body的click事件也会执行。

      }

});

$("body").click(function(){

    alert("body被点击了")

})

-eventData

一个方便的使用这个参数来解决由于闭包造成的问题。例如，假设我们有两个事件处理函数都引用了相同的外部变量：

var message = 'Spoon!';

$('#foo').bind('click', function() {

  alert(message);

});

message = 'Not in the face!';

$('#bar').bind('click', function() {

  alert(message);

});

由于两个事件处理函数的闭包中，都引用了 message，所以，当事件被触发时，这两个事件处理都会显示 Not in the face!，了避免这个问题，可以使用 eventData 来传递信息

var message = 'Spoon!';

$('#foo').bind('click', {msg: message}, function(event) {

  alert(event.data.msg);

});

message = 'Not in the face!';

$('#bar').bind('click', {msg: message}, function(event) {

  alert(event.data.msg);

});

所以就可以在事件绑定的时候进行赋值操作。 第一个处理程序，现在将显示Spoon!而第二个会提醒Not in the face!

如果通过.trigger()的第二个参数像事件处理程序传递参数，是在事件发生的时候传入，而传入到 .bind() 中的 eventData 参数要求在进行事件绑定时就要事先计算好。

$('#foo').on('custom', function(event, param1, param2) {//event是默认参数
　　alert(param1 + "\n" + param2);
});
$('#foo').trigger('custom', ['Custom', 'Event']);

-Example

在事件处理之前，传入一些额外的数据

function handler(event) {

alert(event.data.foo);

}

$("p").bind("click", {foo: "bar"}, handler)

取消默认事件并阻止冒泡

$("form").bind("submit", function() { return false; })

通过使用 .preventDefault() 方法，仅取消默认的动作，只取消默认事件

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

event.preventDefault();

});

通过使用 .stopPropagation() 方法，防止事件冒泡，但是默认执行默认的动作

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

  event.stopPropagation();

});

相关文章