JavaScript事件处理程序的3种方式
2016-08-24 21:49
579 查看
1.HTML事件处理程序
注意:1.由于是在HTML中添加JavaScript,所以不能使用未经过转义的HTML语法字符
如:和号(&),大于小于号等.
2.事件处理程序在代码执行时,有权访问全局作用域中的任何代码.
缺点:就是与HTML过于紧密,代码改动或者事件改动需要更改的地方比较多
2.DOM0事件处理程序
优势:函数赋值给一个事件处理程序的属性。
简单,跨浏览器。
注:可以通过this访问元素的任何属性和方法
3、DOM2级事件处理程序
基本格式:addEventListener("事件",函数,是否冒泡还是捕获即false/true);
removeEventListener("事件",函数,true/false);
注意:1.false和true的区别:
false从子集开始向上冒泡,先执行自己,在执行父集元素的事件
true 从父集开始捕获,先执行父集的事件,再执行子集的事件
2.遇到重复的事件如何处理
从上往下执行。
持续更新...
<input type="button" value="按钮" onclick="alert('被触发')" >
注意:1.由于是在HTML中添加JavaScript,所以不能使用未经过转义的HTML语法字符
如:和号(&),大于小于号等.
2.事件处理程序在代码执行时,有权访问全局作用域中的任何代码.
缺点:就是与HTML过于紧密,代码改动或者事件改动需要更改的地方比较多
2.DOM0事件处理程序
<input type="button" id="btn"> <script> var btn=document.getElementById("btn"); btn.onclick=function(){ alert("我被触发"); alert(this.id); } </script>
优势:函数赋值给一个事件处理程序的属性。
简单,跨浏览器。
注:可以通过this访问元素的任何属性和方法
3、DOM2级事件处理程序
var btn3=document.getElementById("btn3"); btn3.addEventListener("click",function(){ alert("我被触发了"); },false);
基本格式:addEventListener("事件",函数,是否冒泡还是捕获即false/true);
removeEventListener("事件",函数,true/false);
注意:1.false和true的区别:
false从子集开始向上冒泡,先执行自己,在执行父集元素的事件
true 从父集开始捕获,先执行父集的事件,再执行子集的事件
2.遇到重复的事件如何处理
var btn3=document.getElementById("btn3"); btn3.addEventListener("click",showmsg,false); btn3.addEventListener("click",showmsg,true);
从上往下执行。
持续更新...
相关文章推荐
- nutz的json视图
- JSP_内置对象_请求转发和请求重定向的区别
- webpack学习之webpack.config.js详解
- Ext JS 6学习文档-第8章-主题和响应式设计
- JSP_内置对象_response
- Ext JS 6学习文档-第4章-数据包
- Anguarjs的四大特性
- <Javascript启示录> 一书部分学习总结
- Ext JS 6学习文档–第1章–ExtJS入门指南
- Javascript-正则简单验证身份证号
- JS中Base64的编码与解码
- JSP页面跳转的5种方式
- JS 中 this 的的常用方法
- js this 的用法
- JavaScript笔记:DOM
- JS 中 this 的概念
- JavaScript创建类的5种方式
- js中函数参数值传递和引用传递
- js闭包
- JS获取传入日期的周一和周天