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 相关文章推荐
详解JS 比较两个Json对象的值是否相等的实例
Nov 20 Javascript
jQuery中prependTo()方法用法实例
Jan 08 Javascript
jquery实现简单的轮换出现效果实例
Jul 23 Javascript
Javascript removeChild()删除节点及删除子节点的方法
Dec 27 Javascript
浅析JavaScript回调函数应用
May 22 Javascript
AngularJS入门教程之服务(Service)
Jul 27 Javascript
BootStrap中的表单大全
Sep 07 Javascript
JS图片压缩(pc端和移动端都适用)
Jan 12 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
Feb 06 Javascript
使用typescript开发angular模块并发布npm包
Apr 19 Javascript
微信小程序停止其他视频播放当前视频的实例代码
Dec 25 Javascript
jquery实现简易验证插件封装
Sep 13 jQuery
整理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(3)
2006/10/09 PHP
PHP实现手机归属地查询API接口实现代码
2012/08/27 PHP
PHP与javascript实现变量交互的示例代码
2013/07/23 PHP
php导出excel格式数据问题
2014/03/11 PHP
php去除换行(回车换行)的三种方法
2014/03/26 PHP
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
JQuery选择器特辑 详细小结
2012/05/14 Javascript
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
2014/02/04 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
jQuery使用ajaxSubmit()提交表单示例
2014/04/04 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
javascript实现tab切换特效
2015/11/12 Javascript
批量下载对路网图片并生成html的实现方法
2016/06/07 Javascript
AngularJS表达式讲解及示例代码
2016/08/16 Javascript
详解Vue This$Store总结
2018/12/17 Javascript
[03:38]2014DOTA2西雅图国际邀请赛 VG战队巡礼
2014/07/07 DOTA
python中的多重继承实例讲解
2014/09/28 Python
python获取本机外网ip的方法
2015/04/15 Python
Python实现队列的方法
2015/05/26 Python
python实现周期方波信号频谱图
2018/07/21 Python
python的几种矩阵相乘的公式详解
2019/07/10 Python
在django中图片上传的格式校验及大小方法
2019/07/28 Python
keras 特征图可视化实例(中间层)
2020/01/24 Python
Python 实现网课实时监控自动签到、打卡功能
2020/03/12 Python
Python如何绘制日历图和热力图
2020/08/07 Python
scrapy中如何设置应用cookies的方法(3种)
2020/09/22 Python
Pytorch如何切换 cpu和gpu的使用详解
2021/03/01 Python
Sisley法国希思黎中国官网:享誉全球的奢华植物美容品牌
2019/06/30 全球购物
运动会领导邀请函
2014/01/10 职场文书
开业庆典答谢词
2014/01/18 职场文书
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
民间借贷纠纷答辩状
2015/08/03 职场文书
《莫泊桑拜师》教学反思
2016/02/22 职场文书
go select编译期的优化处理逻辑使用场景分析
2021/06/28 Golang