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 正则替换 replace(regExp, function)用法
May 22 Javascript
读jQuery之四(优雅的迭代)
Jun 20 Javascript
JavaScript 用cloneNode方法克隆节点的代码
Oct 15 Javascript
jQuery获得内容和属性方法及示例
Dec 02 Javascript
深入理解JavaScript是如何实现继承的
Dec 12 Javascript
使用js判断TextBox控件值改变然后出发事件
Mar 07 Javascript
javascript对JSON数据排序的3个例子
Apr 12 Javascript
Javascript中的call()方法介绍
Mar 15 Javascript
text-align:justify实现文本两端对齐 兼容IE
Aug 19 Javascript
JS弹出新窗口被拦截的解决方法
Aug 09 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
Dec 30 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
Oct 23 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&amp;mysql(四)
2006/10/09 PHP
php恢复数组的key为数字序列的方法
2015/04/28 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
PHP实现微信退款功能
2018/10/02 PHP
php模拟post提交请求调用接口示例解析
2020/08/07 PHP
通过Unicode转义序列来加密,按你说的可以算是混淆吧
2007/05/06 Javascript
将string解析为json的几种方式小结
2010/11/11 Javascript
基于Jquery制作的幻灯片图集效果打包下载
2011/02/12 Javascript
实现高性能javascript的注意事项
2019/05/27 Javascript
什么时候不能在 Node.js 中使用 Lock Files
2019/06/24 Javascript
jQuery中DOM操作原则实例分析
2019/08/01 jQuery
JavaScript中作用域链的概念及用途讲解
2020/08/06 Javascript
原生js+canvas实现验证码
2020/11/29 Javascript
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
[01:01:01]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第一场 10.29
2020/10/29 DOTA
Python中动态获取对象的属性和方法的教程
2015/04/09 Python
python生成圆形图片的方法
2020/03/25 Python
对pandas中apply函数的用法详解
2018/04/10 Python
详解Python_shutil模块
2019/03/15 Python
django做form表单的数据验证过程详解
2019/07/26 Python
scrapy爬虫:scrapy.FormRequest中formdata参数详解
2020/04/30 Python
python 绘制场景热力图的示例
2020/09/23 Python
python如何获得list或numpy数组中最大元素对应的索引
2020/11/16 Python
使用JS+CSS3技术:让你的名字动起来
2013/04/27 HTML / CSS
加拿大在线隐形眼镜专家:PerfectLens.ca
2016/11/19 全球购物
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
银行实习鉴定
2013/12/13 职场文书
运动会邀请函范文
2014/01/31 职场文书
投资建议书模板
2014/05/12 职场文书
四风问题班子对照检查材料
2014/09/27 职场文书
故宫导游词
2015/01/31 职场文书
道歉信范文
2015/05/12 职场文书
共青团优秀团员申请书(范文)
2019/08/15 职场文书
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers
Java实现简单小画板
2022/06/10 Java/Android