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 相关文章推荐
firefox中JS读取XML文件
Dec 21 Javascript
用JavaScript实现仿Windows关机效果
Mar 10 Javascript
JS获得浏览器版本和操作系统版本的例子
May 13 Javascript
JavaScript中 ES6 generator数据类型详解
Aug 11 Javascript
详解百度百科目录导航树小插件
Jan 08 Javascript
webpack打包js文件及部署的实现方法
Dec 18 Javascript
AngularJS监听ng-repeat渲染完成的方法
Mar 20 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
Nov 25 Javascript
用npm-run实现自动化任务的方法示例
Jan 14 Javascript
JS使用对象的defineProperty进行变量监控操作示例
Feb 02 Javascript
inquirer.js一个用户与命令行交互的工具详解
May 18 Javascript
vuejs移动端实现div拖拽移动
Jul 25 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
Get或Post提交值的非法数据处理
2006/10/09 PHP
php实现图片添加水印功能
2014/02/13 PHP
zf框架的registry(注册表)使用示例
2014/03/13 PHP
PHP伪造来源HTTP_REFERER的方法实例详解
2015/07/06 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
jQuery对象与DOM对象之间的转换方法
2010/04/15 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
2013/02/05 Javascript
angularjs的一些优化小技巧
2014/12/06 Javascript
Javascript毫秒数用法实例
2015/02/05 Javascript
浅谈js 闭包引起的内存泄露问题
2015/06/22 Javascript
JavaScript 封装一个tab效果源码分享
2015/09/15 Javascript
Javascript编程之继承实例汇总
2015/11/28 Javascript
深入理解ECMAScript的几个关键语句
2016/06/01 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
2016/07/11 Javascript
移动开发之自适应手机屏幕宽度
2016/11/23 Javascript
详解axios在node.js中的post使用
2017/04/27 Javascript
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
bootstrap下拉分页样式 带跳转页码
2018/12/29 Javascript
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
nodejs各种姿势断点调试的方法
2020/06/18 NodeJs
vant 中van-list的用法说明
2020/11/11 Javascript
[52:39]完美世界DOTA2联赛PWL S3 CPG vs Forest 第一场 12.16
2020/12/17 DOTA
pyside写ui界面入门示例
2014/01/22 Python
Python3 Random模块代码详解
2017/12/04 Python
python3实现网络爬虫之BeautifulSoup使用详解
2018/12/19 Python
在python3中pyqt5和mayavi不兼容问题的解决方法
2019/01/08 Python
分享unittest单元测试框架中几种常用的用例加载方法
2020/12/02 Python
初中地理教学反思
2014/01/11 职场文书
学生安全教育材料
2014/02/14 职场文书
新年团拜会主持词
2014/04/02 职场文书
教师竞聘演讲稿
2014/05/16 职场文书
重阳节演讲稿:尊敬帮助老人 弘扬传统美德
2014/09/25 职场文书
学校领导班子四风对照检查材料
2014/09/27 职场文书
小学生安全教育心得体会
2016/01/15 职场文书
Log4j.properties配置及其使用
2021/08/02 Java/Android