on和bind的区别，以及js重新渲染问题

前一段时间面试的时候，面试官问了这么一个问题说：Jquery中on和bind有什么区别？当时就一脸懵逼了，因为虽然一直用$("#id").bind("click",function(){})或者$("#id").on("click",".class",function(){})。但是真的问起来，他俩有什么区别还真的不知道。

这样，我们先从写法来看，bind后边参数一般就是绑定事件加方法；on后边的参数相比bind来说，多了一个selector。这就是他们的区别。我们可以通过几个开发中很容易遇到的情况来分析：

情况一：在一个页面上，有多个块，每个块的class是不同的，但是块中的子元素的class是相同的。这个时候你要给content1下的子元素的child绑定事件，用bind肯定是不可以的，因为这样会对所有的child元素绑定事件。但是用on就可以完美解决，给特定唯一父元素下的子元素绑定事件。

<div class="content1"><div class="child"></div>
</div>
<div class="content2"><div class="child"></div>
</div>
<div class="content3"><div class="child"></div>
</div>
<script>/*$(".child").bind("click",function () {//bind绑定事件})*/$(".content1").on("click",".child",function () {//on绑定子元素事件
    })
</script>

情况二：对于动态加载的class进行绑定事件。页面对于js只在加载的时候渲染一次，用on就可以对新添加的进行重新渲染，给动态添加的也加上绑定事件。

<style>.show-red{color: red;}.show-yellow{color: yellow;}
</style>
<div class="content1">123</div>
<div class="content2">456</div>
<script>$(".content1").addClass("show-red");$(".content2").addClass("show-yellow");/*$(".show-red").bind("click",function () {//bind给show-red绑定事件})*/$(".content1").on("click",".show-red",function () {//on给show-red绑定事件
    })
</script>

综上：on可以将子元素的事件委托给父元素进行处理；on可以给动态添加的元素加上绑定事件。

转载于:https://www.cnblogs.com/Toby-hou/p/7927675.html

on和bind的区别，以及js重新渲染问题相关推荐

Eval和Bind的区别
1.Eval和Bind的区别绑定表达式 <%# Eval("字段名") %> <%# Bind("字段名") %> 区别 1.eval ...
jQuery里面的 .on 和 .bind 的区别
on 和 bind 的区别 1. on 可以多一个 selector 参数,可以给子元素添加事件. bind 只能给自己添加事件 2. 使用on添加的事件比如给自己子集使用类选择器添加的 ,后来创建的 ...
call(),apply()和bind()的区别和应用以及扩展
首先三个方法的作用: 1:都是在特定的作用域中调用函数,等于设置函数体内this对象的值,以扩充函数赖以运行的作用域. 2:都是改变this的指向方向区别: call()和apply()接受参数的方 ...
append和appendTo的区别以及js中的appendChild用法
append和appendTo的区别以及js中的appendChild用法很多像我一样接触JS没多久的小白对append和appendTo的区别以及js中的appendChild用法都会有所模糊,下 ...
if,if else,else if的区别,以js为例
if,if else,else if的区别,以js为例 if 应用场景 if else 应用场景 else if 应用场景关于if的嵌套实用场景补充之if 实用场景补充之if else 实用场景补 ...
Three.js的渲染过程
主要基于WebGLRendere类的render方法开展,需要读者有基本的计算机图形知识,比如计算机图形管线(实时渲染管线)之类的. 在Three.js的渲染中,大概可以分为以下几步: 清空当前帧缓冲 ...
vue使用html渲染组件,Vue.js在渲染组件之前填充数据
我是Vue.js的新手,我试图创建一个没有成功的简单组件,它包含一个selectList,我试图填充它的选项数据来模拟Ajax请求,这是我的代码:Vue.js在渲染组件之前填充数据 HTML {{n. ...
Three.js之渲染器
本篇文章将详细讲解three.js中渲染器(renderer)的设置方法. three.js文档中渲染器的分支如下: Renderers CanvasRenderer DOMRenderer SVGR ...
js动态渲染html页面,利用Scrapy-Splash抓取JS动态渲染的网页数据
随着越来越多的网站开始用JS在客户端浏览器动态渲染网站,导致很多我们需要的数据并不能由原始的html中获取,再加上Scrapy本身并不提供JS渲染解析的功能,通常对这类网站数据的爬取我们一般采用两种方 ...
Vue.js 服务器端渲染指南
默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM.然而,也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器. 简单理解是将组件或页面通过服务器生 ...

on和bind的区别，以及js重新渲染问题

on和bind的区别，以及js重新渲染问题相关推荐

最新文章

热门文章