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 TO HTML 转换
Jun 26 Javascript
return false;和e.preventDefault();的区别
Jul 11 Javascript
jQuery中;function($,undefined) 前面的分号的用处
Dec 17 Javascript
jQuery分组选择器用法实例
Dec 23 Javascript
JavaScript基础——使用Canvas绘图
Nov 02 Javascript
vue.js父组件使用外部对象的方法示例
Apr 25 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
Apr 27 Javascript
详解React开发必不可少的eslint配置
Feb 05 Javascript
js捆绑TypeScript声明文件的方法教程
Apr 13 Javascript
在vue项目中正确使用iconfont的方法
Sep 28 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 Javascript
vue基于v-charts封装双向条形图的实现代码
Dec 09 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
全国FM电台频率大全 - 9 上海市
2020/03/11 无线电
咖啡豆的最常见发酵处理方法,详细了解一下
2021/03/03 冲泡冲煮
在PHP中使用灵巧的体系结构
2006/10/09 PHP
通俗易懂的php防注入代码
2010/04/07 PHP
smarty中先strip_tags过滤html标签后truncate截取文章运用
2010/10/25 PHP
PHP学习笔记之一
2011/01/17 PHP
php 可变函数使用小结
2018/06/12 PHP
javascript new 需不需要继续使用
2009/07/02 Javascript
javascript取消文本选定的实现代码
2010/11/14 Javascript
JQuery CheckBox(复选框)操作方法汇总
2015/04/15 Javascript
快速学习AngularJs HTTP响应拦截器
2015/12/31 Javascript
node.js+express制作网页计算器
2016/01/17 Javascript
js利用clipboardData实现截屏粘贴功能
2016/10/12 Javascript
JavaScript实现选中文字提示新浪微博分享效果
2017/06/15 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
2020/04/26 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
[42:24]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第三场 11.27
2020/12/01 DOTA
Python求两个list的差集、交集与并集的方法
2014/11/01 Python
Python模拟登录12306的方法
2014/12/30 Python
Python中创建字典的几种方法总结(推荐)
2017/04/27 Python
python ChainMap的使用和说明详解
2019/06/11 Python
Python之数据序列化(json、pickle、shelve)详解
2019/08/30 Python
图解python全局变量与局部变量相关知识
2019/11/02 Python
python异常处理和日志处理方式
2019/12/24 Python
使用Python第三方库pygame写个贪吃蛇小游戏
2020/03/06 Python
python 6行代码制作月历生成器
2020/09/18 Python
基于MUI框架使用HTML5实现的二维码扫描功能
2018/03/01 HTML / CSS
Mankind西班牙男士护肤品网站:购买皮肤护理、护发和剃须
2017/04/27 全球购物
BNKR中国官网:带你感受澳洲领先潮流时尚
2018/08/21 全球购物
Woods官网:加拿大最古老、最受尊敬的户外品牌之一
2020/09/12 全球购物
环境保护建议书
2014/08/26 职场文书
离职证明范本(5篇)
2014/09/19 职场文书
2015年教师教学工作总结
2015/04/28 职场文书
2015年小学数学教研组工作总结
2015/05/21 职场文书
《自然之道》读后感3篇
2019/12/17 职场文书
通过shell脚本对mysql的增删改查及my.cnf的配置
2021/07/07 MySQL