js事件绑定bind和live

bind():

bind()方法绑定元素的事件非常方便,绑定前,需要知道被绑定的元素名,绑定的事件名称,事件中执行的函数内容就可以了,绑定格式:

$(selector).bind(event,data,function)

参数event为事件名称,多个事件名称用空格隔开;function为事件执行的函数。

代码一:绑定单个事件

<input type="button" id="btn" value="点击绑定事件"/>
<script>
$(function(){
     $("#btn").bind("click",function(){
        alert("事件绑定成功!");
    });
});
</script>

代码二:绑定多个事件的写法①

<input type="button" id="btn" value="点击绑定事件"/>
<script>
$(function(){
     $("#btn").bind("click mouseout",function(){
        alert("事件绑定成功!");
    });
});
</script>

代码三:绑定多个事件的写法②

<input type="button" id="btn" value="点击绑定事件"/>
<script>
$(function(){
     $("#btn").bind({
     click:function(){
         alert("事件绑定成功---点击操作!");
     },
     dblclick:function(){
         alert("事件绑定成功---双击操作!");
     },
     mouseout:function(){
         alert("事件绑定成功---鼠标事件!");
     }
     });
});
</script>

live():

与bind()方法相同,live()方法也可以绑定元素的可执行事件,除此相同功能之外,live()方法还可以绑定动态元素,即:使用代码添加的元素事件。格式如下:

$(selector).live(event,datafunction)

参数event为事件名称,data为触发事件时携带的数据,function为触发事件时执行的代码。

代码:给动态添加的元素绑定方法

$(function(){
     $("#btn").live("click",function(){
        alert("事件绑定成功!");
    });
    $("body").append("<input type=‘button‘ id=‘btn‘ value=‘事件绑定‘/>");
});

注意:

从jQuery1.7开始,不在建议使用.live()方法;1.9不支持.live()。

时间: 2024-10-12 22:31:57

js事件绑定bind和live的相关文章

Jquery之事件绑定(bind(),live(),delegate(),on())

1..bind() 描述: 为一个元素绑定一个事件处理程序. .bind()一个基本的用法: $(selector).bind('click', function() { alert('User clicked on "foo."'); }); 可以直接用原生js替代为: $(selector).click( function() { alert('User clicked on "foo."'); }); 在jQuery1.4.3,您现在可以通过传递false代替

JS事件绑定和JQ的事件绑定的几种方式

JS事件绑定的方式: 1.内嵌法: <input type="button" onclick="test()" value="click me"/> 或者是多事件绑定:<input type="button" onclick="javascript:test();test1();" value="click me"/> 2.动态绑定 直接为对象赋值 documen

js事件绑定细节说明

javascript绑定事件: 经常用jquery去写的化,时间长了对原生态的js事件绑定的知识会慢慢淡化或者遗忘了,必须翻出来再次总结,以前中学老师就对我说过,你要想记住东西并深刻印象,需要3次左右的记忆,第一次看到的知识点,需要隔一小段时间再次去记忆,这是第二次的记忆比第一次印象深刻很多,然后再过长点时间再去记忆一次,第三次的记忆印象基本上能让你的记忆保持很多年,这么多年我也是这样实践去记忆.今天再次把js原生态事件的处理做个总结. 从最初开始,谁刚接触javascript的时候,老师都会这

jQuery 2.0.3 源码分析 事件绑定 - bind/live/delegate/on

转:http://www.cnblogs.com/aaronjs/p/3440647.html?winzoom=1 事件(Event)是JavaScript应用跳动的心脏,通过使用JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应 事件的基础就不重复讲解了,本来是定位源码分析实现的, 所以需要有一定的基础才行 为了下一步更好的理解内部的实现,所以首先得清楚的认识到事件接口的划分 网上资料遍地都是,但是作为一个jQuery系列的源码分析,我还是很有必要在重新

js事件绑定--支持匿名函数解除绑定

废话不多说,直接上代码 var handlers = {}, bind = (function (){ if(window.addEventListener){ return function (el, type, callback, capture){ el.addEventListener(type, function (){ callback(); handlers[type] = handlers[type] || []; handlers[type].push(arguments.ca

微信小程序 - 事件绑定bind和catch 区别

本文以冒泡事件tap(手指触摸后马上离开,也就是点击事件)为例子来区别bind和catch事件.在小程序中事件分为冒泡事件和非冒泡事件: bindtap  事件绑定不会阻止冒泡事件向上冒泡 catchtap  事件绑定可以阻止冒泡事件向上冒泡 假如有三个view点击事件都是用的bindtap,三个view是层级包含关系 <view id="outer" bindtap="out"> outer view <view id="middle&

JS 事件绑定、事件监听、事件委托详细介绍

事件绑定 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定: 在JavaScript代码中绑定: 绑定事件监听函数. 在DOM中直接绑定事件 我们可以在DOM元素上绑定onclick.onmouseover.onmouseout.onmousedown.onmouseup.ondblclick.onkeyd

js事件绑定

js 中事件绑定不同的浏览器使用不同的方法,如何做到兼容所有的浏览器呢? 火狐浏览器支持document.addEventListener ,但是不支持document.attachEvent. chrome支持document.addEventListener,不支持document.attachEvent IE支持document.addEventListener,不支持document.attachEvent 为了兼容多浏览器,我们进行了封装: var addEvent = (functi

js 事件绑定

事件绑定的方式 1.  DOM  元素行内绑定 <div onclick="alert(1)"></div> 2. js on+eventType document.onclick =function(){alert(2)} 3. addEventListener document.getElementById("myBtn").addEventListener("click", myFunction); function