您现在的位置是:首页 > 文章详情

Javascript事件绑定常见方案详解

日期:2019-07-04点击:403

Javascript事件绑定常见方案详解
让js对用户的操作做出相应的响应,就要对事件进行绑定
DOM元素绑定事件处理function函数,不同的操作对应不同的函数名称

常见的三种绑定方式
(1)在DOM元素上直接绑定事件
(2)在js标签(实现分离)中绑定事件
(3)通过DOM lev3级事件绑定标准(事件监听)绑定事件

第一种绑定方式(DOM元素上直接绑定)

function Mybtn(){ window.confirm("我返回给用户的响应"); }

分析总结:当用户点击按钮时,触发Mybtn函数,然后返回,非常简单,这种直接写入元素中的方法很早就有,隶属于DOM的lev0级标准,所以兼容性非常好,IE8以下几乎没有问题,并且在全局范围内执行,因此Mybtn()内部的this指向全局对象window,需要注意是,想要操作这个被点击的DOM元素,this它是无效的。

第二种绑定方式(js双标签中绑定事件/实现分离)

<script> document.getElementById('btn').onclick=function(){ window.confirm("我返回给用户的响应,我是匿名函数"); }

分析总结:首先获取DOM元素,将.onclick作为方法,属性值作为函数(匿名函数),这种方法会让文档结构清晰易维护和管理,并且函数内部的this直接指向该DOM对象,如果使用函数来调用其他函数(回调函数),DOM元素.οnclick=function{函数1(),函数2()},这时函数1/函数2的this就指向了window。
缺陷:只能绑定一个事件,绑定处理一个函数,绑定两个的话第一个会被覆盖。
注意:button标签必须放在script双标签之前,否则无效。

第三种绑定方式(lev3级事件绑定标准-事件监听)

document.getElementById('Mybtn').addEventListener('click',fun); function fun(){ alert("我返回给用户的响应"); }

IE8标准
语法:element.attachEvent(event, function)
event:事件,IE标准需要加on,如onload
function:函数,触发时执行的函数
注意:
(1)如果添加了多个事件处理函数, 按"添加时的先后顺序来执行"
(2)事件参数去掉事件名称的’on’(W3C标准)
(3)事件处理函数中的this指向DOM节点自身(W3C标准)

总结:

常规的事件绑定只能绑定最后绑定的事件,而事件监听可以绑定多个事件,并且可以解除绑定,还可以封装事件监听,需要注意的是,IE8以下需要使用element.attachEvent(event,function)进行事件监听的绑定。

作者: 王佳斌
来源:CSDN
原文:https://blog.csdn.net/weixin_44198965/article/details/89599226
版权声明:本文为博主原创文章,转载请附上博文链接!

原文链接:https://yq.aliyun.com/articles/707755
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章