javascript的事件绑定与事件委托
昨天有位web前端爱好者问关于javascript事件绑定和事件委托的知识,小编今天就来跟大家交流一下这个知识点!
事件绑定:事件是用户或者浏览器自身进行的特定的行为,这些事件都有自己特定的名字,如:点击,加载,鼠标经过等。用于响应事件并进行特定的处理的函数就是事件处理程序。而事件绑定就是为指定的某个事件绑定指定的事件处理程序。
事件绑定的几种中方法
方法一:绑定元素属性
最简单和向后兼容性最好的事件绑定方法是把事件绑定到元素标识的属性。
例如:
<button οnclick='myFun()'>click me</button>
<script>
function myFun(){
alert('I get it!');
}
</script>
方法二:绑定对象属性
把一个函数的引用赋值给一个事件属性的时候,就发生了绑定。函数的引用是指函数的名称,但是不带函数定义中的括号。
例如: document.forms[0].myButton.onclick = myFunc;
应该注意一点:在事件触发的时候,没有办法向事件函数传递参数。
方法三: IE支持的attachEvent() 方法
attachEvent() 方法的用法如下所示:
elemObject.attachEvent("eventName", functionReference);
eventName 参数的值是表示事件名称的字符串,比如 onmousedown、onclick。functionReference 参数是一个不带括号的函数引用。
方法四:使用 W3C DOM 的 addEventListener() 方法
W3C DOM 规范为 DOM 层次中的每一个结点都定义了一个addEventListener()方法。HTML 元素是 DOM 结点中的一类,在一对元素标识内部的文本结点也是一个结点,也能够接收事件。
方法的语法如下所示:
nodeReference.addEventListener("eventType", listenerReference, captureFlag);
addEventListener() 方法为指定的结点注册了一个事件,表示该结点希望处理相应的事件。
第一个参数是一个声明事件类型的字符串(不带"on"前缀),比如click,mousedown,和keypress。
第二个参数listenerReference 参数是一个不带括号的函数引用。
第三个参数captureFlag是boolean类型,指明该结点是否以DOM中所谓的捕捉模式来侦听事件,对于一个典型的事件侦听器来说,第三个参数应该为false。
事件委托:利用事件冒泡机制,在最顶层触发事件的dom对象上绑定一个处理函数。在当有需要很多dom对象要绑定事件的情况下,可以使用事件委托。
写法如下:
function fn(d) {
document.onclick = function(e) {
var e = e || window.event;
var target = e.srcElement || e.target;
if (target.tagName == “LI”) {
// ……
}
}
}
e.srcElement || e.target: 获取事件发生时,最初的那个dom元素。
target.tagName:最初的那个dom元素的标签名字,例如:LI;通过对元素属性的判断,例如标签名,ID ,CLASS等等,来执行不同的处理函数。
这样做比起每一个元素都绑定一个事件,然后为每一个事件再绑定一个函数效率要高很多。
上例:点击任何一个LI都会触发,document的onclick的事件,(注意这里的LI并没有绑定任何的onclick事件),这样就可以理解为一种“委托”。把事件交给document.让它去处理li点击后应该执行的语句。
前端爱好者们约定,阅读后:
if(‘觉得有帮助’)
{
分享(‘I get it!’);
}
else if(‘已了解’)
{
分享(‘a piece of cake!’);
}
else if('看不懂')
{
回复小编('help me!');
}
图片来源于网络-------
javascript的事件绑定与事件委托相关推荐
- 事件绑定、事件监听、事件委托
2019独角兽企业重金招聘Python工程师标准>>> 在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代理)等 ...
- 你真的理解事件绑定、事件冒泡和事件委托吗?
一文了解Web API中的事件绑定.事件冒泡.事件委托 引言 正文 一.事件绑定 1.事件和事件绑定时什么? 2.事件是如何实现的? 二.事件冒泡 1.事件模型 2.事件模型解析 (1)捕获阶段 (2 ...
- addeventlistener事件第三个参数_简析JavaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序...
这篇文章主要介绍了javaScript 事件绑定.事件冒泡.事件捕获和事件执行顺序整理总结的相关资料 (一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式:在htm ...
- 简析JavaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序
JavaScript 事件绑定.事件冒泡.事件捕获和事件执行顺序 这篇文章主要介绍了javaScript 事件绑定.事件冒泡.事件捕获和事件执行顺序整理总结的相关资料 (一)事件绑定的几种方式 jav ...
- 事件绑定,事件监听,事件委托
事件绑定,事件监听,事件委托 事件绑定 一个元素只能绑定一个事件 obj.on+事件名称=funciton(){} 事件监听 事件监听可以监听很多很多事件. this指向当前调用触发事件的主体对象. ...
- HTML——jQuery之事件绑定、取消事件绑定及事件委托
事件绑定 事件绑定有两种方法:分别是:.click() 和.on() <!DOCTYPE html> <html lang="en"> <head&g ...
- Web基础——JavaScript之事件绑定与事件对象
目录 1.事件的绑定 2.事件的绑定(注意事项) 3.失去焦点和获得焦点 4.键盘事件 5.鼠标事件 6.表单事件 7.页面加载事件 8.下拉框事件 9.事件对象 10.currentTarget和t ...
- JavaScript基础14-day16【事件委派、事件绑定、事件传播、滚轮事件、键盘事件、键盘移动div】
学习地址: 谷粒学院--尚硅谷 哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
- jquery事件绑定与事件委托
//事件绑定简写形式$(".div2 button").click(function () {$(".div1").scrollTop(0)})//写全了方式$ ...
最新文章
- [JavaScript]使用document.createDocumentFragment优化性能
- php密码重复,AngularJs验证重复密码的方法(两种)
- html文字阴影php,HTML_html5文字阴影效果text-shadow使用示例,复制代码代码如下: !DOCTYPE h - phpStudy...
- 去西藏旅游一次要花多少钱,还有8/9月份去那边适合嘛?
- 【博客话题】技术之路上的人和事
- axis idea 设置apache_Axis2创建WebService实例 --- 接口发布
- python列表元素分割_在Python中分隔列表元素
- CTF中字符长度限制下的命令执行 rce(7字符5字符4字符)汇总
- LaTeX给表格的一整行加删除线(横线)
- root_path运用python_Python current_app.root_path方法代碼示例
- CURA软件 3D打印切片软件 初次设置界面取消(忘记设置)后怎么再次进行设置
- 线性回归 原理及公式推导
- PowerMockerJacoco单元测试全解
- C++ 的一些免费库
- JS数组遍历方式 小小总结一下
- 超星项目进程2023.5.17
- BUAA数据结构第五次作业2023
- 分析某款网络收音机的数据解析部分
- 韦东山衔接班——4.3_构建根文件系统之busybox
- 关于做好2022年享受税收优惠政策的集成电路企业或项目、软件企业清单制定工作有关要求的通知