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 相关文章推荐
在网页中控制wmplayer播放器
Jul 01 Javascript
AJAX架构之Dojo篇
Apr 10 Javascript
JS 文件本身编码转换 图文教程
Oct 12 Javascript
Node.js程序中的本地文件操作用法小结
Mar 06 Javascript
Three.js学习之几何形状
Aug 01 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
Oct 10 Javascript
Vue项目全局配置微信分享思路详解
May 04 Javascript
vue中nextTick用法实例
Sep 11 Javascript
Vue.extend 编程式插入组件的实现
Nov 18 Javascript
微信小程序中使用 async/await的方法实例分析
May 06 Javascript
js实现无刷新监听URL的变化示例代码详解
Jun 03 Javascript
js实现滑动进度条效果
Aug 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
WIN98下Apache1.3.14+PHP4.0.4的安装
2006/10/09 PHP
php中判断数组相等的方法以及数组运算符介绍
2015/03/30 PHP
Laravel最佳分割路由文件(routes.php)的方式
2016/08/04 PHP
Jquery实战_读书笔记1—选择jQuery
2010/01/22 Javascript
通过上下左右键和回车键切换光标实现代码
2013/03/08 Javascript
js中同步与异步处理的方法和区别总结
2013/12/25 Javascript
在JS数组特定索引处指定位置插入元素
2014/07/27 Javascript
JavaScript去除数组里重复值的方法
2015/07/13 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
javascript将list转换成树状结构的实例
2017/09/08 Javascript
12条写出高质量JS代码的方法
2018/01/07 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
2019/05/24 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
2019/08/26 Javascript
vue实现购物车小案例
2019/09/27 Javascript
jquery插件懒加载的示例
2020/10/24 jQuery
json.stringify()与json.parse()的区别以及用处
2021/01/25 Javascript
Python算法应用实战之栈详解
2017/02/04 Python
Python使用matplotlib绘制正弦和余弦曲线的方法示例
2018/01/06 Python
Python模拟简单电梯调度算法示例
2018/08/20 Python
python-opencv颜色提取分割方法
2018/12/08 Python
对python打乱数据集中X,y标签对的方法详解
2018/12/14 Python
python设置环境变量的作用整理
2020/02/17 Python
自定义实现 PyQt5 下拉复选框 ComboCheckBox的完整代码
2020/03/30 Python
python开发入门——列表生成式
2020/09/03 Python
HTML5 Canvas实现360度全景图的示例代码
2018/01/29 HTML / CSS
欧洲最大的笔和书写专家:The Pen Shop
2017/03/19 全球购物
安全事故检讨书
2014/01/18 职场文书
餐饮部总监岗位职责范文
2014/02/13 职场文书
党的群众路线教育实践活动对照检查材料
2014/09/22 职场文书
先进个人材料怎么写
2014/12/30 职场文书
承诺书模板大全
2015/05/04 职场文书
报案材料怎么写
2015/05/25 职场文书
家庭聚会祝酒词
2015/08/11 职场文书
Html5页面播放M4a音频文件
2021/03/30 HTML / CSS
springboot中一些比较常用的注解总结
2021/06/11 Java/Android