JS中dom0级事件和dom2级事件的区别介绍


Posted in Javascript onMay 05, 2016

dom0级事件

<a href="#" id="hash" onclick="fn();fn();">
<button type="button">返回上面进行开通</button>
</a> 
var btn=$('#hash').get();
btn.onclick=function(){
alert('');
};
btn.onclick=function(){
alert('');
};

像上面把onclick写在标签内,都是dom0级事件,fn和fn1依次执行; 第二种获取元素,绑定onclick事件也是dom0级,第二个会覆盖第一个onclick,也会覆盖行内的onclick,只会弹出222。

dom2级事件

$('#hash').click(function(){
alert('jq的dom2级点击第一次')
});
$('#hash').click(function(){
alert('jq的dom2级点击第二次')
});
btn.addEventListener('click',function(){
alert('原生dom2级第一次click')
},false);
btn.addEventListener('click',function(){
alert('原生dom2级第二次click')
},false)

以上的绑定都属于dom2级事件绑定,前面两种都是jq的绑定方式,后面都是原生js的绑定方式,不会覆盖,会依次执行jq的绑定方法和原生的绑定方法,这就是于dom0级的去别处;

dom0和dom2共存

<a href="#" id="hash" onclick="fn();fn1();">
<button type="button">返回上面进行开通</button>
</a>
<script type="text/javascript">
function fn(){
alert('ade');
}
function fn1(){
alert('ade111');
}
var btn=$('#hash').get(0);
btn.onclick=function(){
alert('111');
};
$('#hash').click(function(){
alert('jq的dom2级点击第一次')
});
btn.addEventListener('click',function(){
alert('原生dom2级第一次click')
},false);
</script>

上面的例子有一个两个dom0级和两个dom3级绑定事件,js里面写的dom0级会覆盖行内的fn和fn1方法,但是js里面的dom0可以喝dom2共存,结果是弹出111 jq的dom2级点击第一次 原生dom2级第一次click;

以上内容是小编给大家带来的JS中dom0级事件和dom2级事件的区别介绍 ,希望对大家有所帮助,同时也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript与flash交互通信基础教程
Aug 07 Javascript
javascript针对DOM的应用分析(三)
Apr 15 Javascript
浅析jquery的js图表组件highcharts
Mar 06 Javascript
jquery如何扑捉回车键触发的事件
Apr 24 Javascript
基于jQuery实现动态搜索显示功能
May 05 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
Nov 09 Javascript
vue-resourse将json数据输出实例
Mar 08 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
May 08 Javascript
vue 1.0 结合animate.css定义动画效果
Jul 11 Javascript
Vue插件从封装到发布的完整步骤记录
Feb 28 Javascript
JS面试题中深拷贝的实现讲解
May 07 Javascript
微信小程序实现多选框功能的实例代码
Jun 24 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
May 05 #Javascript
jQuery Mobile 和 Kendo UI 的比较
May 05 #Javascript
深入理解js promise chain
May 05 #Javascript
详解JavaScript中基于原型prototype的继承特性
May 05 #Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
May 05 #Javascript
javaScript中的原型解析【推荐】
May 05 #Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 #Javascript
You might like
php实现监听事件
2013/11/06 PHP
php去除字符串换行符示例分享
2014/02/13 PHP
Thinkphp集成抖音SDK的实现方法
2020/04/28 PHP
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
js和as的稳定传值问题解决
2013/07/14 Javascript
JavaScript原生对象之Date对象的属性和方法详解
2015/03/13 Javascript
Ajax的概述与实现过程
2016/11/18 Javascript
JS中实现函数return多个返回值的实例
2017/02/21 Javascript
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
vue计算属性get和set用法示例
2019/02/08 Javascript
vue实现数字动态翻牌的效果(开箱即用)
2019/12/08 Javascript
javascript实现电商放大镜效果
2020/11/23 Javascript
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
原生js实现自定义滚动条组件
2021/01/20 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
vue 动态添加的路由页面刷新时失效的原因及解决方案
2021/02/26 Vue.js
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
Python求导数的方法
2015/05/09 Python
讲解Python中运算符使用时的优先级
2015/05/14 Python
Python入门学习之字符串与比较运算符
2015/10/12 Python
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
国际化的太阳镜及太阳镜配件零售商:Sunglass Hut
2016/07/26 全球购物
韩国CJ食品专卖网:CJonmart
2016/09/11 全球购物
意大利在线高尔夫商店:Online Golf
2021/03/09 全球购物
如何利用find命令查找文件
2015/02/07 面试题
机械专业个人求职自荐信格式
2013/09/21 职场文书
市场开发计划书
2014/05/07 职场文书
会议接待欢迎词范文
2015/01/26 职场文书
兴趣班停课通知
2015/04/24 职场文书
工作态度怎么写
2015/06/25 职场文书
2016年“我们的节日·重阳节”主题活动总结
2016/04/01 职场文书
关于maven依赖 ${xxx.version}报错问题
2022/01/18 Java/Android
hive数据仓库新增字段方法
2022/06/25 数据库