开发者社区> 优惠券发放> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

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

相关文章
Javascript事件绑定的几种方式
 Javascript的事件绑定主要有四种方法(一下在IE中运行正常,但不保证其他浏览器):   [注:onXXX为某一事件,fun为某一function,domId为某一DOM对象id,event类型见后边附录。
736 0
javascript实现省市区三级联动选择的代码(数据为模拟json数据)
javascript实现省市区三级联动选择的代码(数据为模拟json数据):
0 0
JavaScript实现四则运算
JavaScript实现四则运算
0 0
JavaScript实现复选框全选与全不选的效果
JavaScript实现复选框全选与全不选的效果
0 0
JavaScript实现鼠标放上去之后高亮显示且隔行换色
JavaScript实现鼠标放上去之后高亮显示且隔行换色
0 0
JavaScript的正则表达式实现邮箱校验
JavaScript的正则表达式实现邮箱校验
0 0
JavaScript实现搜索框效果
JavaScript实现搜索框效果
0 0
JavaScript实现九九乘法表
JavaScript实现九九乘法表
0 0
JavaScript实现倒计时
JavaScript实现倒计时
0 0
JavaScript 实现字符串驼峰式与下划线式互相转换
JavaScript 实现字符串驼峰式与下划线式互相转换
0 0
+关注
优惠券发放
阿里云优惠码阿里云推荐券bieryun.com
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Javascript异步编程
立即下载
Javascript中的函数
立即下载
Javascript中的对象
立即下载