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学习笔记(十四) window对象使用介绍
Jun 20 Javascript
jquery选择器之层级过滤选择器详解
Jan 27 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
Apr 03 Javascript
jquery 中的each()跳出循环的语句
May 23 Javascript
有关json_decode乱码及NULL的问题
Oct 13 Javascript
jQuery ajax应用总结
Jun 02 Javascript
javascript作用域、作用域链(菜鸟必看)
Jun 16 Javascript
Angular 页面跳转时传参问题
Aug 01 Javascript
详解jquery选择器的原理
Aug 01 jQuery
详细分析单线程JS执行问题
Nov 22 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
vue基于better-scroll实现左右联动滑动页面
Jun 30 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初学入门
2006/11/19 PHP
无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装(win+linux)
2012/05/05 PHP
destoon整合UCenter图文教程
2014/06/21 PHP
Symfony页面的基本创建实例详解
2015/01/26 PHP
php通过执行CutyCapt命令实现网页截图的方法
2016/09/30 PHP
yii2中dropDownList实现二级和三级联动写法
2017/04/26 PHP
php array 转json及java 转换 json数据格式操作示例
2019/11/13 PHP
统一接口:为FireFox添加IE的方法和属性的js代码
2007/03/25 Javascript
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
2007/07/21 Javascript
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
javascript写的一个模拟阅读小说的程序
2014/04/04 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
iframe里的页面禁止右键事件的方法
2014/06/10 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
2014/06/24 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
js漂浮广告实现代码
2015/08/15 Javascript
基于Jquery插件实现跨域异步上传文件功能
2016/04/26 Javascript
jQuery Easyui 下拉树组件combotree
2016/12/16 Javascript
详解VS Code使用之Vue工程配置format代码格式化
2019/03/20 Javascript
Paypal支付不完全指北
2020/06/04 Javascript
[53:43]VP vs NewBee Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
Python判断文本中消息重复次数的方法
2016/04/27 Python
再谈Python中的字符串与字符编码(推荐)
2016/12/14 Python
Python中functools模块函数解析
2017/03/12 Python
python实现数据预处理之填充缺失值的示例
2017/12/22 Python
Python找出最小的K个数实例代码
2018/01/04 Python
Python采集代理ip并判断是否可用和定时更新的方法
2018/05/07 Python
Python开启线程,在函数中开线程的实例
2019/02/22 Python
Python中单线程、多线程和多进程的效率对比实验实例
2019/05/14 Python
利用Python绘制有趣的万圣节南瓜怪效果
2019/10/31 Python
用python爬虫批量下载pdf的实现
2020/12/01 Python
HTML5 拖放(Drag 和 Drop)详解与实例代码
2017/09/14 HTML / CSS
浅谈HTML5中dialog元素尝鲜
2018/10/15 HTML / CSS
详解如何获取localStorage最大存储大小的方法
2020/05/21 HTML / CSS
英国高端食品和葡萄酒超市:Waitrose
2016/08/23 全球购物
合伙经营协议书范本
2014/04/18 职场文书