javascript事件小结(事件处理程序方式)--javascript高级程序设计笔记
2015-09-01 15:07
896 查看
1、事件流:描述的是从页面中接收事件的顺序。
2、事件冒泡:IE的事件流叫做事件冒泡,即事件开始从具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到不具体的节点(文档)。
3、事件捕获:指不太具体的节点应该更早接收到事件,而具体的节点应该是最后接收到事件。
4、DOM事件流:“DOM2级事件”规定的事件流包含三个阶段:事件捕获,处于目标阶段和事件冒泡阶段。(实际的目标元素在捕获阶段接不会收到事件)
IE不支持DOM事件流,Opera、safari、chrome、firefox支持事件流。
5、事件处理程序方式有以下几种:
1)HTML事件处理程序:
<input type="text" onclick="alert(1)" />;
<input type="text" onclick="showmessage()" />
这种方式2个缺点:一是当dom元素加载完成,底部js没加载完成时候点击input会报错(这是我理解的精简一句话总结报错);二是js和html代码紧密耦合。若是换事件处理程序,需要改两个地方:HTML和Javascript代码。
2)DOM0级事件处理程序:
就是将一个函数赋值给一个事件的处理程序属性。至今现代为所有浏览器都支持。既简单又款浏览器的优势。属性通常全部小写,例如onclick。将这种属性的值设置为一个函数,就可以指定事件处理程序。如下所示:
<input type="button" id="btn_test" value="测试" />
var oBtn = document.getElementById("btn_test");
oBtn.onclick = function(){
alert(this.id); //btn_test(ps:程序中的this引用当前元素)
}
以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。
删除通过DOM0级指定的事件处理程序方法,将事件处理程序属性设置为null即可:
btn.onclick = null; //删除时间处理程序
3)DOM2级事件处理程序:
“DOM2级事件”定义了两个方法,用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventListener()。所有DOM几点都包含这两个方法,并且它们接受3个参数:要处理的事件名,作为事件处理的函数和一个布尔值。最后这个布尔值为true,则代表在捕获阶段调用事件处理程序;若为false,表示在冒泡阶段调用时间处理程序。
var oBtn = document.getElementById("btn_test");
function test1(){ console.log("test1") }
oBtn.addEventListener("click",test1,false);//冒泡
移除事件处理程序方法:
oBtn.removeEventListener("click",test1,false);//可以移除,匿名函数是移除不掉的。
大多数情况下将事件处理程序都是添加到事件流的冒泡阶段,这样可以最大限度的兼容各种浏览器。
4)IE事件处理程序:
IE实现了与DOM中类似的两个方法:attachEvent()和detachEvent()。这两个方法接收相同的两个参数,事件处理程序名称和事件处理程序函数。由于IE只支持事件冒泡,所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段。
var oBtn = document.getElementById("btn_test");
oBtn.attachEvent("onclick",function(){
alert(this === window); //true
});
var oBtn = document.getElementById("btn_test");
function test1(){ console.log("test1") }
oBtn.attachEvent("onclick",test1);
移除相应的事件处理程序:
oBtn.detachEvent("onclick",test1);
5)跨浏览器的事件处理:
无论时间处理程序是采用什么方式添加到元素中,如果其他方法无效,则默认采用DOM0级方法。
先写到这里,欢迎转载与转发,请注明出处,若是对您有帮助,麻烦帮忙点一下右下角的支持~~
2、事件冒泡:IE的事件流叫做事件冒泡,即事件开始从具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到不具体的节点(文档)。
3、事件捕获:指不太具体的节点应该更早接收到事件,而具体的节点应该是最后接收到事件。
4、DOM事件流:“DOM2级事件”规定的事件流包含三个阶段:事件捕获,处于目标阶段和事件冒泡阶段。(实际的目标元素在捕获阶段接不会收到事件)
IE不支持DOM事件流,Opera、safari、chrome、firefox支持事件流。
5、事件处理程序方式有以下几种:
1)HTML事件处理程序:
<input type="text" onclick="alert(1)" />;
<input type="text" onclick="showmessage()" />
<script> function showmessage(){ alert(1); } </script>
这种方式2个缺点:一是当dom元素加载完成,底部js没加载完成时候点击input会报错(这是我理解的精简一句话总结报错);二是js和html代码紧密耦合。若是换事件处理程序,需要改两个地方:HTML和Javascript代码。
2)DOM0级事件处理程序:
就是将一个函数赋值给一个事件的处理程序属性。至今现代为所有浏览器都支持。既简单又款浏览器的优势。属性通常全部小写,例如onclick。将这种属性的值设置为一个函数,就可以指定事件处理程序。如下所示:
<input type="button" id="btn_test" value="测试" />
var oBtn = document.getElementById("btn_test");
oBtn.onclick = function(){
alert(this.id); //btn_test(ps:程序中的this引用当前元素)
}
以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。
删除通过DOM0级指定的事件处理程序方法,将事件处理程序属性设置为null即可:
btn.onclick = null; //删除时间处理程序
3)DOM2级事件处理程序:
“DOM2级事件”定义了两个方法,用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventListener()。所有DOM几点都包含这两个方法,并且它们接受3个参数:要处理的事件名,作为事件处理的函数和一个布尔值。最后这个布尔值为true,则代表在捕获阶段调用事件处理程序;若为false,表示在冒泡阶段调用时间处理程序。
var oBtn = document.getElementById("btn_test");
function test1(){ console.log("test1") }
oBtn.addEventListener("click",test1,false);//冒泡
移除事件处理程序方法:
oBtn.removeEventListener("click",test1,false);//可以移除,匿名函数是移除不掉的。
大多数情况下将事件处理程序都是添加到事件流的冒泡阶段,这样可以最大限度的兼容各种浏览器。
4)IE事件处理程序:
IE实现了与DOM中类似的两个方法:attachEvent()和detachEvent()。这两个方法接收相同的两个参数,事件处理程序名称和事件处理程序函数。由于IE只支持事件冒泡,所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段。
var oBtn = document.getElementById("btn_test");
oBtn.attachEvent("onclick",function(){
alert(this === window); //true
});
var oBtn = document.getElementById("btn_test");
function test1(){ console.log("test1") }
oBtn.attachEvent("onclick",test1);
移除相应的事件处理程序:
oBtn.detachEvent("onclick",test1);
5)跨浏览器的事件处理:
var EventUtil = { addHandler:function(element, type ,handler){ if (element.addEventListener) { //IE 中 element.addEventListener(type,handler,false);//冒泡 } else if (element.attachEvent) { //IE 中 element.attachEvent("on"+type,handler); } else{ element["on" + type] = handler; } }, removeHandler:function(element, type ,handler){ if (element.removeEventListener) { //IE 中 element.removeEventListener(type,handler,false);//冒泡 } else if (element.detachEvent) { //IE 中 element.detachEvent("on"+type,handler); } else{ element["on" + type] = null; } } } var oBtn = document.getElementById("btn_test"); var handler = function(){ alert(111); } EventUtil.addHandler(oBtn,"click",handler); EventUtil.removeHandler(oBtn,"click",handler);
无论时间处理程序是采用什么方式添加到元素中,如果其他方法无效,则默认采用DOM0级方法。
先写到这里,欢迎转载与转发,请注明出处,若是对您有帮助,麻烦帮忙点一下右下角的支持~~
相关文章推荐
- js运算符
- JavaScript动态修改图片的代码
- JavaScript跨域访问CORS问题
- How to access body of Custom tags in JSP tutorial
- How to redirect to login page after cookie expires in Angular JS?
- JSP - Hits Counter
- [LeetCode][JavaScript]Integer to English Words
- JSP Tutorial
- JSP - Include Directive
- js 计算两个日期之间的月数
- js实现点击向下展开的下拉菜单效果代码
- Jsp里中文乱码的解决办法
- javascript的正则表达式
- freemarker从JSON中取值
- 关于使用tpl模板如何从模板中取数据放入js中
- js数据类型
- javascript实现父子页面数据传递
- js 计算两个日期之间的周数
- js标点符号全局匹配
- js核心--------作用域链了解