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 相关文章推荐
getElementById在任意一款浏览器中都可以用吗的疑问回复
May 13 Javascript
javascript代码加载优化方法
Jan 30 Javascript
JS获取select-option-text_value的方法
Dec 26 Javascript
浅谈javascript中自定义模版
Jan 29 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
Jul 01 Javascript
jquery实现简单的二级导航下拉菜单效果
Sep 07 Javascript
javascript合并表格单元格实例代码
Jan 03 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 Javascript
JavaScript实现随机数生成器(去重)
Oct 13 Javascript
基于JS实现视频上传显示进度条
May 12 Javascript
JS使用for in有序获取对象数据
May 19 Javascript
el-table-column 内容不自动换行的解决方法
Aug 14 Vue.js
整理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
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
php下封装较好的数字分页方法
2010/11/23 PHP
PHP关联链接常用代码
2012/11/05 PHP
php+ajax无刷新上传图片实例代码
2015/11/17 PHP
很酷的javascript loading效果代码
2008/06/18 Javascript
非常棒的10款jQuery 幻灯片插件
2011/06/14 Javascript
javascript之querySelector和querySelectorAll使用介绍
2011/12/20 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
2012/12/06 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
2013/11/13 Javascript
jquery实现更改表格行顺序示例
2014/04/30 Javascript
基于JS实现简单的样式切换效果代码
2015/09/04 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
2016/01/19 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
微信小程序 action-sheet底部菜单详解
2016/10/27 Javascript
vue router导航守卫(router.beforeEach())的使用详解
2019/04/19 Javascript
vue 实现LED数字时钟效果(开箱即用)
2019/12/08 Javascript
JS实现简易留言板增删功能
2020/02/08 Javascript
Python面向对象编程中的类和对象学习教程
2015/03/30 Python
Django中处理出错页面的方法
2015/07/15 Python
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
Atom Python 配置Python3 解释器的方法
2019/08/28 Python
Python实现打印实心和空心菱形
2019/11/23 Python
安装并免费使用Pycharm专业版(学生/教师)
2020/09/24 Python
Python爬虫之Selenium下拉框处理的实现
2020/12/04 Python
受欢迎的大学生自我评价
2013/12/05 职场文书
廉洁自律承诺书
2014/03/27 职场文书
本科毕业生求职信
2014/06/15 职场文书
历史学专业求职信
2014/06/19 职场文书
励志演讲稿300字
2014/08/21 职场文书
2014年重阳节活动策划方案书
2014/09/16 职场文书
校园开放日新闻稿
2015/07/17 职场文书
大学生各类奖学金申请书
2019/06/24 职场文书
创业计划书之面包店
2019/09/17 职场文书
JS继承最简单的理解方式
2021/03/31 Javascript
Go语言切片前或中间插入项与内置copy()函数详解
2021/04/27 Golang
Android Canvas绘制文字横纵向对齐
2022/06/05 Java/Android