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 获取select下拉列表值的代码
Sep 07 Javascript
js自定义事件代码说明
Jan 31 Javascript
js中用window.open()打开多个窗口的name问题
Mar 13 Javascript
JavaScript ParseFloat()方法
Dec 18 Javascript
Bootstrap简单表单显示学习笔记
Nov 15 Javascript
利用node.js如何创建子进程详解
Dec 09 Javascript
three.js实现3D模型展示的示例代码
Dec 31 Javascript
JS处理一些简单计算题
Feb 24 Javascript
vue页面切换到滚动页面显示顶部的实例
Mar 13 Javascript
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
微信小程序跳转到其他网页(外部链接)的实现方法
Sep 20 Javascript
swiper4实现移动端导航栏tab滑动切换
Oct 16 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依赖注入的理解实例分析
2016/10/09 PHP
php数据库操作model类(使用__call方法)
2016/11/16 PHP
PHP asXML()函数讲解
2019/02/03 PHP
PHP registerXPathNamespace()函数讲解
2019/02/03 PHP
用htc组件制作windows选项卡
2007/01/13 Javascript
JavaScript 字符串与数组转换函数[不用split与join]
2009/12/13 Javascript
基于jquery的跨域调用文件
2010/11/19 Javascript
jquery struts 验证唯一标识(公用方法)
2013/03/27 Javascript
浅析javascript的间隔调用和延时调用
2014/11/12 Javascript
JS数组去掉重复数据只保留一条的实现代码
2016/08/11 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
Node.js使用NodeMailer发送邮件实例代码
2017/03/06 Javascript
JavaScript之排序函数_动力节点Java学院整理
2017/06/30 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
手动实现把python项目发布为exe可执行程序过程分享
2014/10/23 Python
Python实现复杂对象转JSON的方法示例
2017/06/22 Python
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
在cmd中运行.py文件: python的操作步骤
2018/05/12 Python
在PyCharm环境中使用Jupyter Notebook的两种方法总结
2018/05/24 Python
python处理csv中的空值方法
2018/06/22 Python
python numpy 显示图像阵列的实例
2018/07/02 Python
Python读写zip压缩文件的方法
2018/08/29 Python
pytorch 实现cross entropy损失函数计算方式
2020/01/02 Python
Pycharm编辑器功能之代码折叠效果的实现代码
2020/10/15 Python
CSS3制作ajax loader icon实现思路及代码
2013/08/25 HTML / CSS
解析HTML5中的新功能本地存储localStorage
2016/03/01 HTML / CSS
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
javascript实现用户必须勾选协议实例讲解
2021/03/24 Javascript
市场营销求职信范文
2014/02/21 职场文书
农林环境专业求职信
2014/03/13 职场文书
汤姆叔叔的小屋读书笔记
2015/06/30 职场文书
Keras多线程机制与flask多线程冲突的解决方案
2021/05/28 Python
Java使用jmeter进行压力测试
2021/07/09 Java/Android
Window server中安装Redis的超详细教程
2021/11/17 Redis