js事件绑定和普通事件区别，js绑定事件的两种方式

v-on与普通事件绑定会不会发生冲突

Vue中的事件绑定指令是v—on。v—on在前端开发中一个非常重要的特性就是交互。这个时候就必须监听用户发生的事件，比如点击、拖拽、键盘事件等等。v—on是Vue.js中的一个指令，它用于监听DOM事件，并在触发事件时执行相应的方法或逻辑。

Vue解析组件模板后，在绑定更新v-on指令时会为DOM元素绑定事件(当然如果元素为iframe，会等到iframe加载完成后再为其绑定事件)。Vue中为DOM元素绑定事件是采用DOM2级事件的处理方式，因为Vue服务的是IE9以上的现代浏览器，他们也都是支持DOM2级事件。

vue只是一个JS框架，v-on或者@这种写法只是提供了便捷的绑定事件方式，没有改变原生的JS事件，所以所有的原生JS事件都是支持的。官方文档不会事无巨细的把所有属性都列出来，如需要查看元素支持哪些事件，或者有哪些属性，可以通过console该DOM元素，然后翻看对象属性的方法去查找，这样比较准确。

vue中v-on支持的事件很多，比如：click ， mouseenter ， mouseover ， mouseleave等。Vue.js（读音 /vju/， 类似于view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。

v-on：click可以写成@click，是它的语法糖写法： 当然，我们也可以绑定其他的事件： 如果我们希望一个元素绑定多个事件，这个时候可以传入一个对象： 当通过methods中定义方法，以供@click调用时，需要注意参数问题： 情况一：如果该方法不需要额外参数，那么方法后的()可以不添加，并且方法的实现不用参数，直接就可以打印event。

}$listeners 包含了父作用域中的 (不含 .native 修饰器的)v-on 事件监听器。它可以通过 v-on=$listeners 传入内部组件——在创建更高层次的组件时非常有用。

相关问答

Q1: js基础面试题61-70道题目

1、说一下Vue.js中的MVVM模式。 MVVM模式即 Model- View- ViewModel模式。 Vue.js是通过数据驱动的， Vue. js实例化对象将DOM和数据进行绑定，一旦绑定，和数据将保持同步，每当数据发生变化，DOM也会随着变化。 ViewModel是Vue.js的核心，它是 Vue.js的一个实例。

2、Node、js常见面试题1 在进入正文之前，需要提前声明两点： 这些问题只是Node、js知识体系的一个局部，并不能完全考察被面试者的实际开发能力。 对现实世界开发中遇到的问题，需要的是随机应变与团队合作，所以你可以尝试结对编程。

3、在JS 中，继承通常指的便是 原型链继承 ，也就是通过指定原型，并可以通过原型链继承原型上的属性或者方法。 在函数式编程中，函数是一等公民。那么函数柯里化是怎样的呢？ 函数柯里化指的是将能够接收多个参数的函数转化为接收单一参数的函数，并且返回接收余下参数且返回结果的新函数的技术。

Q2: jquery或者js为什么要绑定事件?绑定事件有何作用?有时候不绑定事件同样...

绑定事件是为dom注册某个事件的处理方法，解绑事件是将注册的处理方法与dom解绑。

简写事件 为了使开发者更加方便的绑定事件，jQuery 封装了常用的事件以便节约更多的代码。 称之为简写事件。简写事件，绑定方法如下图，复合事件 jQuery 提供了许多最常用的事件效果， 组合一些功能实现了一些复合事件， 比如切换功 能、智能加载等。

使用on，给多个元素绑定一个或多个事件：这是我现在在开发中最常用的一种方法，有个好处，举个栗子：这样动态添加元素的时候可以自动添加click事件，比如我们经常使用AJAX加载一些数据动态添加到页面上，这样就简单多了。

bind()功能是为每个选择元素的事件绑定处理函数，其语法如下：bind(type，[data]，fn)其中type为一个或多个类型的字符串，如click或change，也可以自定义；可以被type调用的类型包括blur、focus、load、resize、scroll、unload、click、dbclick、mousedown等事件。

