必威体育Betway必威体育官网
当前位置:首页 > IT技术

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

时间:2019-09-03 23:41:04来源:IT技术作者:seo实验室小编阅读:77次「手机版」
 

on

一直不是很理解几种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()

相关阅读

用JSONObject解析和处理json数据

本文中主要介绍JSONObject处理json数据时候的一些常用场景和方法。(一)jar包下载所需jar包打包下载百度网盘地址:https://pan.baidu.

react.js从入门到精通(一)

web端三大框架react、vue和angular,下面是对react.js的一些总结。 一、环境搭建 1、npm搭建项目 推荐使用npm搭建项目环境,如果网

JSP的9个内置对象,4个常用对象

JSP的内置对象(9个)是可以直接使用的。 内置对象 真实的对象 方法 request HttpServletRequest setAttribute() 、ge

json对空数组的处理

背景:前段时间出差处理一个客户的需求,其中有一项需要用到JSON处理。需求中的http请求参数关于设备信息(subDeviceData)要求传空数

JS Date类型常用方法

最近在做小程序的时候需要用到Date类型的一些方法,但对这方面的知识不是很熟练,觉得很有必要对这些方法整理一下。 1.最基本最常用

分享到:

栏目导航

推荐阅读

热门阅读