事件绑定之.bind()

.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();
});

 

转载于:https://www.cnblogs.com/theEndOfSummer/p/4538742.html