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使用技巧精萃[代码非常实用]
Nov 21 Javascript
JS小功能(列表页面隔行变色)简单实现
Nov 28 Javascript
教你用jquery实现iframe自适应高度
Jun 11 Javascript
jQuery实现的在线答题功能
Apr 12 Javascript
基于Javascript实现返回顶部按钮
Feb 29 Javascript
javascript html5摇一摇功能的实现
Apr 19 Javascript
AngularJS ng-blur 指令详解及简单实例
Jul 30 Javascript
利用PM2部署node.js项目的方法教程
May 10 Javascript
vue 自定义 select内置组件
Apr 10 Javascript
node基于puppeteer模拟登录抓取页面的实现
May 09 Javascript
js+springMVC 提交数组数据到后台的实例
Sep 21 Javascript
如何利用React实现图片识别App
Feb 18 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之第五天
2006/10/09 PHP
PHP在字符串中查找指定字符串并删除的代码
2008/10/02 PHP
让Json更懂中文(JSON_UNESCAPED_UNICODE)
2011/10/27 PHP
5种PHP创建数组的实例代码分享
2014/01/17 PHP
javascript 框架小结 个人工作经验
2009/06/13 Javascript
JavaScript 事件查询综合
2009/07/13 Javascript
JavaScript 应用技巧集合[推荐]
2009/08/30 Javascript
firefox插件Firebug的使用教程
2010/01/02 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
2013/04/03 Javascript
javascript中encodeURI和decodeURI方法使用介绍
2013/05/06 Javascript
用js实现输入提示(自动完成)的实例代码
2013/06/14 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
2014/06/20 Javascript
JavaScript实现的字符串replaceAll函数代码分享
2015/04/02 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
2015/11/04 Javascript
Bootstrap 附加导航(Affix)插件实例详解
2016/06/01 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
2017/01/23 Javascript
JS 调试中常见的报错问题解决方法
2017/05/20 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
2018/04/07 Javascript
微信小程序实现展示评分结果功能
2019/02/15 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
2020/08/06 Javascript
详解vue组件之间的通信
2020/08/30 Javascript
Python datetime时间格式化去掉前导0
2014/07/31 Python
Python爬虫包BeautifulSoup学习实例(五)
2018/06/17 Python
Django实战之用户认证(初始配置)
2018/07/16 Python
Windows系统下PhantomJS的安装和基本用法
2018/10/21 Python
英国休闲奢华的缩影:Crew Clothing
2019/05/05 全球购物
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
数控专业应届生求职信
2013/11/27 职场文书
网络研修随笔感言
2014/02/17 职场文书
信访工作经验交流材料
2014/05/23 职场文书
2016幼儿园中班开学寄语
2015/12/03 职场文书
机关干部正风肃纪心得体会
2016/01/15 职场文书
详解Java ES多节点任务的高效分发与收集实现
2021/06/30 Java/Android
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis
postgresql如何找到表中重复数据的行并删除
2023/05/08 MySQL