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 火狐下取本地路径实现思路
Apr 02 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
Dec 23 Javascript
jQuery中ajax的get()方法用法实例
Dec 26 Javascript
jQuery实现ichat在线客服插件
Dec 29 Javascript
使用ajaxfileupload.js实现上传文件功能
Aug 13 Javascript
vue+node+webpack环境搭建教程
Nov 05 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
Dec 27 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
vue.js select下拉框绑定和取值方法
Mar 03 Javascript
vue+webpack中配置ESLint
Nov 07 Javascript
Nginx设置为Node.js的前端服务器方法总结
Mar 27 Javascript
Vue使用v-viewer实现图片预览
Oct 21 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
967 个函式
2006/10/09 PHP
我的php学习笔记(毕业设计)
2012/02/21 PHP
使用PHP实现Mysql读写分离
2013/06/28 PHP
php 批量查询搜狗sogou代码分享
2015/05/17 PHP
如何批量清理系统临时文件(语言:C#、 C/C++、 php 、python 、java )
2016/02/01 PHP
CodeIgniter记录错误日志的方法全面总结
2016/05/17 PHP
laravel中的错误与日志用法详解
2016/07/26 PHP
PHP多维数组排序array详解
2017/11/21 PHP
PHP实现无限极分类的两种方式示例【递归和引用方式】
2019/03/25 PHP
JS自动缩小超出大小的图片
2012/10/12 Javascript
Jquery 例外被抛出且未被接住原因介绍
2013/09/04 Javascript
JS关键字球状旋转效果的实例代码
2013/11/29 Javascript
用js判断是否为360浏览器的实现代码
2015/01/15 Javascript
Node.js开发者必须了解的4个JS要点
2016/02/21 Javascript
JS三级可折叠菜单实现方法
2016/02/29 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
2016/03/11 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
2017/08/04 jQuery
基于JavaScript实现前端数据多条件筛选功能
2020/08/19 Javascript
Vue组件通信的四种方式汇总
2018/02/08 Javascript
vue-better-scroll 的使用实例代码详解
2018/12/03 Javascript
vue动态绑定class的几种常用方式小结
2019/05/21 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
2019/09/07 Javascript
Django框架模板文件使用及模板文件加载顺序分析
2019/05/23 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
python3 常见解密加密算法实例分析【base64、MD5等】
2019/12/19 Python
python利用JMeter测试Tornado的多线程
2020/01/12 Python
Ranorex通过Python将报告发送到邮箱的方法
2020/01/12 Python
Django设置Postgresql的操作
2020/05/14 Python
GLAMGLOW香港官网:明星出镜前的秘密武器
2017/03/16 全球购物
英语专业学生的自我评价
2013/12/30 职场文书
中文专业求职信
2014/06/20 职场文书
2015年元旦文艺晚会总结(学院)
2014/11/28 职场文书
羊脂球读书笔记
2015/06/30 职场文书
美容院管理规章制度
2015/08/05 职场文书
导游词之蜀山胜景瓦屋山
2019/11/29 职场文书
python读取mat文件生成h5文件的实现
2022/07/15 Python