on指的是事件委托，举个例子，(document).on(click， .ontest， function () { //...})；假设你的.ontest一开始不存在DOM结构当中，也就是html里面，如果你直接click(function () {})；的话，事件是无法成功绑定的，而用on委托给document的话，在事件冒泡的时候，就可以成功出发绑定的事件。

Q3: JS事件绑定和普通添加事件的区别

1、第二，扩展事件处理程序的作用域链在不同浏览器当中会导致不同的结果。第三，如果不采用调用函数的方式，而是像例子中那样直接书写代码，那么代码的通用性很差，会使得整站的代码量很大，通用性差。

2、区别如下：onclick是绑定事件，告诉浏览器在鼠标点击时候要做什么。

3、直接在HTML元素中使用事件属性 在HTML元素中直接添加事件属性是最简单的事件绑定方式。例如，我们可以在一个按钮元素上添加一个点击事件：html 点击我 在上述代码中，当用户点击按钮时，就会弹出一个警告框显示“你点击了按钮！”。

4、onclick是js里面给标签绑定点击事件的方法，通常写在html的元素上，而click方法在addEventListener()中使用，此方式可以给一个元素添加多个事件句柄，只在js中使用，可读性更强，更灵活。但前者的优先级高于后者。

5、简而言之click方法是JQuery实现的方法，onclick是js原生的click事件绑定方法。使用click方法必须引入jquery相关文件，onclick则不需要。jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。

Q4: 在javascript中,如何进行事件绑定?并举例说明。

当您把一个函数的引用赋值给一个事件属性的时候，就发生了绑定。函数的引用是指函数的名称，但是不带函数定义中的括号。

D3事件绑定的基础在D3中，事件绑定可以通过多种方式来实现：使用.on（）方法：这是D3中最常用的事件绑定方法之一。你需要使用.on（）方法来添加事件监听器，并指定事件名称和要执行的函数。

这个代码片段添加了一个touchend事件处理程序，当用户单击按钮时，将记录消息到控制台中。 结论 click事件是Web开发中最常用的JavaScript事件之一。

第一种方法：两个部分：javascript部分（相当于给出check（）接口。）： function check(){ if { ……} else{……} } html 部分（各种调用方法，相当于调用js的check（）接口，当点击后将运行JS函数。也可以将onclick改为其他如：onmouseover)： javascript是写事件的，html调用了这个事件。

B4 id=button4/ 模拟了一下添加事件按钮是给上面几个按钮添加事件的，事件就是alert出ids中的值。希望这样可以理解，不行的话可以hi我。

Q5: 事件绑定方法live和bind的区别及使用场合

1、bind()可以绑定多个事件，live()一次只能绑定一个事件。区别在于用live来绑定事件会给所有当前以及将来在页面上的元素绑定事件(使用委派的方式)。比如说，如果你给页面上所有的li用live绑定了click事件。那么当在以后增加一个li到这个页面时，对于这个新增加的li，其click事件依然可用。

2、bind（）方法为每个匹配元素的特定事件绑定事件处理函数。bind（）方法的底层逻辑是on（）方法。 .bind() 方法是用于往文档上附加行为的主要方式。所有JavaScript事件对象，比如focus， mouseover， 和 resize，都是可以作为type参数传递进来的。

3、bind是在页面加载完成之后只对DOM进行一次绑定 live会在每次事件冒泡过程中都会监听绑定的事件。通俗的讲：假设我们给一个是给后期（并不是页面初始化的时候的DOM结构）加载的节点绑定方法，如果使用bind则会无效，应该使用live。

4、target.click(function(){})；target.bind(click，function(){})；target.live(click，function(){})；live方法，只有在click事件发生的时候，才会去检测绑定事件的对象target是否存在，所以live方法可以实现后来新增子元素的事件的绑定。

5、- live()：这个方法类似于one()，但是它使用冒泡来检测事件是否发生在元素内部。如果事件发生在元素内部，那么这个处理程序将被调用。- bind()：这个方法允许您为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。它将事件和函数绑定到元素。

6、jquery中四个事件绑定方式（bind，live，delegate，on）bind()简要描述 bind()向匹配元素添加一个或多个事件处理器。

关于js事件绑定和普通事件区别和js绑定事件的两种方式的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。