绑定事件的几个方法总结
以click事件为例:
1. on方法
两个好处:
a.如果一个dom元素中有多个子元素,单独去给每个子元素绑定事件的话,会影响到性能。
而现在使用on。则只用使此dom元素调用on方法,选择器用上其子元素,即可以所有符合条件的元素都能实现绑定。
$('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定click事件;
b.为动态添加的元素也能绑上指定事件; // (目前好像只有on方法可以实现此功能,其他好像都是针对已经加载好的元素定义事件)
$('ul li').on('click', function(){console.log('click');})的绑定方式和$('ul li').bind('click', function(){console.log('click');})一样;
通过js给ul添加了一个li:$('ul').append('<li>js new li<li>');');这个新加的li是不会被绑上click事件的
但是我用$('ul').on('click', 'li', function(){console.log('click');}方式绑定,然后动态添加li:$('ul').append('<li>js new li<li>');这个新生成的li被绑上了click事件
即在事件委托绑定模式下,即使是执行on()
函数之后新添加的元素,只要它符合条件,绑定的事件处理函数也对其有效。
2. $("p").click(function(){
alert("haha");
})
3.一般作为标签中的属性来使用onclick
<p οnclick="haha">nihao</p>
function haha(){
alert("onclick");
}
4. addEventListener(event,funtionName,useCapture)
obj.addEventListener("click",fn,fasle)); function fn(){ //do something.. }
二----------------------------------------------------------------------------------------------------------------------
其中on与addEventListener,on事件会被后面的on事件覆盖,而addEventListener则不会、
’
//obj是一个dom对象,下同
//注册第一个点击事件
obj.onclick(function(){
alert("hello world");
});
//注册第二个点击事件
obj.onclick(function(){
alert("hello world too"); //最终只会是这个
});
//注册第一个点击事件
obj.addEventListener("click",function(){
alert("hello world");
}));
//注册第二个点击事件
obj.addEventListener("click",function(){
alert("hello world too");
}));
、、
- click(单击)
- dbclick(双击)
- mousedown(鼠标按下)
- mouseout(鼠标移走)
- mouseover(鼠标移入)
- mouseup(鼠标弹起)
- mousemove(鼠标移动)
- keydown(键按下)
- keypress(按键)
- keyup(键起来)
- load(加载页面)
- unload(卸载离开页面)
- change(改变内容)
- scroll(滚动)
- focus(获得焦点)
- blur(失去焦点)
最后补充一个博客链接:http://blog.csdn.net/zhcscs/article/details/46486613
里面写到了bind delegate on方法的区别及使用。很赞
转载于:https://www.cnblogs.com/yyzyxy/p/8034187.html
绑定事件的几个方法总结相关推荐
- react中绑定点击事件_在React中绑定事件处理程序的最佳方法
react中绑定点击事件 by Charlee Li 通过李李 在React中绑定事件处理程序的最佳方法 (The best way to bind event handlers in React) ...
- React绑定事件的四种方法
今天给大家分享一下react绑定事件的四种方法,也许会有不准确的地方,欢迎指点出来,大家一起进步~ 首先要先了解,在js中class的方法默认不会绑定this,默认情况下是undefined,所以就需 ...
- 【js】绑定事件的两种方法
方法一: 为需要绑定事件的标签添加一个属性onclick 代码实现: <input type="button" value="测试按钮" onclick= ...
- jQuery unbind 删除绑定事件 / 移除标签方法
jQuery unbind 删除绑定事件 unbind([type],[data]) 是 bind()的反向操作,从每一个匹配的元素中删除绑定的事件.如果没有参数,则删除所有绑定的事件.你可以将你用b ...
- plupload上传插件绑定事件的两种方法
在经受一天的磨难之后终于找到处理事件方法: 先引用: <script src="js/plupload.full.min.js" type="text/javasc ...
- jQuery中绑定事件的几种方法
以click事件为例,jQuery中绑定事件有三种方法: (1)target.click(function(){}); (2)target.bind("click",functi ...
- js循环绑定事件问题及解决方法
js初学者经常遇到的循环绑定事件问题 js循环绑定事件 在编写JS代码的时候,我们经常会遇到要对一系列元素进行事件绑定的情况,然后就会理所当然的开一个for循环,对元素的事件进行赋值等操作,最后运行的 ...
- js 绑定事件的几种方法 addEventListener()
看代码 <!DOCTYPE html> <html><head><meta charset="UTF-8"><title> ...
- 原生js绑定事件的三种方法
// 绑定事件// 行内绑定// 选择元素绑定事件// 事件监听 有三个参数('什么事件','函数','true或false')true(事件捕获) false(事件冒泡)document.query ...
最新文章
- jupyter配置默认启动目录
- Grafana关键表结构分析
- 13、ActiveX控件
- 《大型网站服务器容量规划》一2.1 什么是容量
- MySQL流程控制的使用
- 笔记-高项案例题-2019年下-质量管理-帕累托分析
- Linux Kernel 3.0新特性概览(转)
- 我的YUV播放器MFC小笔记:解析文件名称
- Unity 2D 跑酷道路动起来
- curl实现发送Get和Post请求(PHP)
- 公有IP和私有IP及最新国内各运营商(ISP)IP段表
- SHFileOperation
- 《鹰猎长空》看世界范围内电影票价上涨的原因
- day_8——LeetCode1:两数之和
- 〖Python APP 自动化测试实战篇⑩〗- app自动化总结与展望
- Fluxion安装教程
- Mahout学习总结
- python归一化后全部都是0咋办_python归一化处理
- DM7数据库DMAP服务异常,报错“ dmap init failed, code[-7157]: 管道文件已存在”
- 手机修图软件测试,Snapseed手机修图软件免费版