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开发技术大全-第3章 js数据类型
Jul 03 Javascript
JS完成代码前最好对其做5件事
Apr 07 Javascript
JavaScript中检查对象property的存在性方法介绍
Dec 30 Javascript
浅析JavaScript声明变量
Dec 21 Javascript
几种经典排序算法的JS实现方法
Mar 25 Javascript
layer弹出层框架alert与msg详解
Mar 14 Javascript
JavaScript结合HTML DOM实现联动菜单
Apr 05 Javascript
学习使用Bootstrap栅格系统
May 11 Javascript
基于jQuery封装的分页组件
Jun 26 jQuery
vue自定义指令directive的使用方法
Apr 07 Javascript
javascript全局自定义鼠标右键菜单
Dec 08 Javascript
使用原生javascript开发计算器实例代码
Feb 21 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无限分类代码,支持数组格式化、直接输出菜单两种方式
2011/05/18 PHP
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
详细解读PHP中接口的应用
2015/08/12 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
PHP判断当前使用的是什么浏览器(推荐)
2019/10/27 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
一款Jquery 分页插件的改造方法(服务器端分页)
2011/07/11 Javascript
node.js中的buffer.toString方法使用说明
2014/12/14 Javascript
node.js中的fs.renameSync方法使用说明
2014/12/16 Javascript
JavaScript日期时间与时间戳的转换函数分享
2015/01/31 Javascript
基于JavaScript代码实现自动生成表格
2016/06/15 Javascript
详解Vue.js搭建路由报错 router.map is not a function
2017/06/27 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
2017/07/13 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
2017/11/29 Javascript
解决eclipse中没有js代码提示的问题
2018/10/10 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
vue中格式化时间过滤器代码实例
2019/04/17 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
Openlayers实现地图全屏显示
2020/09/28 Javascript
[02:41]DOTA2英雄基础教程 谜团
2013/12/10 DOTA
python实现学生管理系统
2018/01/11 Python
python正则中最短匹配实现代码
2018/01/16 Python
pyqt5 tablewidget 利用线程动态刷新数据的方法
2019/06/17 Python
python 内置函数汇总详解
2019/09/16 Python
详解python tkinter 图片插入问题
2020/09/03 Python
Python模拟登录requests.Session应用详解
2020/11/17 Python
纯CSS3制作的鼠标悬停时边框旋转
2017/01/03 HTML / CSS
化工专业推荐信范文
2013/11/28 职场文书
《桂林山水》教学反思
2014/02/08 职场文书
艺术学院毕业生自荐信
2014/07/05 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
2015年计划生育协会工作总结
2015/05/13 职场文书
百万英镑观后感
2015/06/09 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书
如何写好竞聘报告
2019/04/03 职场文书
使用Nginx+Tomcat实现负载均衡的全过程
2022/05/30 Servers