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 相关文章推荐
ASP中进行HTML数据及JS数据编码函数
Nov 11 Javascript
ExtJs之带图片的下拉列表框插件
Mar 04 Javascript
JQUERY获取form表单值的代码
Jul 17 Javascript
在JS中最常看到切最容易迷惑的语法(转)
Oct 29 Javascript
new Date()问题在ie8下面的处理方法
Jul 31 Javascript
node.js中的fs.readSync方法使用说明
Dec 17 Javascript
AngularJS ionic手势事件的使用总结
Aug 09 Javascript
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
解决vue热替换失效的根本原因
Sep 19 Javascript
基于vue写一个全局Message组件的实现
Aug 15 Javascript
react基本安装与测试示例
Apr 27 Javascript
从0搭建vue-cli4脚手架
Jun 17 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
用PHP来写记数器(详细介绍)
2006/10/09 PHP
支付宝接口开发集成支付环境小结
2015/03/17 PHP
ThinkPHP框架实现导出excel数据的方法示例【基于PHPExcel】
2018/05/12 PHP
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
laravel 框架配置404等异常页面
2019/01/07 PHP
PHP实现二维数组(或多维数组)转换成一维数组的常见方法总结
2019/12/04 PHP
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
2016/01/28 Javascript
jQuery事件用法详解
2016/10/06 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
2016/10/24 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
2017/03/08 Javascript
BootStrap导航栏问题记录
2017/07/31 Javascript
jQuery使用bind函数实现绑定多个事件的方法
2017/10/11 jQuery
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
2018/12/11 jQuery
原来JS还可以这样拆箱转换详解
2019/02/01 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
2019/09/02 Javascript
layui复选框限制选择个数的方法
2019/09/18 Javascript
vue+elementUI动态生成面包屑导航教程
2019/11/04 Javascript
仿照Element-ui实现一个简易的$message方法
2020/09/14 Javascript
Python SQLAlchemy基本操作和常用技巧(包含大量实例,非常好)
2014/05/06 Python
详解Python函数作用域的LEGB顺序
2016/05/14 Python
Python字符串拼接六种方法介绍
2017/12/18 Python
Python cv2 图像自适应灰度直方图均衡化处理方法
2018/12/07 Python
python 读取鼠标点击坐标的实例
2018/12/29 Python
用python实现刷点击率的示例代码
2019/02/21 Python
Python3 列表,数组,矩阵的相互转换的方法示例
2019/08/05 Python
python实现银行管理系统
2019/10/25 Python
python 实现多维数组转向量
2019/11/30 Python
大学生新学期计划书
2014/04/28 职场文书
财务科长个人对照检查材料
2014/09/18 职场文书
十一国庆节“向国旗敬礼”主题班会活动方案
2014/09/27 职场文书
农业项目合作意向书
2015/05/08 职场文书
指导老师鉴定意见
2015/06/05 职场文书
员工升职自我评价
2019/03/26 职场文书
MySQL 执行数据库更新update操作的时候数据库卡死了
2022/05/02 MySQL