Javascript事件绑定常见方案详解-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

Javascript事件绑定常见方案详解

简介: Javascript事件绑定常见方案详解让js对用户的操作做出相应的响应,就要对事件进行绑定DOM元素绑定事件处理function函数,不同的操作对应不同的函数名称 常见的三种绑定方式(1)在DOM元素上直接绑定事件(2)在js标签(实现分离)中绑定事件(3)通过DOM lev3级事件绑定标准(事...

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
版权声明:本文为博主原创文章,转载请附上博文链接!

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: