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 相关文章推荐
jQuery bind事件使用详解
May 05 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
Oct 03 Javascript
javascript学习笔记(十九) 节点的操作实现代码
Jun 20 Javascript
使用apply方法处理数组的三个技巧[译]
Sep 20 Javascript
javascript单例模式的简单实现方法
Jul 25 Javascript
JavaScript鼠标特效大全
Sep 13 Javascript
如何制作幻灯片(代码分享)
Jan 06 Javascript
详解weex默认webpack.config.js改造
Jan 08 Javascript
jQuery滑动效果实现方法分析
Sep 05 jQuery
vue 源码解析之虚拟Dom-render
Aug 26 Javascript
详解ECMAScript2019/ES10新属性
Dec 06 Javascript
Vue2项目中对百度地图的封装使用详解
Jun 16 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
基于HTTP长连接的&quot;服务器推&quot;技术的php 简易聊天室
2009/10/31 PHP
用 Composer构建自己的 PHP 框架之使用 ORM
2014/10/30 PHP
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
JavaScript 设计模式学习 Factory
2009/07/29 Javascript
node.js中的fs.lchmod方法使用说明
2014/12/16 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
2015/03/30 Javascript
jquery实现移动端点击图片查看大图特效
2020/09/11 Javascript
关于JSON与JSONP简单总结
2016/08/16 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
浅谈js中几种实用的跨域方法原理详解
2016/12/02 Javascript
js统计页面上每个标签的数量实例代码
2018/05/29 Javascript
javascript定时器的简单应用示例【控制方块移动】
2019/06/17 Javascript
快速对接payjq的个人微信支付接口过程解析
2019/08/15 Javascript
js实现简单掷骰子效果
2019/10/24 Javascript
JS实现导航栏楼层特效
2020/01/01 Javascript
python通过ssh-powershell监控windows的方法
2015/06/02 Python
Python使用asyncio包处理并发详解
2017/09/09 Python
利用Python循环(包括while&amp;for)各种打印九九乘法表的实例
2017/11/06 Python
python按时间排序目录下的文件实现方法
2018/10/17 Python
python实现将中文日期转换为数字日期
2020/07/14 Python
自定义Django_rest_framework_jwt登陆错误返回的解决
2020/10/18 Python
HTML5上传文件显示进度的实现代码
2012/08/30 HTML / CSS
英国领先的在线药房:Pharmacy First
2017/09/10 全球购物
几个数据库方面的面试题
2016/07/01 面试题
教师评优的个人自我评价分享
2013/09/19 职场文书
保荐人的岗位职责
2013/11/19 职场文书
管理站站长岗位职责
2013/11/27 职场文书
医药代表个人求职信范本
2013/12/19 职场文书
应急处置方案
2014/06/16 职场文书
运动会跳远广播稿5篇
2014/09/17 职场文书
幼儿园老师工作总结2015
2015/05/22 职场文书
工程主管竞聘书
2015/09/15 职场文书
送给小学生的暑假礼物!小学生必背99首古诗
2019/07/02 职场文书
Go语言中break label与goto label的区别
2021/04/28 Golang
python游戏开发Pygame框架
2022/04/22 Python
Python如何将list中的string转换为int
2022/07/15 Ruby