js事件on动态绑定数据,绑定多个事件的方法


Posted in Javascript onSeptember 15, 2018

一.on('clcik')与$('').clcik()方法的区别:

on('clcik'):事件委托机制

// 在body元素上绑定click事件处理函数handler,如果这个click事件是由其后代的P元素触发的,就执行handler
$(document.body).on("click", "p", handler);

事件委托机制就是,我们不为每个P元素直接绑定click事件处理函数,而是委托给其某个公共的祖辈元素(此处示例中为document.body),"告诉"他:如果接收到了click事件触发通知,并且这个click事件是由我们这些P元素其中之一触发的,就执行祖辈元素上委托绑定的事件处理函数。

注意:"focus"、"blur"等部分事件不支持冒泡,使用事件委托机制将无效。不过,他们一般也有对应的支持冒泡的事件。例如与"focus"对应的"focusin",与"blur"对应的"focusout"。此外,我们也可以使用event.stopPropagation()方法,让当前触发的事件停止冒泡。

1.绑定多个事件,用空格隔开事件和命名空间如:“click”或“keydown.myPlugin”。或者格式为

on({

"clcik": function(){},

mouseover: function(){}

})

命名空间: namespace 名字{ 定义的数据; 定义的函数; 也可以是定义的类...}

2.可以给动态元素和属性绑定事件

clcik()不能为页面动态加载元素添加事件,事件只能为clcik

二:on()的参数

$().on(events,[seletor],[data],fn)或events-map,[seletor],[data]

events:一个或多个用空格分隔的事件类型和可选的命名空间

events-map:个用字符串表示的,一个或多个空格分隔的事件类型和可选的命名空间,值表示事件绑定的处理函数。

seletor:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略,当它到达选定的元素,事件总是触发。(也就是触发事件元素)

data:当一个事件被触发时要传递event.data给事件处理函数。
fn:该事件被触发时执行的函数。如果事件处理函数handler仅仅只为返回false值,可以直接将handler设为false。false 值也可以做一个函数的简写,返回false。

如果要取消默认事件直接加false

$("form").on("submit", false)

map:规定事件映射 ({event:function, event:function, ...}),包含要添加到元素的一个或多个事件,以及当事件发生时运行的函数

三:onclick,click,on()的优先关系:onclick>click>on();

以上这篇js事件on动态绑定数据,绑定多个事件的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js switch case default 的用法示例介绍
Oct 23 Javascript
Javascript仿PHP $_GET获取URL中的参数
May 12 Javascript
在JavaScript中使用开平方根的sqrt()方法
Jun 15 Javascript
jQuery树形下拉菜单特效代码分享
Aug 15 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
Aug 02 Javascript
ionic实现滑动的三种方式
Aug 27 Javascript
jQuery实现的瀑布流加载效果示例
Sep 13 Javascript
Javascript 调用 ActionScript 的简单方法
Sep 22 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
Nov 03 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
Apr 11 Javascript
Vue中对拿到的数据进行A-Z排序的实例
Sep 25 Javascript
小程序开发之模态框组件封装
Apr 23 Javascript
vue 的点击事件获取当前点击的元素方法
Sep 15 #Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
Sep 15 #Javascript
vue绑定事件后获取绑定事件中的this方法
Sep 15 #Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 #Javascript
微信小程序动态增加按钮组件
Sep 14 #Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
Sep 14 #Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
Sep 14 #Javascript
You might like
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
php实现的简单日志写入函数
2015/03/31 PHP
PHP中类型转换 ,常量,系统常量,魔术常量的详解
2017/10/26 PHP
Yii2框架数据验证操作实例详解
2018/05/02 PHP
PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
2018/05/23 PHP
PHP code 验证码生成类定义和简单使用示例
2020/05/27 PHP
javascript 对象的定义方法
2007/01/10 Javascript
IE iframe的onload方法分析小结
2010/01/07 Javascript
jquery让指定的元素闪烁显示的方法
2015/03/17 Javascript
浅析Node.js 中 Stream API 的使用
2015/10/23 Javascript
JS与jQ读取xml文件的方法
2015/12/08 Javascript
js实现微信分享代码
2020/10/11 Javascript
jquery对Json的各种遍历方法总结(必看篇)
2016/09/29 Javascript
layui 监听表格复选框选中值的方法
2018/08/15 Javascript
vue实现循环切换动画
2018/10/17 Javascript
100行代码实现一个vue分页组功能
2018/11/06 Javascript
在 Vue.js中优雅地使用全局事件的方法
2019/02/01 Javascript
jquery ajax 请求小技巧实例分析
2019/11/11 jQuery
Angular封装表单控件及思想总结
2019/12/11 Javascript
Python基类函数的重载与调用实例分析
2015/01/12 Python
python分析nignx访问日志脚本分享
2015/02/26 Python
python使用Tesseract库识别验证
2018/03/21 Python
Centos下实现安装Python3.6和Python2共存
2018/08/15 Python
详解安装mitmproxy以及遇到的坑和简单用法
2019/01/21 Python
python启动应用程序和终止应用程序的方法
2019/06/28 Python
python3 打印输出字典中特定的某个key的方法示例
2019/07/06 Python
python中class的定义及使用教程
2019/09/18 Python
Python实现非正太分布的异常值检测方式
2019/12/09 Python
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
简历中自我评价怎么写
2014/02/12 职场文书
大学自主招生自荐信范文
2014/02/26 职场文书
本科应届生自荐信
2014/06/29 职场文书
宾馆前台接待岗位职责
2015/04/02 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书
python中的class_static的@classmethod的巧妙用法
2021/06/22 Python
nginx lua 操作 mysql
2022/05/15 Servers