js事件绑定的几种方式与on()、bind()的区别

一直不是很理解几种js事件绑定之间的区别与联系,今天百度了一下,在此做一总结:

1.如果只是简单的绑定一个事件,可以直接写在行内,点击执行一个函数,例如 <button οnclick="alert('点我啊!')">点我啊</button>

2.也可以设置一个id 例如<button id="btn">点我啊</button><br>

$('#btn').click(function(){

})

3.还可以写成这种格式,点击执行函数,但是函数写在外面,例如  btn1.onclick = demo; function demo(){ alert('打你干吗?'); }

其实以上三种本质应该是一种,只是形式不一样

对于多事件的绑定,我用的最多的就是on() 和 bind(),一下介绍一下它们的区别

on的基本语法:on(events,[selector],[data],fn)

events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin" 。
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择器为null或省略,当它到达选定的元素,事件总是触发。
data:当一个事件被触发时要传递event.data给事件处理函数。
fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。

如果只是一个简单的事件绑定如 $('button').on('click',function(){}); 与bind()无二样,与以上的几种方式也没有太多的区别

如果是多个事件绑定到一个函数,或则多个事件绑定到多个函数,就需要用到on了:

多个事件一个函数:

$(document).ready(function(){
  $("p").on("mouseover mouseout",function(){
   alert("多个事件一个函数");
  });
});

多个事件绑定不同的函数

$(document).ready(function(){
  $("p").on({
    mouseover:function(){$("body").css("background-color","lightgray");},  
    mouseout:function(){$("body").css("background-color","lightblue");}, 
    click:function(){$("body").css("background-color","yellow");}  
  });
});

on的第二个参数可以阻止一些情况下的冒泡,原理简单说就是用选择器来精确到匹配到你想执行函数的那个元素,而bind()就没有这个参数,因此在使用bind()时很可能产生冒泡

很多资料上显示:bind() live() delegate()都是通过.on()来实现的,虽然不是很懂,但是在使用中我也是更喜欢使用on()


  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: wxml 与 html 的不同之处有以下几点: 1. 标签名不同:wxml 使用小写字母和连字符,如 view、text,而 html 使用大写字母和斜杠,如 DIV、P。 2. 属性名不同:wxml 使用小写字母和连字符,如 class、style,而 html 使用小写字母和等号,如 class="xxx"、style="xxx"。 3. 数据绑定不同:wxml 可以使用双花括号 {{}} 进行数据绑定,而 html 则需要使用特定的属性,如 ng-bind。 4. 事件绑定不同:wxml 使用 bind: 事件名,如 bind:tap,而 html 使用 on 事件名,如 onclick。 5. 样式定义不同:wxml 使用 rpx 作为单位,如 style="font-size: 32rpx;",而 html 使用 px 作为单位,如 style="font-size: 16px;"。 以上是 wxml 与 html 的主要不同之处。 ### 回答2: WXML与HTML有几种不同。 首先,WXML是微信小程序开发中使用的一种标记语言,而HTML是用于Web开发的标记语言。它们的目标不同,WXML旨在为小程序提供界面结构描述,而HTML则是用于构建Web页面。 其次,WXML相对于HTML来说更加简洁且精简。WXML只包含小程序所需的基本标签和属性,而HTML则有更多的标签和属性可以选择,这是因为Web开发中更为复杂的需求和功能。 另外,WXML具有一些特殊的特性以适应小程序的开发环境。例如,WXML可以方便地引用和渲染小程序的组件,包括自定义组件和基础组件,而HTML则没有这样的机制。此外,WXML还提供了一些事件绑定和动态数据渲染的能力,以满足小程序开发的需求。 最后,由于小程序的特殊性,WXML具有灵活的样式设置和布局方式。相比之下,HTML可使用的样式和布局方法相对复杂,需要使用CSS来实现。 综上所述,WXML与HTML在语法、功能和使用方式上存在一些不同。虽然两者都是标记语言,但WXML更加简洁且专注于小程序的开发需求。 ### 回答3: WXML是小程序框架中的一种视图语言,而HTML是网页开发中广泛使用的标记语言。它们之间存在以下几个不同之处: 1. 标签名不同:WXML中的标签以"wx-"开头,如"wx-view"、"wx-text"等,而HTML中的标签则不带前缀,如"div"、"p"等。 2. 属性名不同:WXML的属性名大多与HTML保持一致,如"class"、"id"等,但也有与HTML不同的属性名,如"wx:if"、"wx:for"等,这些属性在小程序中用于控制元素的显示和循环渲染。 3. 数据绑定方式不同:在WXML中,可以使用小程序提供的双花括号语法"{{}}"进行数据绑定,将数据动态地展示在视图中,而HTML中一般使用JavaScript或前端框架实现数据动态更新。 4. 样式表语法不同:WXML使用类似CSS的语法定义元素的样式,如"class"属性用于指定样式类名,而HTML使用CSS来定义样式,其中的选择器和属性语法与WXML有所不同。 5. 功能和扩展性不同:WXML是小程序特有的语言,它与微信小程序框架进行紧密的集成,可以利用小程序提供的丰富API实现更多的功能和交互效果,而HTML则是网页开发的基础,一般需要借助JavaScript或前端框架实现复杂的功能。 总体来说,WXML与HTML在某些语法和功能上有所不同,因为它们服务于不同的开发环境和需求,WXML专注于小程序的开发,HTML则主要用于网页的构建。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值